Loading time improvements with Javascript

12:43 AM Posted by Unknown

This is another tidbit for coders.
(To be honest, I'm just finding enough time to do some finishing touches for my drafts which are gathering dust and post them here!)

We come up with new hacks, invariably with a javascript file attached. You add all the hacks, end up with a truckload of javascript includes and thus, a longer loading time.

THE ROOT CAUSE
The real problem is the sequential nature of XHTML. XHTML is parsed a tag at a time. So, if you have a couple of lines like this:

<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>

the files are loaded as follows:
The parser first encounters the first script tag. It then slowly retrieves script1.js and loads it into memory, which takes a lot of time. The parser thinks this is the best time to take a nap and doesn't proceed to parse the next script tag until the current download of script1.js is finished.

See the circled portion above. Never mind the loading times. The stuff to notice is that scriptaculous.js doesn't start loading until prototype.js finishes loading.
Now, we have a hell lot of bandwidth going wasted during this time. We can do other activities in parallel. But how to do it?

THE FIX
The simple answer: Load the scripts asynchronously!
I call it EOF. EOF for Execute-Open-Forget. (Well!! These things ought to have a geeky name!) We execute a javascript function, request for a download of script1.js, forget it, and execute the function again with another argument for a download of script2.js

The result is very evident from the following graph below.

Again, don't worry about the load times of singular files. We cannot improve it for the user. But check out the total time taken for the two javascript files circled. It is lesser because the second one starts even before the first one is finished. This difference will be evident if the javascript files are large and takes a few seconds to load.

Now you might be asking how to make it an EOF?
That's what Javascript is here for. We use Javascript to load a Javascript file. It cannot get weirder.

Check out this nifty function:

<script type='text/javascript'>
//<![CDATA[
function loadScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
//]]>
</script>

Now you can load any number of functions using the function.
You just have to add the calls wherever you want

<script type='text/javascript'>
loadScript("script1.js");
loadScript("script2.js");
</script>

This can go anywhere in the code, including onload event.

BE SMARTER
This technique can be used cleverly in specific situations.
For example, you may be using some JS libraries for some of your hacks. If the hacks don't show up during loading and does only when uses does some action, we can set a timer to load the script in background after, say, 5 seconds. The main page will be loaded in a jiffy, and the user will be effectively hoodwinked.
This will result in a really critical timing issue, if not handled carefully. Too much of timeout, and the user may get ample time to tamper with the related hack before the script is loaded.

You can also place the loadScript() call at some convenient place in the HTML code. It can be as far as the bottom portion of your HTML just before body tag, so that the page is rendered very fast. (Again, the above problem holds good here also.)

CAVEATS
Everything comes with a price. This too has its own deficiencies. Some which I know of:
1. This one is because of the different behavior of IE. IE and Firefox both can download scripts in the manner specified above. The difference is that IE executes them in the order they finish downloading, whereas Firefox executes them in the order they are appended to the DOM.
This means that your scripts cannot have dependencies on each other in IE. You can get away sometimes, if you are not using the script files until long after loading. (An example is my AJAX Labels Hack)
Update: You have to be really careful that you don't allow the user to make calls to a particular function in the dependent script in that case. The only advantage that you can get is a slight improvement in overall loading time.
2. You can download more than two files at the same time only if they are from different domains or subdomains. Normal browsers (including Firefox) can open only upto 2 simultaneous HTTP connections to a domain. If you try to download too many files at the same time, you may even witness bottlenecks. So use this discreetly.

Source here : http://blogger-hacked.blogspot.com/2007/05/loading-time-improvements-with.html