JavaScript performance is always a question of debate in web development. Bulk of JavaScript’s problem in client side programming is due to its blocking nature. Most of the browsers use a single process for UI updates and JavaScript execution. Longer the time it takes for JavaScript execution longer the browser is locked for updating contents on the web page.
The following are refreshers for improving JavaScript performance.
i) Place <script></script> tag always at the bottom of the page.
<html>
<head></head>
<body>
<div>..</div>
<script>JavaScript Code Snippet</script>
</body>
</html>
ii) Group multiple JavaScript files together. It always faster to load one 100KB file than to load four 25KB files.
iii) Minification and Obfuscation – Sure minification and obfuscation helps but not at the cost of losing readable content.
iv) XHR – Though XHR addresses bulk of the synchronous loading nature of JavaScript it still has cross-domain policy issues. XHR also doesn’t address dependency management.
To address the blocking nature and the dependency management functionalities in JavaScript we use Script Loaders.
One of the more popular framework for Script loaders available today is RequireJS.
i) RequireJS addresses blocking nature of JavaScript by loading just one JavaScript file and releases the browser process for UI.
<script data-main=“scripts/main” src=“scripts/require.js”></script>
This script requires you to load require.js. User scripts will be located in a file called main.js under scripts folder. User scripts are loaded asynchronously.
ii) RequireJS also addresses dependency management by loading scripts on demand
require(["scripts/jquery"], function($) {
$(“display”).html = “This is my text”;
});
This script will add jQuery module to the application.
….. More about RequireJS and its functionality in future sessions.
Loading ...
Interesting. It would be even more useful for mobile pages.
The use case of RequireJS spans from single page applications to building a whole re-usable Javascript library component that we use in our projects.
Looking into the broader perspective we can have an evolving javascript library strictly tailor made for Prowareness’s projects and build on it.