Faster Loading Web Pages
Having any JavaScript in your web page will slow down the loading of the page. The reason for this is that web browsers will not download any other file required by the page while a JavaScript file called from a script tag in your page is downloaded and run. The logic behind this is that the JavaScript can change what the page needs to download and therefore there is no point in continuing downloading other files until the JavaScript is downloaded and run in order to find out.
Just about all of the other file types that a web page can use can be downloaded either two at the same time or even six at once depending on the browser being used (those limits are per domain and so you could get more files downloading simultaneously if you drag some in from a different domain). Downloading files simultaneously probably will not shorten the total load time for those using a dial-up connection to the internet because the download is probably utilising the full bandwidth of their connection. Those using fast broadband connections will really notice the differenc e when multiple files download simultaneously as this means that the download uses a larger fraction of thewir available bandwidth which is quite capable of downloading many files at the fastest rate an individual file can be downloaded at.
All of the JavaScript files will still be downloaded individually no matter what you do with the HTML and no matter how many simultaneous downloads of other file types that the browser supports.
So how do we resolve thios bottleneck with JavaScript files? One option that some people use is to put the script tags immediately before the closing body tag. That way everything else in the page downloads first before the javaScript starts to download. This makes the page appear to load faster but does nothing to shorten the time before the JavaScript on the page can run.
There is a solution to actually getting the web page to load faster when your visitor is using a broadband connection fast enough to support. The limit on only downloading one JavaScript file at a time or two or six other files at a time only applies to thise files requested from the HTML. It does not apply to files requested from JavaScript.
If we place a short pierce of JavaScript into the head of our page that dynamically adds script tags for the rest of the JavaScript that we want in or page then that short JavaScript will hold up the downloading of all the other files for the page briefly while it is downloaded. The rest of the files requested by the HTML will then download two or six at a time as normal. While these two or six simultaneous downloads are taking place the JavaScripts requested by our short JavaScript will also be simultaneously downloading, As these files were requested by JavaScript and not HTML they do not count toward the limit on the number of files that the HTML can download simultaneously and effectively increase the number of files downloading at the same time instead of reducing the number of files to one as would be the case if they were hard coded in the HTML.
As a result of this minor change in the way we do the processing of the JavaScript in our page we can speed up the downloading of our page for those with surplus bandwidth capacity vailable for this technique to utilise. Where our visitor is already utilising the full capacity of their bandwidth in downloading the page we have added a very small amount of extra JavaScript that they need to download and so the page will download slightly slower. The amount of code that we need to do this is so small though that unless your visitor is on a really slow dial-up connection (say less than 9600) the extra code will still download so fast that they will not notice any significant difference.
So how do we implement this change in the way we load the javaScript in our page? It is actually quite simple. Let's assume that a part of our current web page looks like this:
<script type="text/javascript" src="myscript2.js"></script>
<p/head>
The first step is to change that code to read:
Now all we need to do is to write our fastload script. The code to handle the loading of the two scripts our page needs to load looks like this:
var th = document.getElementsByTagName('head')[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src',jsname);
th.appendChild(s);
}
addJavascript('myscript1.js');
addJavascript('myscript2.js');
As you can see our two original script tags in the HTML have been replaced by the two addJavaScript calls at the bottom of this code. Regardless of how many scripts your page needs to load and what they are called you simply use the appropriate number of add JavaScript statements at the bottom of this code specifying the required filenames for the JavaScript that you want it to load.
If you need to implement this onto multiple pages where the JavaScript files that the page needs are different from one page to the next then you have two choices. You can either make multiple copies of the fastload.js giving it different names for each of the different combinations of scripts that it needs to load or you can separate out the addJavaScript calls into a separate js file and use two script tags in all your pages. The firsat of these will be the faster option when your visitors download the first page from your site as it saves the time to open one additional file for download. The second option means that the addJavascript function will be cached after the first page is viewed and so will not need to be downloaded again however the code is so short that the timesaving gained by caching it is irrelevant since the browser will use just about as much time in determining that it is cached as it would to download it again.
