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

Now I have the complete picture. The issue is correct - I need to fix my claim about when async scripts execute relative to DOMContentLoaded. Let me provide the corrected answer:

Corrected Answer

How async and defer Attributes Work on HTML Script Elements

The async and defer attributes control when external scripts are fetched and executed, with significant differences in their behavior during HTML parsing, timing relative to the DOMContentLoaded event, and execution order guarantees.

The async Attribute

The async attribute applies to external classic scripts and module scripts. For classic scripts with async, "the classic script will be fetched in parallel to parsing and evaluated as soon as it is available" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). This means the browser downloads the script without blocking HTML parsing. However, "once the download is complete, the script will execute, which blocks the page from rendering" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). This execution can occur at any time depending on when the download finishes: if the download completes while HTML parsing is still underway, the script executes during parsing; if it completes after parsing finishes, it executes after parsing.

With multiple async scripts, "you can't rely on the order the scripts will load in" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). "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).

Regarding timing relative to DOMContentLoaded: "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" (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). This means async scripts can execute either before or after DOMContentLoaded fires, depending on whether they finish downloading before or after parsing completes. Importantly, DOMContentLoaded does not wait for async scripts to complete.

The async attribute must not be used on inline scripts: "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" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

The defer Attribute

The defer attribute is specified only for external classic scripts. When present, "the classic script will be fetched in parallel and evaluated when the page has finished parsing" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). Scripts with defer download in parallel but do not block parsing; they execute after HTML parsing completes. Importantly, "scripts with a defer attribute will load in the order they appear on the page. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). This execution order guarantee is critical when scripts have dependencies on each other.

Regarding DOMContentLoaded timing: "Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). This means deferred scripts execute before DOMContentLoaded fires, and DOMContentLoaded waits for all deferred scripts to complete. The defer attribute cannot be used on inline scripts: "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

Without async or defer, scripts block HTML parsing entirely. "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" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). This parser-blocking behavior can significantly delay page rendering. Both async and defer eliminate blocking during the fetch phase: "async and defer allow external scripts to load without blocking the HTML parser while scripts (including inline scripts) with type="module" are deferred automatically" (https://web.dev/learn/performance/optimize-resource-loading). However, async scripts can still block parsing during execution if they finish downloading while parsing is still underway.

The defer attribute does not block parsing during execution; it ensures parsing completes before execution begins.

Inline Scripts vs. External Scripts with src

Inline scripts (those that embed code directly within the <script> tag without a src attribute) cannot use async or defer attributes. "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). Inline scripts execute immediately during parsing, blocking further parsing and rendering until they complete. The async and defer attributes only apply to external scripts loaded via the src attribute.

Module Scripts

Module scripts have fundamentally different 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 evaluated as soon as it is available (potentially before parsing completes)" (https://html.spec.whatwg.org/multipage/scripting.html). Without async, "the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing" (https://html.spec.whatwg.org/multipage/scripting.html).

Notably, "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). This means module scripts always load asynchronously (fetched in parallel) and execute after parsing completes, unless the async attribute is explicitly specified. Like deferred scripts, module scripts participate in DOMContentLoaded timing: "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).

{"evidence": [{"claim": "async classic scripts are fetched in parallel to parsing and evaluated as soon as they are available", "quote": "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": "once an async script download completes, the script executes and blocks the page from rendering", "quote": "once the download is complete, the script will execute, which blocks the page from rendering.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"}, {"claim": "async scripts execute as soon as download completes without guaranteeing execution 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"}, {"claim": "you cannot rely on the order async scripts execute in", "quote": "you can't rely on the order the scripts will load in.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"}, {"claim": "DOMContentLoaded does not wait for async scripts to finish loading", "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 attribute must not be used on inline scripts (those without src attribute)", "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 classic scripts are fetched in parallel and evaluated when page has finished parsing", "quote": "the classic script will be fetched in parallel and evaluated when the page has finished parsing.", "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 a defer attribute will load in the order they appear on the page. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"}, {"claim": "defer scripts prevent DOMContentLoaded from firing until scripts have loaded and finished evaluating", "quote": "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": "defer attribute must not be used on inline 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": "Scripts without async, defer or type=module are fetched and executed immediately before parsing continues", "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 and defer allow external scripts to load without blocking the HTML parser", "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": "Module scripts with async 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 evaluated as soon as it is available (potentially before parsing completes).", "url": "https://html.spec.whatwg.org/multipage/scripting.html"}, {"claim": "Module scripts without async are fetched in parallel and evaluated when page has finished parsing", "quote": "the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"}, {"claim": "defer attribute has no effect on module scripts as 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": "DOMContentLoaded waits for both defer scripts and module scripts to complete", "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"}]}