HTML5 Async Scripts

The HTML5 "async" attribute simplifies page-load performance improvements and dynamic script loading.

Load Independent Scripts Faster

Traditional scripts block the HTML parser, preventing the rest of the page from being rendered until the script has been downloaded and run. Scripts using HTML5 async unblock the rest of the page so it can continue loading while the script is being downloaded.

Without HTML5 Async


<script src="slow.js"></script>
...
<img src="IE_Logo_256.png"/>

With HTML5 Async


<script async src="slow.js"></script>
...
<img src="IE_Logo_256.png"/>

Run Dynamic Scripts in Order

Dynamic scripts load asynchronously by default, but you can enforce order via script.async=false. This is useful for ensuring dependency chains are preserved when running dynamic scripts.

Without HTML5 Async


var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);


With HTML5 Async


var script = document.createElement("script");
script.async = false;
script.src = url;
document.head.appendChild(script);

HTML5 Logo by W3C