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

An async or defer attribute on a classic external script means the browser fetches it in parallel with HTML parsing. The two differ in when the script runs. defer runs it after parsing finishes and before DOMContentLoaded, in document order. async runs it as soon as it has downloaded, in no guaranteed order.

Parsing and execution timing

• async: The HTML Standard says "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) So it can interrupt the parser while it executes, but it never waits for parsing to finish.
• defer: The same page says the script "will be fetched in parallel and evaluated when the page has finished parsing." MDN adds that a deferred script is "meant to be executed after the document has been parsed, but before firing DOMContentLoaded event." (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script)
• With neither attribute, the script "is fetched and evaluated immediately, blocking parsing until these are both complete." (https://html.spec.whatwg.org/multipage/scripting.html)

Relation to DOMContentLoaded

• Deferred scripts hold the event back. MDN says they "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 confirms that the event "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)
• An async script can therefore run before or after the event. It runs before if it arrives while parsing is still going. It runs after if it arrives later. Code in an async script should check document.readyState before waiting for DOMContentLoaded.
• The sources differ slightly here. A note on the MDN event page says DOMContentLoaded "is fired after the execution of these scripts, but before the execution of scripts with async". That reads as if async scripts always come after. The spec text (async may run "potentially before parsing completes") and the same page's remark that an async script may run before or after the event show that the order is not fixed. I treat the order as a race that depends on network timing.

Order with several scripts

• defer: MDN says "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) In the spec's processing model, parser-inserted deferred scripts, and module scripts without async, are appended to a "list of scripts that will execute when the document has finished parsing". That is an ordered list.
• async: The processing model puts these scripts in a "set of scripts that will execute as soon as possible". Each one executes when its own result is ready. The spec states no ordering for that set, so whichever script finishes downloading first runs first. This is my reading of the data structure. I did not find an explicit "async is unordered" sentence in the pages I opened.
• If both attributes are present, async wins. MDN says "the element will act as if only the async attribute is specified." The spec says defer may be added alongside async so that legacy browsers without async support fall back to deferred behavior rather than blocking.
• Scripts added dynamically (not parser-inserted) go into a separate "list of scripts that will execute in order as soon as possible" unless they have async. The spec's "force async" flag makes parser-inserted scripts that failed to run behave as async if they are later executed.

Inline classic scripts

• Both attributes do nothing here. MDN warns that each "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)
• The spec only runs the async/defer branches for a classic script with src, or for a module. Otherwise it will "immediately execute the script element el, even if other scripts are already executing." (https://html.spec.whatwg.org/multipage/scripting.html)

type="module" scripts

• Modules are 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. (The defer attribute has no effect on module scripts.)" (https://html.spec.whatwg.org/multipage/scripting.html) MDN agrees: "The defer attribute has no effect on module scripts — they defer by default."
• With async, the module and all its dependencies are fetched in parallel, and it is "evaluated as soon as it is available (potentially before parsing completes)". It then has the same unordered, race-with-DOMContentLoaded behavior as an async classic script.
• Inline modules differ from inline classic scripts. The spec's processing model sends every module through the async/defer branches, including inline ones. The spec's inline module example says such a script "will not be evaluated until both document parsing has complete and its dependency (dom-utils.mjs) has been fetched and evaluated." So an inline module is deferred. With async it runs once its imports are ready.
• Deferred and module scripts both count toward DOMContentLoaded. MDN says the event waits for "all deferred scripts (<script defer src="…"> and <script type="module">)".

Sources

• The cited MDN script page, MDN DOMContentLoaded page and spec section were all opened and read.
• I could not open the javascript.info page (404). I did not use the web.dev search results, since I never opened them.

{"evidence": [
{"claim": "async classic scripts are fetched in parallel with parsing 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 run after parsing finishes; with neither attribute the script blocks parsing", "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. 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": "defer scripts execute 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 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": "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": "async scripts can run after DOMContentLoaded has already fired, so readyState should be checked", "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"},
{"claim": "defer scripts keep 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 go in an unordered set that runs scripts as soon as they are ready", "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": "deferred and module (non-async) parser-inserted scripts go in a list executed when parsing finishes", "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": "if both async and defer are present, async behavior 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 has no effect on inline classic scripts", "quote": "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 without src 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 by default 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. (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 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": "inline module scripts wait for parsing to finish and for their dependencies", "quote": "Also note that no matter where this script element appears in the document, it will not be evaluated until both document parsing has complete and its dependency (dom-utils.mjs) has been fetched and evaluated.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "DOMContentLoaded waits for deferred and module 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.", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"},
{"claim": "MDN's note says DOMContentLoaded fires before async script execution, which sits uneasily with 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": "defer may accompany async so legacy browsers fall back to defer behavior", "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"}
]}