Web Performance

HTML5 Asynchronous JavaScript

Dean Hume

• 3 min read

HTML5 has a handy little attribute called 'async'. This attribute can be used together with Script tags to asynchronously load JavaScript. No more fancy code to get your JavaScript to run asynchronously - you just need to add this to a script tag and it just works.

šŸ’”
<script async src=""><script>

In order to improve page performance and stop Scripts from blocking your page loading, this is the ideal way to go about it. Many a time you will see a blank page while a large JavaScript file is being downloaded and parsed and this is because it is blocking the DOM. In theory, if you have two scripts that need to load in a page and you are using async, they don't need to wait on each other, but instead can run at the same time and in parallel. Another very useful tag attribute that can be used together with 'async' attribute is the 'defer' attribute.

šŸ’”
<script defer src=""><script>

It is also very similar but instead of loading the file asynchronously, it guarantees that the files are executed in the order they occur in the page. It only runs the scripts after parsing is completely finished. I created a small demo page and applied the 'async' attribute to all my script tags. As the page relied on jQuery, the first thing that I noticed was that I had a JavaScript error on the page.

HTML5 Async Error

This occurs because all the JavaScript on the page was trying to load at once, and because code further down couldn't find a reference to the jQuery library, this caused an error. In order to get this to work, I needed to make the script that relied on jQuery load last - using the 'defer' attribute.

Comparison

I set up two test pages so that I could compare the differences between the two versions. I used Chrome Developer Tools to create a waterfall chart that shows the differences between the load times. If you are using Chrome as your browser, simply fire up the developer tools by hitting F12.

The is the original version without async.

No Async Waterfall Chart

This is the new version using both async and defer.

Async Waterfall Chart

Notice the difference between the two - you can see that the async version doesn't block the page from loading and also loads the page slightly faster. The DOMContentLoaded has completed and then finally the knockout.js file is loaded asynchronously afterwards. It is important to note that the DOMContentLoaded has finished and it wasn't blocked while the knockout.js file was able to continue loading asynchronously.

You can view the two files and profile it for yourself - here is the version without async and the version with async. The test pages that I set up are quite small and load relatively quickly. You might notice that with larger pages and more intensive JavaScript files that the page load difference is more noticeable. There is a great demo page on the IE website that lets you see the HTML5 Async scripts loading visually and gives a good understanding of what we are trying to achieve.

Support

At the time of writing this article, the browser support for the Async attribute looks like this :

  • FireFox 3.6+
  • Internet Explorer 10+
  • Chrome 8+
  • Safari 5.0+
  • Android Browser Honeycomb and Ice Cream Sandwich
  • Possible support in Opera starting in 12+

If it important to remember that most browsers support the async attribute when it is used in conjunction with the "true" value (async="true"). This is because when the attribute first came out many browsers only originally supported this, however the newer HTML5 way of doing this would be to write async without the "true" value. For more information on browser support for the Async Attribute, see this question on StackOverflow.