Plan-execute on async vs defer on <script>

I've read the script-element pages on MDN and in the HTML Standard, plus the MDN pages for DOMContentLoaded and JavaScript modules. I'm writing up the answer now. The javascript.info URL from the plan returned a 404, so I haven't used it.

Answer

Default (neither attribute). A classic <script src> with neither attribute blocks the parser. The 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 and defer are both boolean attributes, so the presence of the attribute is what counts (same page).

async.

• Parsing: the script downloads in parallel with parsing. Per the spec, "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)." (https://html.spec.whatwg.org/multipage/scripting.html). Parsing is therefore interrupted only while the script runs, not while it downloads. That follows from the quoted sentence.
• DOMContentLoaded: there is no fixed relationship. MDN says DOMContentLoaded "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).
• Order: the spec keeps async scripts in a set of scripts that will execute as soon as possible, and each one runs when its own result is ready. In the processing algorithm the async branch runs the script when its result is ready and does not check other scripts. So there is no ordering guarantee. This is my reading of the algorithm, not a sentence the spec states.

defer.

• Parsing: the script downloads in parallel and waits. The spec says "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." (https://html.spec.whatwg.org/multipage/scripting.html).
• DOMContentLoaded: MDN says defer means the script runs "after the document has been parsed, but before firing DOMContentLoaded event". It adds 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). The DOMContentLoaded page agrees: the event "is queued after deferred scripts" (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).
• Order: "Scripts with the defer attribute will execute in the order in which they appear in the document." (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). The spec backs this up by appending each one to a list of scripts that will execute when the document has finished parsing (https://html.spec.whatwg.org/multipage/scripting.html).

Both attributes together. MDN says "If the attribute is specified with the defer attribute, the element will act as if only the async attribute is specified." (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). The spec says the combination is allowed so that legacy browsers that only support defer fall back to deferred behaviour instead of blocking (https://html.spec.whatwg.org/multipage/scripting.html).

Inline classic scripts (no src). async and defer do nothing. MDN's warning is that the 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). In the spec, an inline classic script is run at once: "Otherwise, immediately execute the script element el, even if other scripts are already executing." (https://html.spec.whatwg.org/multipage/scripting.html). That branch also covers an external script that has neither attribute and is ready.

type="module" scripts.

• Deferred by default: the spec says that without async, "the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing." It also says "(The defer attribute has no effect on module scripts.)" (https://html.spec.whatwg.org/multipage/scripting.html). MDN's modules guide agrees: "modules are deferred automatically." (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
• Order and DOMContentLoaded: modules without async go into the same list as deferred scripts. They run in document order, before DOMContentLoaded. MDN lists <script type="module"> alongside defer scripts that DOMContentLoaded waits for.
• async on modules: async does apply. The module and all its dependencies are fetched in parallel and run as soon as they are ready, potentially before parsing completes (https://html.spec.whatwg.org/multipage/scripting.html). MDN says the same (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).
• Inline modules: async and the module-specific behaviour still apply, because the spec's branch tests "el's type is "module"" and does not require src. An inline module is never run synchronously. The spec notes that "we won't proceed to execute the script element synchronously." So an inline module is deferred, or runs on arrival if it has async (https://html.spec.whatwg.org/multipage/scripting.html).

Where the sources differ. The spec says an async script may run "potentially before parsing completes", so it can run before DOMContentLoaded. MDN's DOMContentLoaded page is stricter in two places. One note says the event "is fired after the execution of these scripts, but before the execution of scripts with async." Elsewhere it says that for <script async> "by the time it executes, DOMContentLoaded has already fired." (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). I'd treat the spec as authoritative. The practical rule is that an async script may run before or after DOMContentLoaded, so check document.readyState before relying on the event.

Plan departure. The plan's javascript.info source was unavailable, so the DOMContentLoaded claims rest on MDN and the spec.

{"evidence": [
{"claim": "Classic script with neither attribute blocks parsing while 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": "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": "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 delay DOMContentLoaded until they have executed.", "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 preserve 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": "The spec keeps async scripts in an unordered set that executes as soon as possible.", "quote": "Each Document has a set of scripts that will execute as soon as possible, which is a set of script elements, initially empty.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "The spec keeps deferred (parser-inserted) scripts in a list executed after parsing.", "quote": "Each Document has a list of scripts that will execute when the document has finished parsing, which is a list of script elements, initially empty.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "DOMContentLoaded does not wait 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 says DOMContentLoaded fires before async scripts execute (stricter 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 and defer have no effect on inline scripts without src.", "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": "Inline classic scripts execute immediately.", "quote": "Otherwise, immediately execute the script element el, even if other scripts are already executing.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Module scripts are deferred unless async is present, and 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.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Modules are deferred automatically so defer is unnecessary.", "quote": "There is no need to use the defer attribute (see <script> attributes) when loading a module script; modules are deferred automatically.", "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"},
{"claim": "Inline module scripts are never executed synchronously.", "quote": "Queueing a task here means that, even if the inline module script has no dependencies or synchronously results in a parse error, we won't proceed to execute the script element synchronously.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "If both async and defer are given, async wins (MDN); spec says defer is a fallback for legacy browsers.", "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": "A script with async can run after DOMContentLoaded has already fired, per MDN.", "quote": "If it's included via <script async>, or it's dynamically injected, then by the time it executes, DOMContentLoaded has already fired.", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"}
]}