HTML async Attribute
The async attribute is a boolean attribute and specifies that the script will be executed asynchronously. Read and learn on what element it can be used.
The async attribute is a boolean attribute used on the <script> element. It tells the browser to download an external script without pausing HTML parsing, and to execute that script as soon as the download finishes.
It only works for external scripts, so it must be paired with the src attribute. Adding async to an inline script (one with JavaScript written directly between the tags) has no effect — the browser ignores it.
Why async matters
Normally, when the browser reaches a plain <script src="..."> tag, it stops parsing the HTML, downloads the file, runs it, and only then continues building the page. On a slow connection this blocks rendering and makes the page feel sluggish.
async removes the download from the critical path: the browser keeps parsing and building the page while the script is fetched in the background. The result is faster, non-blocking script loading.
async vs defer vs neither
An external script can be loaded in three ways. The difference is when it is downloaded and when it runs relative to HTML parsing.
| Behavior | Download | Execution | Order preserved? |
|---|---|---|---|
| Neither (default) | Blocks parsing | Immediately, before parsing continues | Yes |
async | In parallel, no blocking | As soon as the file is ready (may interrupt parsing) | No |
defer | In parallel, no blocking | After parsing completes, before DOMContentLoaded | Yes |
<!-- Blocks parsing until downloaded and run -->
<script src="example.js"></script>
<!-- Downloads in parallel, runs the moment it arrives -->
<script src="example.js" async></script>
<!-- Downloads in parallel, runs after the HTML is fully parsed -->
<script src="example.js" defer></script>Key points:
- Use
asyncfor independent scripts that don't rely on the page or on other scripts (analytics, ad tags, trackers). - Use
deferwhen the script needs the full DOM, or when several scripts must run in a fixed order. - A
<script type="module">is deferred by default, so you don't adddeferto it; addingasyncto a module makes it run as soon as it loads.
Order is not guaranteed with async
With async, scripts run in whatever order they finish downloading — not the order they appear in the HTML. This breaks any script that depends on another.
<!-- BAD: jquery.js may finish AFTER app.js, so $ is undefined when app.js runs -->
<script src="jquery.js" async></script>
<script src="app.js" async></script>If the second script depends on the first, use defer instead — deferred scripts always execute top to bottom:
<!-- GOOD: jquery.js is guaranteed to run before app.js -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>Syntax
<script src="example.js" async></script>Example of the HTML async attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="example.js" async></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p>
A browser that doesn’t support JavaScript will display the content inside the noscript element.
</p>
<script>
document.write("My first JavaScript example!")
</script>
</body>
</html>