Combining JavaScript

There is a myth being spread by those who know a bit about how the web works that by combining JavaScript together into one file you speed up the loading of the web page by reducing the number of requests for files being sent to the server.

While there is a saving from reducing the number of requests, there are a large number of other factors involved in making such a change that would completely eliminate that gain and in fact result in the page loading slightly slower rather than slightly faster. In most cases these losses and gains are fractions of a microsecond and therefore unnoticeable but since this particular myth is completely wrong there is little point in combining JavaScript into one file in order to save on that extra file load (there are other reasons for considering combining files together but having the script load into the browser faster is not one of them).

Now what we are considering here is combining two or more unrelated scripts together into a single file. Note that I said "unrelated". A properly written individual JavaScript should only consist of one or two files to start with. The only time it would ever have two files is if the script uses a JavaScript framework (eg. jQuery) in which case you would have one file for the framework and a second file for your particular script that uses that framework. In this instance you would reference the framework from a common repository rather than having it on your own site in the hope that most of your visitors will have already cached that file prior to arriving on your site. Combining that script with your own in order to have a single script file to download will result in a huge increase in the download time for all those visitors who already have a copy of the framework cached. You should always lad frameworks from one of the common repositories and never consider combining them into your script. If you don't use a framework then each of your scripts will only use the one JavaScript file and so there will be nothing to combine when just considering the one script (of course if your script currently uses more than one file then there are lots of benefits to be achieved by rewriting the script to combine it all into one file but this has nothing to do with reducing the number of file requests).

So what we are considering is two or more unrelated scripts which the myth claims we will be able to get to load faster by placing them inside a single JavaScript file. There are a number of reasons why the small saving from combining the files is completely irrelevant as combining unrelated scripts will result in much larger increases at other stages.

Web browsers can download up to sixteen (or more) files at a time. Older browsers will download most JavaScript files by themselves (making any other files wait) so that they can then run the script and apply any updates to the page that the script performs prior to downloading any more files. This is because the JavaScript might contain document.write statements that add to the HTML at that point references to additional files. More modern browsers keep track of where the script was run from and so can download JavaScript files the same as they do other files. This improves the download speed of the page but the scripts still have to wait until the browser has run earlier scripts (including any that those earlier scripts add via document.write statements) before it can run later ones.

If the JavaScript doesn't contain document.write statements (which it shouldn't since such statements are obsolete) there is no reason for any delay in the running of individual scripts provided that they are truly independent. Two new attributes have been added to the script tag to handle this - async to tell the browser that it is safe to download the script alongside other files and to run the JavaScript whenever it happens to finish loading and defer which tells the browser that it can delay loading the JavaScript until after the other files have loaded. Not all browsers understand either of these new attributes and so we need to achieve these same results in an alternate way in order to avoid having the JavaScript delay the download of the rest of the page.

By attaching our script(s) immediately before the </body> tag we achieve the same result as the defer attribute provides without needing to specify that attribute. That particular attribute is unnecessary since simply moving the script tag itself produces an identical result even in browsers that do not understand defer.

We can load our scripts asynchronously even in browsers that don't understand async by using JavaScript to add the script tags into the page instead of hard coding them in the HTML. We still need a small amount of JavaScript in the actual script directly attached to the page but by keeping each unrelated script in a separate file we can use a small piece of JavaScript to make them download in parallel rather than one after the other and so achieve a much larger saving in load time that we would get by combining them together. With the following script attached at the end of the body of the page and with your unrelated scripts in separate files referenced from the addJS calls that follow the function definition you get a greater saving from downloading the scripts in parallel than you would get from the alternative of downloading them all sequentially in one file.

(function() {
"use strict";
var addJS = function(nm) {
    var s = document.createElement('script');

This by itself clearly demonstrates the fallacy of the myth regarding combining of scripts.

Now that doesn't mean that you should not consider combining unrelated scripts together. Here we have simply been considering the increase in load time that results from combining unrelated scripts together (the opposite of the reduction that the myth suggests). There are many other reasons why you might decide to combine unrelated scripts together to gain greater benefits in areas not connected to the script load time.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow