Load Non-blocking JavaScript with HTML5 Async and Defer

Asynchronous and deferred JavaScript execution explained

The HTML <script> element allows you to define when the JavaScript code in your page should start executing. The “async” and “defer” attributes were added to WebKit early September. Firefox has been supporting them quite a while already. Does your browser support the attributes?

§  Normal execution <script>
This is the default behavior of the <script> element. Parsing of the HTML code pauses while the script is executing. For slow servers and heavy scripts this means thatdisplaying the webpage will be delayed.

§  Deferred execution <script defer>
Simply put: delaying script execution until the HTML parser has finished. A positive effect of this attribute is that the DOM will be available for your script. However, since not every browser supports defer yet, don’t rely on it!

§  Asynchronous execution <script async>
Don’t care when the script will be available? Asynchronous is the best of both worlds: HTML parsing may continue and the script will be executed as soon as it’s ready. I’d recommend this for scripts such as Google Analytics.

Loading JavaScript is one of the biggest performance bottlenecks. Under normal circumstances, a scripttag causes the browser to halt rendering, load a file, and run the code. The browser is blocked from doing other useful work because your JavaScript could write to the page, modify existing elements, or redirect to another URL.For this reason, it’s good practice to place script tags at the bottom of the HTML, just before </body>. The browser may be unresponsive for a second or two, but it’s not noticeable because the main content has loaded.However, even that solution is inadequate for today’s multi-megabyte client-side applications. In extreme cases, it’s necessary to load large code libraries using script tag injections or Ajax techniques. This prevents blocking, but requires additional code and rigorous testing to ensure that scripts run in the correct order in all browsers.

The defer Attribute

The defer attribute makes a solemn promise to the browser. It states that your JavaScript does not contain any document.write or DOM modification nastiness:

<script src="file.js" defer></script>

The browser will begin to download file.js and other deferred scripts in parallel without stopping page processing.defer was implemented in Internet Explorer version 4.0 — over 12 years ago! It’s also been available in Firefox since version 3.5.While all deferred scripts are guaranteed to run in sequence, it’s difficult to determine when that will occur. In theory, it should happen after the DOM has completely loaded, shortly before the DOMContentLoaded event. In practice, it depends on the OS and browser, whether the script is cached, and what other scripts are doing at the time.

The async Attribute

async has been introduced in HTML5:

<script src="file.js" async></script>

async is identical to defer, except that the script executes at the first opportunity after download (an optionalonload attribute can be added to run a specific function). You can’t guarantee that scripts will execute in sequence, but they will have loaded by the time the window onload event fires.There’s support for async in Firefox 3.6, Opera 10.5, and the latest WebKit build, so it should appear in the next versions of Chrome and Safari. IE9 is yet to support async, but the IE team could easily add it as an alias for defer. You can use bothasync and defer to support all browsers — even IE4.Perhaps within a few months, we’ll finally have a native, non-blocking JavaScript loading method that works in all browsers.