HTML async Attribute

HTML async Attribute

The HTML async attribute allows a script to be downloaded while the browser continues parsing the HTML document. The script is executed as soon as it is available, which can improve page loading when the script does not depend on other scripts or a particular execution order.

Syntax

The async attribute is placed in the opening <script> tag. It is a Boolean attribute, so its presence enables asynchronous script behavior.

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

For an external classic script, the browser downloads the script while continuing to parse the HTML and executes the script as soon as it becomes available.

Attribute Value

Elements That Use the async Attribute

The async attribute is currently valid on the <script> element. Its behavior depends on whether the script is a classic script or a module script.

Using the async Attribute

Without async, an external classic script normally blocks HTML parsing while the script is fetched and executed.

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

Adding async allows the browser to continue parsing the document while the script is being downloaded:

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

When the script finishes downloading, it is executed as soon as possible. HTML parsing may be temporarily interrupted while the classic script executes.

Script Execution Order

Multiple asynchronous scripts are not guaranteed to execute in the order they appear in the HTML. Each script runs when it becomes available.

<script src="first.js" async></script>
<script src="second.js" async></script>

In this example, second.js could execute before first.js if it finishes downloading first. For this reason, async is best suited to scripts that can operate independently.

async vs. defer

Both async and defer allow external classic scripts to be downloaded while HTML parsing continues, but they differ in when the scripts execute.

Use async when a script can run independently. Use defer when external classic scripts should wait until parsing is complete and their document order matters.

async with Module Scripts

The async attribute can also be used with JavaScript module scripts. The module and its dependencies are fetched while HTML parsing continues, and the module is evaluated as soon as it is available.

<script type="module" src="app.js" async></script>

Without async, module scripts normally wait until the document has finished parsing before they are evaluated. The defer attribute has no effect on module scripts.

Boolean Attribute

The async attribute is a Boolean attribute. Its presence enables asynchronous behavior.

<!-- Asynchronous -->
<script src="script.js" async></script>

<!-- Not asynchronous -->
<script src="script.js"></script>

To disable async, remove the attribute entirely. Writing async="false" does not disable it because the attribute is still present.

Common Mistakes

Do not use async when scripts depend on executing in a particular order. Asynchronous scripts execute when they become available, not necessarily in document order.

<!-- Avoid async when second.js depends on first.js -->
<script src="first.js" async></script>
<script src="second.js" async></script>

Do not use async="false" to disable asynchronous behavior. Because async is a Boolean attribute, remove the attribute instead.

For classic scripts, do not use async on an inline script without a src attribute. The attribute does not apply to inline classic scripts.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The async attribute on the <script> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the async Attribute

The example loads an external script using the async attribute. The browser can continue parsing the HTML while the script is being downloaded and execute the script when it becomes available.

Summary

The HTML async attribute is a Boolean attribute used with the <script> element. For an external classic script, it allows the script to be fetched while HTML parsing continues and causes it to execute as soon as it is available. Because multiple asynchronous scripts are not guaranteed to execute in document order, async is best suited to scripts that can run independently.