I set up two test pages so that I could compare the differences between the two versions. I used Chrome Developer Tools to create a waterfall chart that shows the differences between the load times. If you are using Chrome as your browser, simply fire up the developer tools by hitting F12.
The is the original version without async.
This is the new version using both async and defer.
Notice the difference between the two - you can see that the async version doesn't block the page from loading and also loads the page slightly faster. The DOMContentLoaded has completed and then finally the knockout.js file is loaded asynchronously afterwards. It is important to note that the DOMContentLoaded has finished and it wasn't blocked while the knockout.js file was able to continue loading asynchronously.
At the moment, the browser support for the Async attribute looks like this :
- - FireFox 3.6+
- - Internet Explorer 10+
- - Chrome 8+
- - Safari 5.0+
- - Android Browser Honeycomb and Ice Cream Sandwich
- - Possible support in Opera starting in 12+
If it important to remember that most browsers support the async attribute when it is used in conjunction with the "true" value (async="true"). This is because when the attribute first came out many browsers only originally supported this, however the newer HTML5 way of doing this would be to write async without the "true" value. For more information on browser support for the Async Attribute, see this question on StackOverflow.
Add your comment