I hereby decree

by David LeMieux

 

The current HTML5 working spec gives the script tag some interesting new attributes. The first is "defer" which tells the browser to wait until the page is ready to run the script. The second is "async" which tells the browser to, when possible, run the script without blocking, or asynchronously. While the benefits of using "defer" may be more-readily perceived, asynchronous JavaScript is a little harder to grasp.

To implement the async attribute, you must add is as an empty string or with the value "async". Even though it is a boolean attribute, the value "true" is not accepted, though different browsers may be kind in that regard. The async attribute can only be used when the "src" attribute is also being used. Inline JavaScript cannot be asynchronous. A script tag with async turned on would look like this:

<script src="code.js" async></script>
or
<script src="code.js" async="async"></script>

The same implementation is used for "defer".

You should not use document.write in your asynchronous JavaScript. Because the browser does not block, and because you cannot be sure the DOM is complete, doing so may break or completely remove the DOM.

To see async in action you need a modern browser. Firefox 3.6 will do the trick.

I have put together a couple of examples on using the async attribute and decided it would be best to demonstrate them in video. The following video shows the script running in regular, blocking mode, and then with async turned on. I am using Firebug to dramatize the difference.


Sorry for the bad audio quality.

So, what if you still need to do document.write? Well, you can use a regular JavaScript call to insert whatever you need on to the page, then add a script tag to the head with the async attribute to act upon the items you have inserted. In this way you can have a lightweight script that ads a few small things to the DOM, then the browser can load the async script and run it as it will.

Some things to note:
1) If loading JavaScript asynchronously, you may need to be sure that you don't have code elsewhere that depends on that script being loaded. It may not always load before you need it.

2) Currently it seems as though it will load multiple JavaScript files asynchronously, but in order. Some have reported that as currently implemented that is not the case. It may depend on the browser, so again beware if you have multiple files that rely on a shared library.

This change will most likely be beneficial for things like ads or widgets that have self-contained scripts that run on the page. That way the ad and widget code won't block the rest of the site if it is slow to load.

Here is the code used in my video demo:
http://www.lemieuxster.com/dev/js/asyncTest.html
http://www.lemieuxster.com/dev/js/asyncTest2.html
http://www.lemieuxster.com/dev/js/asyncTest.js
http://www.lemieuxster.com/dev/js/contentInsert.js

On a semi-related note, I recently finished JavaScript: The Good Parts and I recommend it to anyone that does any amount of JavaScript coding. Especially if you are like me and have learned JavaScript through mostly trial and error. It lays down a solid foundation upon which to build JavaScript expertise. It is not a book for beginners, but it does cover the fundamentals.

 

blog comments powered by Disqus