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

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.

<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>

Implementation details

Internet Explorer 10 and Windows apps using JavaScript support both the async and defer attributes for the script element (the defer attribute is supported in earlier versions of Windows Internet Explorer). The async and defer attributes can be used only if the src attribute is present. The four possible combinations are as follows.

Usage Description

<script src="widgets.js"></script>

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.

<script async src="widgets.js"></script>

The script is downloaded asynchronously while the page continues to parse. The script executes after the download has completed.

<script defer src="widgets.js"></script>

The script is executed when the page is finished with the parsing.

<script async defer src="widgets.js"></script>

The async attribute is honored, and the defer attribute is ignored. This enables developers to use async in browsers that support it, but fall back to defer in browsers that don't support async.

 

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.

API Reference

async

defer

Internet Explorer Test Drive demos

HTML5 Async Scripts

IEBlog posts

Asynchronous Programming in JavaScript with "Promises"

Specification

HTML5: Section 4.3.1