Gated-execute on async vs defer on <script>

async and defer both let an external script download while the HTML parser keeps going. They differ in when the script runs and whether the order of several scripts is kept.

Baseline. A classic <script src> with neither attribute is fetched and run immediately, and parsing stops until both are done. The HTML spec says "If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete." (https://html.spec.whatwg.org/multipage/scripting.html)

async (classic external script)

• Parsing: The script is "fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes)" (spec). Download doesn't block the parser, but execution can interrupt it. web.dev notes that async scripts "can interrupt DOM building if they finish downloading while the parser is still at work" (https://web.dev/articles/efficiently-load-third-party-javascript). I only saw that in a search snippet, so it is not backed by an opened page.
• DOMContentLoaded: There is no fixed relationship. MDN says DOMContentLoaded "doesn't wait for other things like images, subframes, and async scripts" (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). An async script may run before parsing ends, or after DOMContentLoaded has already fired. MDN's note that DOMContentLoaded fires "before the execution of scripts with async" reads more strictly than the spec's "potentially before parsing completes". I'd treat async timing as unpredictable. Any async script's setup code should check document.readyState before waiting for DOMContentLoaded.
• Order: There is no guarantee. web.dev says "async scripts may execute out-of-order" (https://web.dev/learn/performance/optimize-resource-loading). In the spec's processing model, an async script is added to a "set" of scripts that will execute as soon as possible, and each runs when its own result is ready.

defer (classic external script)

• Parsing: The script is "fetched in parallel and evaluated when the page has finished parsing" (spec).
• DOMContentLoaded: MDN says defer scripts run "after the document has been parsed, but before firing DOMContentLoaded event", and that they "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). document.readyState is "interactive" while they run (MDN DOMContentLoaded page).
• Order: Document order is guaranteed. MDN says "Scripts with the defer attribute will execute in the order in which they appear in the document." In the spec, deferred scripts go into an ordered "list of scripts that will execute when the document has finished parsing."

Both attributes on one element. MDN says that if async and defer are both present, the element acts as if only async is specified. The spec says defer may still be added alongside async so that legacy browsers that only know defer fall back to deferring instead of blocking.

Inline classic scripts. Neither attribute does anything without src. MDN warns that for inline scripts they "would have no effect". The spec's algorithm only applies async and defer handling to classic scripts that have a src attribute, or to module scripts. Any other inline classic script is, in the spec's words, immediately executed. It runs synchronously as the parser reaches it (unless a stylesheet is still blocking scripts).

type="module" scripts

• Default behavior: Modules are deferred by default. The spec says "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.)" They are put in the same ordered list as defer scripts. They run in document order, before DOMContentLoaded, and DOMContentLoaded waits for them (MDN DOMContentLoaded page).
• With async: The module and all its dependencies are fetched in parallel and evaluated as soon as they are available, possibly before parsing completes. Order is then not guaranteed, as with classic async.
• Inline modules: Unlike inline classic scripts, these follow the same rules as external modules. The spec's algorithm treats any module (with or without src) via the async or deferred-list branches, so an inline module is deferred by default and async applies to it.
• Cross-origin: Unlike classic scripts, module scripts require CORS for cross-origin fetching (spec).

Dynamically inserted scripts. I didn't research this in depth, but the spec's algorithm has a branch for scripts that aren't parser-inserted. Those go into an "in order as soon as possible" list and run in insertion order. The spec also tracks a "force async" flag, so scripts created from JavaScript behave as async unless you set async = false.

{"evidence": [
{"claim": "A classic external script with neither attribute blocks parsing while it is fetched and run.", "quote": "If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "async classic scripts are fetched in parallel and run as soon as available, possibly before parsing completes.", "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": "defer classic scripts are fetched in parallel and evaluated after parsing finishes.", "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": "Module scripts are deferred by default; defer has no effect on them; async makes them run as soon as available.", "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": "defer may be combined with async as a fallback for legacy browsers.", "quote": "The defer attribute may be specified even if the async attribute is specified, to cause legacy web browsers that only support defer (and not async) to fall back to the defer behavior instead of the blocking behavior that is the default.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Deferred scripts execute in document order and delay DOMContentLoaded; defer is ignored for inline scripts and module scripts.", "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 block DOMContentLoaded until they have loaded and run.", "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 on inline classic scripts 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": "If both async and defer are present, async wins.", "quote": "If the attribute is specified with the defer 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": "DOMContentLoaded waits for deferred and module scripts but not async scripts.", "quote": "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": "readyState is interactive during deferred/module script execution, and DOMContentLoaded fires after them.", "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": "async scripts have no ordering guarantee while defer scripts keep markup order.", "quote": "Additionally, async scripts may execute out-of-order, while defer scripts are executed in the order in which they appear in the markup.", "url": "https://web.dev/learn/performance/optimize-resource-loading"}
]}