Propose-select on async vs defer on <script>

In HTML, the async and defer attributes on <script> elements control when external scripts are fetched and executed relative to HTML parsing and the DOMContentLoaded event. Each has fundamentally different behavior regarding parsing, execution timing, and order guarantees.

How async Interacts with HTML Parsing

When the async attribute is present on an external classic script, the script is fetched in parallel to parsing without blocking the HTML parser from continuing. However, once the download completes, the script immediately begins execution, which blocks the parser and rendering until execution finishes. This means async scripts can still interrupt DOM construction if they finish downloading while parsing is still in progress. The timing of execution depends entirely on download speed—whichever script finishes first will execute first, regardless of source order.

For module scripts with async, the behavior is similar: the module and all its dependencies are fetched in parallel, and the module executes as soon as it becomes available (potentially before parsing completes).

How defer Interacts with HTML Parsing

Scripts with the defer attribute are fetched in parallel to parsing but do not interrupt parsing. The parser continues unblocked. The script only executes after the HTML parsing has completely finished. This non-blocking behavior allows the page content to display much sooner. Note that defer only works on external scripts; it has no effect on inline scripts.

Module scripts without an explicit async attribute defer by default—they automatically exhibit deferred behavior without needing the attribute specified.

Execution Relative to DOMContentLoaded

The timing relative to the DOMContentLoaded event is critical:

• defer and module scripts (type="module"): Execute after HTML parsing completes but before the DOMContentLoaded event fires. The event is queued to fire only after these deferred scripts have downloaded and executed.
• async: Execute at the first opportunity after download, which can be before or after DOMContentLoaded, depending on download timing. Async scripts do not block DOMContentLoaded—the event fires independently of async script completion.

Execution Order Guarantees with Multiple Scripts

• async: No guarantees about execution order. Multiple async scripts run in no predictable order—they execute as soon as each completes downloading. If script B downloads faster than script A (even though A appears first), B will execute first.
• defer: Strict order is guaranteed. Multiple deferred scripts execute in the order they appear in the document, even if some download faster than others. This makes defer suitable when scripts have dependencies.
• Module scripts: Without async, module scripts maintain order like defer. With async, module scripts execute as soon as available.

Inline Scripts vs. External Scripts

Inline classic scripts (no src attribute):

• The async attribute must not be used on inline classic scripts—it has no effect and is invalid HTML.
• The defer attribute must not be used on inline classic scripts—it has no effect.
• Inline classic scripts are fetched and executed immediately during parsing, blocking the parser.

Inline module scripts (no src attribute, with type="module"):

• These are deferred by default; they do not block parsing.
• The async attribute can be used on inline module scripts and has a meaningful effect: the module executes as soon as the code is ready (not necessarily deferred to after parsing).
• Inline module scripts still wait for all their imports to load and evaluate before executing.

External classic scripts with src:

• async: Fetched in parallel, executed immediately upon download completion.
• defer: Fetched in parallel, executed after parsing completes, in document order.
• Neither attribute: Fetched and executed immediately, blocking the parser (parser-blocking resource).

External module scripts with src and type="module":

• Default behavior is defer-like—they fetch in parallel and execute after parsing, in order.
• async: Changes behavior to execute as soon as available.
• defer: Explicitly specified but has no additional effect (they already defer by default).
• Module scripts require CORS for cross-origin fetches.

Special Cases and Timing Details

When both async and defer are specified on the same script element, the async attribute takes precedence, and the element acts as if only async is set. The defer attribute is retained primarily for backwards compatibility with older browsers that support defer but not async.

If the async attribute is dynamically added to a script element via JavaScript, it sets the internal "force async" flag, which affects its execution mode.

The document's readyState property reflects these timing relationships: it transitions to "interactive" after HTML parsing completes but before deferred and module scripts execute; DOMContentLoaded fires after these scripts complete; and readyState becomes "complete" after async scripts finish.

{"evidence": [{"claim": "For classic scripts, async causes the script to be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing 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 (potentially before parsing completes).", "url": "https://html.spec.whatwg.org/multipage/scripting.html"}, {"claim": "Async scripts can still block HTML parsing because they block during execution", "quote": "Scripts with async can still block HTML parsing.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"}, {"claim": "Async scripts can interrupt DOM building if they finish downloading while the parser is still working", "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": "Defer scripts execute after HTML parsing is completely finished, but before the DOMContentLoaded event", "quote": "Scripts with the defer attribute execute after HTML parsing is completely finished, but before the DOMContentLoaded event.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"}, {"claim": "Defer ensures that scripts run in the order they appear in the HTML", "quote": "defer ensures that scripts run in the order they appear in the HTML and don't block the parser.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"}, {"claim": "Scripts with defer attribute execute in the order in which 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 scripts do not guarantee execution order and likely won't run in the order they appear", "quote": "It is 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": "Async attribute has no effect on inline classic 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": "Defer attribute has no effect on inline classic scripts", "quote": "This attribute must not be used if the src attribute is absent (i.e., for inline scripts), in this case it would have no effect.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"}, {"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": "DOMContentLoaded fires after execution of defer and module scripts but before async scripts", "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": "DOMContentLoaded doesn't wait for async scripts to finish", "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": "Async scripts execute as soon as download is complete before the window load event", "quote": "Scripts with the async attribute execute at the first opportunity after they finish downloading and before the window's load event.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"}, {"claim": "Inline scripts with type=module are deferred automatically", "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": "For module scripts, if async is present, the module and dependencies are fetched in parallel and evaluated as soon as available", "quote": "For module scripts, if the async attribute is present then the module script and all its dependencies will be fetched in parallel to parsing, and the module script will be evaluated as soon as it is available (potentially before parsing completes).", "url": "https://html.spec.whatwg.org/multipage/scripting.html"}, {"claim": "When async attribute is specified with defer, the element acts as if only async is specified", "quote": "If the attribute is specified with the async attribute, the element will act as if only the async attribute is specified.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"}, {"claim": "Inline classic scripts without async or defer are executed immediately before the browser continues 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": "A parser-blocking resource interrupts the HTML parser, such as a script element without async or defer attributes", "quote": "A parser-blocking resource interrupts the HTML parser, such as a <script> element without async or defer attributes.", "url": "https://web.dev/learn/performance/optimize-resource-loading"}]}