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

I have enough material and am writing up the answer now.

What async and defer do on <script>

Default: a classic external script with no attributes

A plain <script src="…"> stops the parser. The WHATWG 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)

defer on a classic external script

• Parsing: the script downloads while the parser keeps going. The spec says it "will be fetched in parallel and evaluated when the page has finished parsing" (https://html.spec.whatwg.org/multipage/scripting.html).
• Timing vs DOMContentLoaded: it runs after parsing finishes and before DOMContentLoaded. MDN says the script runs "after the document has been parsed, but before firing DOMContentLoaded event," and that deferred scripts "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). MDN's DOMContentLoaded page agrees: the event fires once parsing is done and all deferred scripts have downloaded and run (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).
• Order: guaranteed to be document order. In the spec's algorithm, each deferred script is appended to a single per-document list of scripts that will execute when the document has finished parsing (https://html.spec.whatwg.org/multipage/scripting.html). MDN states the order directly (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

async on a classic external script

• Parsing: the script downloads while the parser keeps going, then runs "as soon as it is available (potentially before parsing completes)" (https://html.spec.whatwg.org/multipage/scripting.html). Running it does occupy the page: MDN says async execution "blocks the page and does not guarantee any specific execution order" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).
• Order: none is guaranteed. The spec puts async scripts in a set of scripts that will execute as soon as possible, and each one runs when its own result is ready (https://html.spec.whatwg.org/multipage/scripting.html). MDN: "You can't rely on the order the scripts will load in."
• Timing vs DOMContentLoaded: DOMContentLoaded doesn't wait for async scripts (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). The spec's "potentially before parsing completes" means an async script can run before or after the event.

Where the sources disagree:

• MDN's DOMContentLoaded page says the event fires "before the execution of scripts with async." It also says an async-included script will find that DOMContentLoaded "has already fired." Both statements are stronger than the spec, which allows an async script to run before parsing finishes. The cautious reading is that the order is not guaranteed either way.
• web.dev says deferred scripts run "at the same time as" DOMContentLoaded (https://web.dev/learn/performance/optimize-resource-loading). The spec and MDN are more precise: deferred scripts run first, then the event fires.
• MDN's own summary says deferred scripts run "once everything has finished loading." That is looser than its attribute reference, which says after parsing and before DOMContentLoaded.

Both async and defer set

async wins. MDN says the element acts "as if only the async attribute is specified." The spec says you may still add defer so that old browsers that only support defer fall back to it instead of blocking (https://html.spec.whatwg.org/multipage/scripting.html).

Inline classic scripts

On a classic script without src, async and defer are not allowed and do nothing (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). The spec's attribute table marks both as not allowed for inline classic scripts. Its algorithm only uses the async/defer branches when the script is classic with a src, or is a module. An inline classic script normally runs immediately and blocks the parser. One exception: if a parser-inserted script is waiting on a style sheet that blocks scripts, it becomes the pending parsing-blocking script and runs once that style sheet loads (https://html.spec.whatwg.org/multipage/scripting.html). web.dev: "inline scripts block the parser until the script is parsed and executed."

type="module"

• Default: deferred, whether external or inline. The module and its dependencies are fetched while parsing continues and run when parsing has finished. In the spec, modules go into the same deferred list as defer scripts, so they run in document order alongside them and before DOMContentLoaded. MDN's DOMContentLoaded page lists <script type="module"> among the deferred scripts the event waits for.
• defer: has no effect on modules, according to the spec and MDN.
• async: the module and all its dependencies are fetched in parallel, and the module runs as soon as it is available, possibly before parsing completes. Unlike inline classic scripts, inline modules do respect async. The spec's table allows async on inline modules, and web.dev notes that inline modules are also deferred automatically.

Two notes on sources

• The WHATWG parsing page (https://html.spec.whatwg.org/multipage/parsing.html) returned 404. I couldn't quote the spec's "the end" steps, so the DOMContentLoaded timing above relies on MDN plus the scripting chapter.
• Some spec sentences in the plan weren't on the page word for word, for example "For classic scripts, if the async attribute is present". The current text says "For external classic scripts…". I quoted the actual wording.

{"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": "An async classic script is fetched in parallel with parsing and runs as soon as it is available, possibly before parsing finishes.", "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": "A defer classic script is fetched in parallel and runs when parsing has finished.", "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": "Deferred scripts run after parsing and before DOMContentLoaded, and they hold the event back.", "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": "Deferred scripts run in document 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": "In the spec, deferred scripts and non-async modules go into one ordered per-document list that runs after parsing.", "quote": "Append el to its parser document's list of scripts that will execute when the document has finished parsing.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Async scripts go into an unordered set and each runs when it is ready.", "quote": "Let scripts be el's preparation-time document's set of scripts that will execute as soon as possible.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Async scripts have no guaranteed order and block the page while they run.", "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": "DOMContentLoaded waits for deferred and module scripts but not for 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": "MDN's DOMContentLoaded page says the event always fires before async scripts run, which is stronger than the spec.", "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": "web.dev says defer scripts run at the same time as DOMContentLoaded, which is less precise than the spec and MDN.", "quote": "Scripts loaded with async are parsed and executed immediately once downloaded, while scripts loaded with defer are executed when HTML document parsing is finished—this occurs at the same time as the browser's DOMContentLoaded event.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "If both attributes are present, async wins.", "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"},
{"claim": "defer next to async is a fallback for old browsers that only support defer.", "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": "async/defer must not be used on inline classic scripts and do nothing there.", "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": "The async/defer branches only apply to classic scripts with src, or to modules (including inline modules).", "quote": "If el's type is \"classic\" and el has a src attribute, or el's type is \"module\":", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Inline classic scripts block the parser.", "quote": "Similarly, inline scripts block the parser until the script is parsed and executed.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "Without async, module scripts and their dependencies are fetched in parallel and run after parsing, which is deferred behavior.", "quote": "Otherwise, 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 has no effect on modules because they are deferred 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": "An async module is fetched with its dependencies in parallel and runs as soon as it is 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 the module script will be evaluated as soon as it is available (potentially before parsing completes).", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Module scripts, including inline ones, are deferred automatically.", "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"}
]}