Asynchronous script execution
The async attribute for the script element enables the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script loads and executes in the background while the page continues to be parsed. For pages using processing-intensive scripts, the async attribute can significantly increase page-load performance.
The async attribute is part of the World Wide Web Consortium (W3C) HTML5 specification and is designed for situations where dependencies on a script do not exist, but the script still needs to run as soon as possible. In the following hypothetical example, recall that without the async (or defer) attribute, a script can block other page content from loading.
Lilah has a personal blog that utilizes a number of script-based widgets. These widgets serve to enhance her visitors' experience, but her page is still functional without any of them loaded (she wants to support users with scripting disabled). Currently, she's loading all these widgets at the top of her HTML file, but she's received complaints that her page takes too long to load because of lengthy script execution times. She's tried moving the scripts to the end of the page to help speed things up, but she has so much content that the enhanced experience for her site does not work quickly enough with this change. What she really wants is to let these widgets load as quickly as they can, but without blocking the rest of her page. After a quick search, she realizes that HTML5's async attribute is exactly what she needs. By placing all her script-based widgets in an external file, she's quickly up and running again with an improved balance of performance and script-based enhancements.
The script is executed immediately, and the page waits for the script to finish before continuing to parse. This can significantly reduce page-load performance.
The script is downloaded asynchronously while the page continues to parse. The script executes after the download has completed.
The script is executed when the page is finished with the parsing.
In summary, async enables web developers to improve page-load times with minimal effort. It also reduces the number of browser-specific workarounds required for script-loader libraries.
- HTML5: Section 4.3.1
Build date: 11/17/2013