Orchestrator-workers on async vs defer on <script>

How async and defer work on <script>

The baseline: an external classic script with neither attribute

An external classic script with neither attribute blocks the parser. The WHATWG HTML standard 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). web.dev adds that rendering is blocked as well as parsing (https://web.dev/learn/performance/optimize-resource-loading).

defer on a classic external script

• Parsing: the script downloads in parallel with parsing and does not block it. It runs only after the document has finished parsing (https://html.spec.whatwg.org/multipage/scripting.html).
• Spec mechanism: a parser-inserted deferred script is added to the document's "list of scripts that will execute when the document has finished parsing." The same list also holds module scripts.
• DOMContentLoaded: deferred scripts run after parsing and before DOMContentLoaded fires. They also hold the event back until they have run. MDN and web.dev both say this (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script, https://web.dev/articles/efficiently-load-third-party-javascript).
• Caveat on the spec: the spec's parsing section ("the end"), which defines this step, returned HTTP 404 to my researcher. So the timing relative to DOMContentLoaded is supported by MDN and web.dev, not by the spec text itself.
• Order: several deferred scripts run in the order they appear in the document (MDN; web.dev).

async on a classic external script

• Parsing: the script downloads in parallel with parsing and runs as soon as it is available, "potentially before parsing completes" (https://html.spec.whatwg.org/multipage/scripting.html). If it finishes downloading while the parser is still working, running it interrupts DOM construction (https://web.dev/articles/efficiently-load-third-party-javascript).
• Spec mechanism: async scripts go into an unordered set of "scripts that will execute as soon as possible."
• Order: there is no ordering guarantee. MDN says "You get no guarantee that scripts will run in any specific order." web.dev says async scripts are likely to run out of document order.
• DOMContentLoaded: none of the sources ties async scripts to DOMContentLoaded. web.dev only guarantees that they run before the window's load event. My conclusion that an async script can run either before or after DOMContentLoaded is an inference from that missing guarantee, not a quoted statement.

Both attributes on the same script

If both are present, async wins. MDN says the element acts as if only async were specified. The spec explains why you would write both: defer lets legacy browsers that support only defer fall back to deferring instead of blocking (https://html.spec.whatwg.org/multipage/scripting.html).

One researcher, who was not allowed to open the spec, reported this fallback point as unsourced. Another researcher did open the spec and quoted it, so it is sourced.

Inline classic scripts (no src)

async and defer have no effect on inline classic scripts. MDN warns against using either attribute there. Inline classic scripts run immediately and block the parser (MDN; https://web.dev/learn/performance/optimize-resource-loading).

type="module" scripts

• Deferred by default: module scripts are deferred automatically, and web.dev says this applies to inline module scripts too. They do not block the parser (https://web.dev/learn/performance/optimize-resource-loading).
• defer does nothing: MDN says "The defer attribute has no effect on module scripts — they defer by default."
• async does change behaviour: with async, a module "and all their dependencies" are fetched in parallel to parsing and run as soon as they are available (MDN).
• Inline modules don't run synchronously: one researcher reported that the spec queues a task before running an inline module. They gave no quote for this, so I treat it as unverified.

Gaps and disagreements

Unconfirmed points. I could not confirm these with any opened source:

• that async specifically works on inline module scripts;
• that a module included several times runs only once.

The javascript.info and v8.dev pages that were meant to cover these returned 404.

Wording differences.

• web.dev's two pages: https://web.dev/learn/performance/optimize-resource-loading says deferred scripts run "at the same time as" DOMContentLoaded. The other web.dev article and MDN's attribute reference say "before". "Before" is the more precise statement.
• MDN's Examples section: it says defer scripts "load" in page order, which means execute. It also says they run once "everything has finished loading", which conflicts with MDN's own attribute section. I relied on the attribute section.

Script-inserted scripts. web.dev notes that scripts injected into the DOM with JavaScript behave like async scripts.

{"evidence": [
{"claim": "An external classic script with neither async nor defer is fetched and executed immediately, blocking parsing.", "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 and runs 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 (without async) is fetched in parallel and runs once 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": "The spec keeps a per-document list of scripts to run when parsing finishes (used for defer and module scripts).", "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": "Async scripts go into an unordered set executed 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": "Specifying defer together with async lets legacy browsers fall back to defer rather than blocking.", "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 run after parsing is completely finished but before DOMContentLoaded.", "quote": "Scripts with the defer attribute execute after HTML parsing is completely finished, but before the DOMContentLoaded event.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"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": "Multiple deferred scripts execute 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 give no ordering guarantee.", "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": "Async scripts run at the first opportunity after downloading and are only guaranteed to run before the window load event.", "quote": "Scripts with the async attribute execute at the first opportunity after they finish downloading and before the window's load event.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"claim": "Async scripts can interrupt DOM building if they finish downloading during parsing.", "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": "If both async and defer are present, the element behaves as async.", "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 has no effect on inline (no src) scripts.", "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 and attribute-less external classic scripts are executed immediately 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"},
{"claim": "Module scripts, including inline ones, are deferred automatically and do not block the parser.", "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"},
{"claim": "defer has no effect on module scripts because they defer 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": "async on a module script fetches it and its dependencies in parallel and runs it as soon as available.", "quote": "For module scripts, if the async attribute is present then the scripts and all their dependencies will be fetched in parallel to parsing and evaluated as soon as they are available.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "One web.dev page describes deferred scripts as running at the same time as DOMContentLoaded, looser wording than other sources.", "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": "Script-inserted scripts behave like async, while module scripts are deferred by default.", "quote": "Note: Scripts loaded using the type=\"module\" attribute are deferred by default, while scripts loaded by injecting <script> markup into the DOM with JavaScript behave like async scripts.", "url": "https://web.dev/learn/performance/optimize-resource-loading"}
]}