Gated-execute on async vs defer on <script>

I have gathered sufficient information from authoritative sources. Let me compile a comprehensive answer with evidence.

Answer

The async and defer attributes on the <script> element fundamentally change how and when the browser loads and executes JavaScript in relation to HTML parsing.

The async Attribute

The async attribute tells the browser to fetch a script file in parallel with HTML parsing—the parser is not blocked during the download. However, once the script finishes downloading, execution begins immediately, which does block the HTML parser and rendering until the script completes. This means async scripts can interrupt DOM building if they finish downloading while the parser is still working.

Async scripts execute in an unpredictable order. If you have multiple async scripts, there is no guarantee they will execute in the order they appear in your HTML—whichever finishes downloading first will execute first. Async scripts execute before the load event, but they can execute before, during, or after the DOMContentLoaded event fires, since DOMContentLoaded waits for deferred scripts but not async scripts.

The async attribute only works on external scripts loaded via the src attribute. If you apply async to an inline script (one without a src attribute), the attribute has no effect.

The defer Attribute

The defer attribute also allows scripts to be fetched in parallel without blocking HTML parsing. However, deferred scripts don't execute until after the HTML has been completely parsed. The critical difference from async is that defer guarantees execution order—multiple deferred scripts execute in the exact order they appear in the document.

Deferred scripts execute after HTML parsing completes but before the DOMContentLoaded event fires. This makes defer ideal for scripts that depend on the DOM being fully constructed.

Like async, the defer attribute only applies to external scripts with a src attribute. It has no effect on inline scripts.

Interaction with HTML Parsing

Scripts without async or defer (classic synchronous scripts) block HTML parsing immediately—the parser must stop, download, parse, and execute the script before continuing. Both async and defer eliminate this parser-blocking during the download phase by downloading in parallel. However, async scripts can still interrupt parsing when they execute, while defer scripts never interrupt parsing because they only run after parsing is complete.

Execution Order Guarantees

For multiple scripts:

• async: No guarantees about execution order. Each script executes as soon as it downloads.
• defer: Guaranteed to execute in the order they appear in the HTML document.

DOMContentLoaded Event Timing

The DOMContentLoaded event fires after HTML parsing completes and all deferred scripts have downloaded and executed. Async scripts are not waited for—DOMContentLoaded fires even if async scripts haven't executed yet.

Module Scripts (type="module")

Module scripts have special behavior. They are deferred by default, meaning they are always fetched in parallel and executed after HTML parsing completes, in the order they appear in the document. The defer attribute has no effect on module scripts because they already defer by default.

However, you can add the async attribute to a module script to override the default behavior. When async is present on a module script, the script and all its dependencies are fetched in parallel, and the script executes as soon as it's available, without guaranteeing order relative to other scripts.

Inline Scripts

Inline scripts (script content directly in HTML without a src attribute) cannot use async or defer. These attributes are ignored on inline scripts. Inline scripts execute synchronously wherever they appear in the document, blocking the parser until they complete. However, there is a special case: inline scripts with type="module" are deferred by default like external module scripts, though their execution is still immediate in document order before DOMContentLoaded.

{"evidence": [
{"claim": "async attribute causes scripts to be fetched in parallel while parsing and executed as soon as download completes", "quote": "For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "async scripts can interrupt DOM building if they finish downloading while parser is still at work", "quote": "It also means they can interrupt DOM building if they finish downloading while the parser is still at work.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"claim": "async scripts execute in unpredictable order", "quote": "This means it's possible (and likely) that async scripts won't run in the order in which they appear in the HTML.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"claim": "defer attribute executes scripts after document parsing but before DOMContentLoaded", "quote": "This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded event.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "defer scripts execute in the order they appear in the document", "quote": "Scripts with the defer attribute will execute in the order in which they appear in the document.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "async and defer don't work on inline scripts", "quote": "This attribute must not be used if the src attribute is absent (i.e., for inline scripts) for classic scripts, in this case it would have no effect.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "DOMContentLoaded waits for deferred scripts but not async scripts", "quote": "The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src=\"...\"> and <script type=\"module\">) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"},
{"claim": "DOMContentLoaded fires before async scripts execute", "quote": "DOMContentLoaded is fired after the execution of these scripts, but before the execution of scripts with async.", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"},
{"claim": "Module scripts defer by default", "quote": "The defer attribute has no effect on module scripts — they defer by default.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "Module scripts can use async to override default deferral", "quote": "For module scripts, if the async attribute is present then the scripts and all their dependencies will be fetched in parallel to parsing and evaluated as soon as they are available.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "Inline scripts with type=module defer by default", "quote": "async and defer allow external scripts to load without blocking the HTML parser while scripts (including inline scripts) with type=\"module\" are deferred automatically.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "Inline scripts block the parser until parsed and executed", "quote": "When using inline JavaScript, the parser is similarly blocked until the inline script is parsed and executed.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "Scripts without async, defer, or type=module block parsing", "quote": "Scripts without async, defer or type=\"module\" attributes, as well as inline scripts without the type=\"module\" attribute, are fetched and executed immediately before the browser continues to parse the page.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "async scripts can still block HTML parsing during execution", "quote": "Scripts with async can still block HTML parsing.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"claim": "defer scripts execute after HTML parsing finishes at same time as DOMContentLoaded", "quote": "Scripts loaded with defer are executed when HTML document parsing is finished—this occurs at the same time as the browser's DOMContentLoaded event.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "async scripts execute as soon as download is complete without guaranteeing order", "quote": "scripts with an async attribute will execute as soon as the download is complete. This blocks the page and does not guarantee any specific execution order.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"}
]}