Plan-execute-verify on async vs defer on <script>

Based on my research, I now have comprehensive information about the async and defer attributes. Let me compile a complete answer.

Complete Answer

The async and defer attributes on HTML <script> elements control when scripts are fetched and executed relative to HTML parsing and the DOMContentLoaded event. They have fundamentally different behaviors despite both allowing non-blocking fetches.

The async Attribute

For external classic scripts, the async attribute causes the script to be "fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes)" (https://html.spec.whatwg.org/multipage/scripting.html). This means the browser downloads the script without blocking HTML parsing, but executes it immediately upon completion, which can interrupt DOM construction. Importantly, async provides no guarantee about execution order when multiple scripts use this attribute; scripts execute in the order they finish downloading, not the order they appear in the HTML. Additionally, "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" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

The async 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" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

The defer Attribute

For external classic scripts, defer causes the script to be "fetched in parallel and evaluated when the page has finished parsing" (https://html.spec.whatwg.org/multipage/scripting.html). This means "scripts with a defer attribute will load in the order they are in and will only execute once everything has finished loading" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). Critically, "Scripts with the defer attribute will execute in the order in which they appear in the document" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script), providing guaranteed execution order.

Like async, "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" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

Interaction with HTML Parsing

The critical difference in parsing interaction is straightforward: async scripts are fetched in parallel but execute immediately when ready, potentially blocking the parser. defer scripts are also fetched in parallel but defer all execution until parsing is complete, never blocking the parser. Normal scripts without either attribute "block parsing until these are both complete" (https://html.spec.whatwg.org/multipage/scripting.html).

DOMContentLoaded Event Timing

The DOMContentLoaded event fires at different points depending on script attributes. "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" (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). This means defer scripts execute before DOMContentLoaded fires, but "DOMContentLoaded is fired after the execution of these scripts, but before the execution of scripts with async" (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).

Inline Scripts

Inline scripts (scripts with inline content rather than a src attribute) are fundamentally different: async and defer attributes have no effect on them. Inline scripts with no type attribute execute immediately during HTML parsing, blocking the parser. However, "inline scripts with the type="module" attribute" do defer by default (https://web.dev/learn/performance/optimize-resource-loading).

Module Scripts (type="module")

Module scripts have special behavior. 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). 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.)" (https://html.spec.whatwg.org/multipage/scripting.html).

This means module scripts defer by default—they behave like defer scripts without the async attribute. With async, they behave like async scripts. The key difference from classic scripts is that "The defer attribute has no effect on module scripts — they defer by default" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

When Both Attributes Are Specified

If both async and defer are specified, the async behavior takes precedence. "If the attribute is specified with the async attribute, the element will act as if only the async attribute is specified" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

{"evidence": [{"claim": "For external classic scripts, async causes the script to be fetched in parallel to parsing and evaluated as soon as it is 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 scripts execute as soon as download is complete and block the page, with no guaranteed execution order for multiple async scripts", "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"}, {"claim": "Async must not be used on inline scripts because it has no effect", "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 causes external classic scripts to be fetched in parallel and evaluated when the page has finished parsing", "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": "Scripts with defer attribute 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 must not be used on inline scripts because it has no effect", "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": "DOMContentLoaded fires after deferred scripts and module scripts have executed, but before 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.", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"}, {"claim": "DOMContentLoaded fires after deferred and module script execution, but before async script execution", "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; async attribute can override this default deferring behavior", "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). 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": "Defer attribute has no effect on module scripts because they 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": "Inline module scripts defer by default like external module scripts", "quote": "scripts (including inline scripts) with type=\"module\" are deferred automatically.", "url": "https://web.dev/learn/performance/optimize-resource-loading"}, {"claim": "When both async and defer are specified, async takes precedence", "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"}]}