Asynchronous and deferred JavaScript

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.

  • Normal execution <script>
    This is the default behavior of the <script> element. Parsing ofthe HTML code pauses while the script is executing. For slow servers and heavy scripts this means that displaying the webpage will be delayed.
  • Deferred execution <script defer>
    Simply put: delaying script execution until the HTML parser hasfinished. A positive effect of this attribute is that the DOM will beavailable for your script. However, since not every browser supportsdefer yet, don’t rely on it!
  • Asynchronous execution <script async>
    Don’t care when the script will be available? Asynchronous is the bestof both worlds: HTML parsing may continue and the script will beexecuted as soon as it’s ready. I’d recommend this for scripts such asGoogle Analytics.


    Use the Tracking Snippet to Track Your Website - Google Analytics

    <script>(function() { var script = document.createElement(script); script.src = ...; script.async = true; var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(script, s);})();</script>