Single on async vs defer on <script>

Short answer: with no attribute, an external classic script stops the HTML parser while it downloads and runs. async and defer both let the download happen while parsing continues. async runs the script as soon as it has downloaded, in no set order and possibly before DOMContentLoaded. defer waits until parsing is finished, runs scripts in document order, and runs them before DOMContentLoaded. On inline classic scripts both attributes do nothing. Module scripts are deferred by default, and async works on them even when they're inline.

The default. If neither attribute is present, "the script is fetched and evaluated immediately, blocking parsing until these are both complete" (https://html.spec.whatwg.org/multipage/scripting.html). MDN says the same about scripts with no async, defer or type="module", and about inline scripts without type="module": they run before the browser goes on parsing (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

async (external classic scripts)

• Parsing: the file downloads while parsing continues, and it "evaluated as soon as it is available (potentially before parsing completes)" (spec). Downloading doesn't block the parser, but running the script can. If it finishes downloading mid-parse, it interrupts DOM building (https://web.dev/articles/efficiently-load-third-party-javascript).
• Order: none is guaranteed. MDN warns that among several async scripts, a jQuery file "may load before or after" the scripts that depend on it.
• DOMContentLoaded: async scripts aren't tied to it. MDN says DOMContentLoaded "doesn't wait for … async scripts" and that an async script may run after it has already fired (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). web.dev only promises they run before the window's load event.
• Where sources disagree: a note on MDN's DOMContentLoaded page says the event fires "before the execution of scripts with async". That is too strong. The spec, and MDN's own script-element page, say an async script can run before parsing completes, which means before DOMContentLoaded. I'm following the spec: an async script may run before or after DOMContentLoaded, depending on when it finishes downloading.

defer (external classic scripts)

• Parsing: the file downloads in parallel and runs "when the page has finished parsing" (spec). The parser never stops for it.
• DOMContentLoaded: deferred scripts run "after the document has been parsed, but before firing DOMContentLoaded", and they hold that event back until they have run (MDN script page).
• Order: they run in the order they appear in the document (MDN). In the spec, they go into the document's "list of scripts that will execute when the document has finished parsing".
• Wording mismatch: MDN's summary says deferred scripts run "once everything has finished loading". The spec and MDN's own attribute description say "after parsing", not after every resource has loaded.

Both attributes together: async wins (MDN). The spec says you can add defer anyway, so that old browsers that only understand defer use it instead of blocking.

Inline classic scripts (no src): async and defer have no effect. The spec's table doesn't allow them on inline classic scripts, and MDN says they would do nothing there. In the spec, these scripts are run immediately, while the parser waits. The one exception is a pending style sheet that blocks scripts; then the script waits for it.

type="module" scripts

• Default: deferred, whether they have a src or are inline. The module and everything it imports download in parallel, and it runs once parsing finishes. defer has no effect on modules.
• With async: the module runs as soon as it and its imports are ready, which may be before parsing finishes. Unlike classic scripts, the spec allows async on inline module scripts.
• DOMContentLoaded: the event waits for non-async module scripts, the same as for defer scripts (MDN).
• Order: in the spec, non-async modules go into the same "finished parsing" list as defer scripts, which is what keeps them in order. Async modules go into the unordered "as soon as possible" set.

Scripts added from JavaScript: a script element created by script and not marked async runs as async by default (the spec calls this "force async"). It loses that if you set .async = false. It then joins an ordered "in order as soon as possible" list.

{"evidence": [
{"claim": "Without async/defer, an external classic script blocks parsing while it is fetched and evaluated.", "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 evaluated 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": "A defer classic script is fetched in parallel and evaluated when 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": "Deferred scripts run after parsing but before DOMContentLoaded.", "quote": "This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded event.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "Deferred scripts hold back DOMContentLoaded until they have 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": "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": "Async scripts have no guaranteed execution order.", "quote": "You get no guarantee that scripts will run in any specific order.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "If both attributes 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": "defer may be added alongside async so that legacy browsers fall back to 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 has no effect on inline classic 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": "Without async, module scripts and their dependencies are fetched in parallel and run after parsing finishes; defer has no effect on them.", "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": "Async module scripts run as soon as they and their dependencies are ready, possibly before parsing completes.", "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": "DOMContentLoaded waits for deferred and module scripts but not for 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. 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 fires before async scripts run, which is stronger than the spec's 'potentially before parsing completes'.", "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 run before the load event and can interrupt parsing if they finish downloading mid-parse.", "quote": "It also means they can interrupt DOM building if they finish downloading while the parser is still at work.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"claim": "Async scripts (classic and module) and force-async scripts go into an unordered 'as soon as possible' set.", "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": "Parser-inserted defer scripts and module scripts go into the ordered list run 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": "Parser-inserted scripts without async get force async set to true, so a script that later updates them runs them asynchronously.", "quote": "If parser document is non-null and el does not have an async attribute, then set el's force async to true.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Scripts without async/defer/module, and inline non-module scripts, run 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"}
]}