When CSS and images are included in your HTML, they are loaded asynchronously. This is not the case with JavaScript. When a JavaScript file is loaded, no other resources will be downloaded.

In terms of performance, most developers right now follow this rule: CSS at the top, JavaScript at the bottom. This allows all CSS & images to be loaded asynchronously, before it hits the roadblock of JavaScript, but at least by that point you have all your resources, so as soon as JavaScript is finished your page will be displayed.

However, there are alternatives available that allow JavaScript to be loaded asynchronously. These methods are documented here by Steve Soulders, but the main problem with this is it means a fair amount of work to implement… a developer must architect his or her code specifically to allow it to be loaded in this manner.

Over the last few weeks, there has been some progress in bringing one of the techniques (Script DOM Element) to the masses.

Analyze This!

First off, and probably the easiest way for a developer to get into asynchronous JavaScript loading, Google launched asynchronous tracking code for Google Analytics.

As Google Analytics uses JavaScript to collect usage data, it usually adds more load time to each page it is installed on, and can potentially cause pages to hang, if there are issues with Google’s servers. But with the following code, this issue goes away:

<script type="text/javascript">
var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
        'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();
</script>

Just replace the UA-XXXXX-X with your own identfier.

To see an example of this, just have a look at the source code of this site.

Straight From The Lab

Another project that has been emerging to tackle this same issue is LABjs.

From the LABjs documentation, the following code shows how one might use it:

$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js");

The wait() bit would be where you want the browser to block, everything else would be loaded asynchronously.

I’m sure the LABjs project will evolve a lot over the next few months, but it’s an interesting start… one to keep your eye on.

Related articles by Zemanta

• Yahoo! YSlow for Firebug (stereonaut.net)
• Google on Speed (bruceclay.com.au)

Firstly, there’s the new addition to the family that is coming along right around the corner. To make it work, I’m just gonna have to have complete control over how & when I work, more than I would be willing to ask of any employer.

Secondly, I’ve been wanting to run a business for a few years now. Although I didn’t envisage it being in a freelancing/consulting capacity, it made sense when I thought about it. Why jump in trying to do something new? Surely it would be sensible to do the thing that I’ve been doing for…

10 years. That’s the third reason, or at least part of the third reason. As well as my second child, 2010 will bring with it my 30th birthday (oy vey) and my 10th year in full-time employment as a web developer. The long and short of it is, it’s time for me to do this for myself.

So, there you have it. 2010 here I come. It’s gonna be HUGE.