HTML5’s async Script Attribute
async - The HTML
As I mentioned above, it's as easy as adding an attribute:
<script async src="siteScript.js" onload="myInit()"></script>
async attribute to 90% of your SCRIPT elements.
defer - The HTML
Safari has also added a
<script defer src="siteScript.js" onload="myInit()"></script>
Very similar to the
async & defer - What's the Difference
This WebKit blog post explains the difference between
deferscripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between
defercenters around when the script is executed. Each
asyncscript executes at the first opportunity after it is finished downloading and before the window's load event. This means it's possible (and likely) that
asyncscripts are not executed in the order in which they occur in the page. The
deferscripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document's
Who Supports async and defer?
Also from the Safari blog:
In addition to upcoming versions of WebKit-based browsers, Firefox has long supported the defer and onload attributes and support for async was added in version 3.6. Internet Explorer has also long supported the defer attribute. While async is not yet supported, support for the onload attribute was added in version 9.
Seeing that WebKit had implemented
async put a huge smile on my face. Blocking is a huge bottleneck for every website and the ability to easily direct a script to load asynchronously should speed up the web!
Okay… so what is the benefit of the async tag vs defer. It seems that in all use cases defer is just as efficient and more useful as it will prevent nasty dependency problems?
Please explain why async is ftw better than defer…