HTML5 Async Scripts

Load Independent Scripts Faster ▶ Run Test

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.

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

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

Run Dynamic Scripts in Order ▶ Run Test

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.

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

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