Plan-execute on async vs defer on <script>

I now have comprehensive information from authoritative sources. Let me write the complete answer.

The async and defer Attributes on HTML <script> Elements

The async and defer attributes provide two different mechanisms for controlling when external scripts are fetched and executed relative to HTML parsing and the DOM ready state.

How async Interacts with HTML Parsing

When the async attribute is present on an external script, the browser fetches the script in parallel to parsing and evaluates it as soon as it becomes available, potentially before HTML parsing completes. This means the script download does not block HTML parsing. However, once the script download finishes, the script execution blocks page rendering while it runs. The async attribute cannot be used on inline scripts (where it would have no effect) and only applies to external scripts and module scripts.

How defer Interacts with HTML Parsing

The defer attribute also allows the browser to fetch the script in parallel to parsing, but crucially, deferred scripts are not executed until after the entire HTML document has been parsed. This means defer eliminates parser-blocking while still deferring execution until parsing completes. Like async, defer cannot be used on inline scripts and has no effect on them.

Execution Timing Relative to DOMContentLoaded

The timing relationship with the DOMContentLoaded event differs significantly between async and defer. Deferred scripts execute after HTML parsing completes but before the DOMContentLoaded event fires—the browser actually waits for all deferred scripts to finish executing before firing DOMContentLoaded. In contrast, async scripts execute independently whenever they finish downloading and may fire well before, during, or after the DOMContentLoaded event. The browser does not wait for async scripts before firing DOMContentLoaded.

Execution Order Guarantees with Multiple Scripts

When multiple scripts use the async attribute, there is no guaranteed execution order. Scripts execute as soon as they finish downloading, so their order depends on network timing and download duration, not document order. Conversely, scripts with the defer attribute execute in the exact order they appear in the document, preserving document order regardless of download speed variations. This makes defer suitable for scripts with interdependencies.

Inline Scripts and async/defer

Inline scripts (where JavaScript code is directly embedded in the HTML without a src attribute) are unaffected by both async and defer attributes. These attributes simply have no effect on inline scripts and should not be used on them. Inline scripts always execute immediately when encountered during parsing, blocking further parsing until they complete.

Module Scripts (type="module")

Module scripts have fundamentally different default behavior than classic scripts. Module scripts defer by default—they are fetched in parallel to parsing but executed only after the HTML has been parsed, similar to the defer behavior. The defer attribute has no effect on module scripts because they already defer automatically. However, the async attribute can be applied to module scripts to change their behavior: when async is present, module scripts execute as soon as they and their dependencies are available, without waiting for document parsing to complete, similar to async classic scripts. Module scripts respect execution order for their dependencies while still allowing parallelized fetching.

{"evidence": [
{"claim": "async attribute on external classic scripts causes them to be fetched in parallel to parsing and evaluated as soon as available", "quote": "For external 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 attribute cannot be used on inline scripts", "quote": "Warning: 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": "async scripts can interrupt DOM building and rendering", "quote": "Scripts with the async attribute execute at the first opportunity after they finish downloading and before the window's load event. This means it's possible (and likely) that async scripts won't run in the order in which they appear in the HTML. 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 attribute causes scripts to be fetched in parallel but executed after document parsing completes", "quote": "If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "defer attribute cannot be used on inline scripts", "quote": "Warning: 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": "defer scripts execute before DOMContentLoaded event fires, and browser waits for them", "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. Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "DOMContentLoaded does not wait for 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": "async scripts have no guaranteed execution order", "quote": "You get no guarantee that scripts will run in any specific order.", "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": "defer attribute execution order is preserved regardless of download timing", "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": "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 without async are fetched in parallel but executed after parsing completes", "quote": "Otherwise, the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing. (The defer attribute has no effect on module scripts.)", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "async module scripts execute as soon as available without waiting for parsing", "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://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "inline scripts with type=module behave differently from classic inline scripts", "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": "scripts without async, defer, or type=module are fetched and executed immediately", "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"}
]}