Gated-execute on async vs defer on <script>

Now I have comprehensive information. Let me write a complete answer based on my research.

Understanding HTML's async and defer Script Attributes

The async and defer attributes on HTML <script> elements fundamentally change when and how scripts are fetched and executed, offering crucial control over page loading performance.

How async Works

For external classic scripts (those with a src attribute), the async attribute tells the browser to fetch the script in parallel with HTML parsing. According to the WHATWG specification, "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)." This means the script may finish downloading while the HTML parser is still working, and execution happens immediately upon completion, potentially interrupting DOM construction. As web.dev notes, "Scripts with async can still block HTML parsing."

A critical characteristic of async scripts is that they do not maintain execution order. When multiple async scripts are present, "It is possible (and likely) that async scripts won't run in the order in which they appear in the HTML."

Regarding the DOMContentLoaded event, async scripts execute before it fires, but the event does not wait for them. According to MDN, "DOMContentLoaded is fired after the execution of these scripts, but before the execution of scripts with async," meaning DOMContentLoaded fires once parsing completes and deferred/module scripts finish, regardless of async script status.

How defer Works

The defer attribute specifies that a script should execute after the document is fully parsed. The WHATWG specification states: "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."

Unlike async, deferred scripts maintain execution order. MDN confirms: "Scripts with the defer attribute will execute in the order in which they appear in the document." This is essential when scripts depend on each other or on the DOM being complete.

Importantly, deferred scripts block the DOMContentLoaded event. MDN states that "Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating." The DOMContentLoaded event fires after all deferred scripts complete execution.

Inline Scripts vs. External Scripts

The async and defer attributes have no effect on inline scripts (scripts without a src attribute). MDN explicitly warns: "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." The same restriction applies to defer. Inline scripts execute immediately and block HTML parsing.

Module Scripts

Module scripts (using type="module") behave differently. They defer by default, meaning they wait for parsing to complete before executing. The WHATWG specification explains: "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.)"

This means:

• Without async, module scripts automatically defer (no need to specify defer)
• With async, module scripts execute as soon as available, like classic async scripts
• The defer attribute is ignored on module scripts

MDN confirms: "The defer attribute has no effect on module scripts — they defer by default." Inline module scripts also defer automatically.

Module scripts participate in 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."

Summary Table

{"evidence": [
{"claim": "async scripts are 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 scripts can interrupt DOM building and block HTML parsing", "quote": "It also means they can interrupt DOM building if they finish downloading while the parser is still at work. Scripts with async can still block HTML parsing.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"claim": "async scripts do not maintain execution 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 scripts are fetched in parallel and evaluated after 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 scripts execute before DOMContentLoaded", "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 scripts maintain execution order", "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 scripts prevent DOMContentLoaded from firing until completion", "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": "async and defer have no effect 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": "module scripts defer by default", "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", "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 deferred and module scripts execute but not after async", "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"}
]}