Question

I have read a few articles online about optimizing javascript loading.
A few key points I got is to minimize the number of script files (http requests), minify and enable gzip on the server. Currently, what is done on my side is that all javascript files are minified, and gzip can be simply enabled as well.

Part 1)

My problem is that I have around 20 javascript files, there is one common.js that has all the core functions. Besides that, every page would load at least one other file that implements the functionality of that page.

Solution 1, is to combine all scripts in one big script file, and get loaded once for each client, which seems to be what everyone else is doing. I guess YUI or JSMin can be used for compressing, so I should combine the files manually?

Solution 2, lazy loading when a required function is needed, I don’t really know how this works, but it seems to be a way to do it, though still requires more http requests. I would love to hear any inputs for this.

Part 2)

The web application I am working on will be deployed to many other computers, since javascripts are pretty small, is it a good practice to make a script that dynamically load the newest script from a central server, so that every client will run the newest script?

Answer 1

Part 1: Like you said, there’s two approaches.

• Solution 1 is valid, and there are tools out there to do this, including Google’s Closure Compiler. The problem is in most cases it needs every single script on your site to be included in order to work properly, so regardless of what your page might use, it gets everything
• Solution 2 is also valid, but like you said doesn’t really prevent the multiple http requests. But it’s good in that it only loads what you need, when you need it, and doesn’t create any blocking calls on the initial page load. Head.js is an option that was mentioned, as well as Require.js and others.

Part 2:

• There are ways to force the browser to always download the latest javascript file, although this kind of negates the benefit of browser caching. One common way is to add a get variable to the end of the javascript URL, i.e. “domain.com/index.js?timestamp=_123123123”. This is similar to what jQuery does when you turn off caching for its ajax calls.