What exactly is the benefit of the HTML5 async attribute on script elements?

Question

I have some confusion around the new async attribute to the script element in HTML5 that I hope someone can give a clear answer to.

Browsers are capable of Parallel Connections, therefore images will be downloaded in parallel. But any external javascript is not downloaded in parallel with other external javascript and images. Scripts block page loading until they have been downloaded and executed.

To download a script without blocking the rest of the page loading, the most common technique is to create a script element, like Google Analytics snippet does:

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.src = '...ga.js'; ga.async = true; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 

I'm not sure of how that works exactly - either

• the browser parses and renders the page, then once it has finished it notices the DOM has changed, resulting in the ga.js script being downloaded and executed

or

• the browser starts downloading the javascript in parallel with other resources.

I think it is the latter.

The new asynchronous Google Analytics snippet includes the HTML5 async attribute in the script element it creates. That will not help the page blocking problem - that has already been solved by the "Script DOM Element" technique. So what does async add to the picture? According to w3schools, "if async is present, the script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)".

And according to Steve Souders site, "the main benefit of this [async attribute] is it tells the browser that subsequent scripts can be executed immediately – they don’t have to wait for ga.js".

So are async and the Script DOM element technique both solving the same problem?

Answer 1

Will work:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>$('body').append('Yey');</script> 

Will not work:

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>$('body').append('Yey');</script>