Orchestrator-workers on async vs defer on <script>

How async and defer work on <script>

The default case: no attribute

A classic <script src="…"> with neither attribute stops the parser. The browser fetches and runs the script, and only then continues parsing the page. The WHATWG spec says such a script is "fetched and evaluated immediately, blocking parsing until these are both complete" (https://html.spec.whatwg.org/multipage/scripting.html). web.dev says the same, adding that rendering is blocked too (https://web.dev/learn/performance/optimize-resource-loading). Because the parser waits for these scripts, they always run before DOMContentLoaded (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).

async on a classic external script

Parsing. The script downloads while parsing continues. The spec says it is evaluated "as soon as it is available (potentially before parsing completes)" (https://html.spec.whatwg.org/multipage/scripting.html). So an async script does not block parsing while it downloads. If it finishes downloading while the parser is still working, it interrupts the parser to run (https://web.dev/articles/efficiently-load-third-party-javascript).

Timing relative to DOMContentLoaded. DOMContentLoaded does not wait for async scripts (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). An async script can therefore run either before or after the event, depending on when it finishes downloading. The sources do not fully agree on this:

• One sentence on MDN's DOMContentLoaded page says the event fires "before the execution of scripts with async".
• Elsewhere on that same page, MDN treats <script async> as something that may run after DOMContentLoaded.
• web.dev and the spec both say an async script can run while parsing is still under way. Since DOMContentLoaded comes after parsing ends, that would put the script before the event.

My reading is that "before or after" is correct and that MDN's one-line note oversimplifies. That is an inference. None of the workers could confirm it from the spec's end-of-parsing steps, because https://html.spec.whatwg.org/multipage/parsing.html returned HTTP 404.

Order. There is no ordering guarantee. In the spec, async scripts go into an unordered "set of scripts that will execute as soon as possible", and each runs when its own download is ready. In practice, whichever script loads first runs first. web.dev calls out-of-order execution "possible (and likely)".

defer on a classic external script

Parsing. The script is fetched in parallel with parsing and never blocks the parser. The spec says it is evaluated "when the page has finished parsing" (https://html.spec.whatwg.org/multipage/scripting.html).

Timing relative to DOMContentLoaded. Deferred scripts run after parsing finishes but before DOMContentLoaded, and the event waits for them. MDN describes the order this way:

• document.readyState becomes "interactive".
• The deferred scripts run.
• DOMContentLoaded fires.

Deferred scripts also wait for stylesheets (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). One web.dev page loosely says this happens "at the same time as" DOMContentLoaded. A second web.dev page, and MDN, say "before", which is the more precise wording.

Order. Deferred scripts run in document order (MDN, web.dev). The spec appends each parser-inserted deferred script to the end of a list that runs once parsing finishes. The text the worker read did not state the run order in so many words, so for the spec this is a reasonable inference rather than a confirmed quote.

Both attributes on one script

async wins: the script behaves as if only async were set. defer is only there so that old browsers which support defer but not async use deferred loading instead of blocking (spec, MDN).

Inline scripts (no src)

For classic inline scripts, async and defer have no effect. The spec only applies the async/defer branching when the script is classic with a src attribute, or is a module script. MDN warns against using either attribute on inline classic scripts for this reason. An inline classic script runs immediately and blocks the parser (MDN, web.dev).

type="module" scripts

Deferred by default. Module scripts behave like deferred scripts even without the attribute, so adding defer changes nothing. The spec says "The defer attribute has no effect on module scripts", and MDN says the same. According to web.dev, automatic deferral applies to inline module scripts as well.

Timing. DOMContentLoaded waits for non-async module scripts in the same way it waits for defer scripts (MDN).

With async. Adding async changes how a module script runs. The script and all its dependencies are fetched in parallel with parsing, and the module runs as soon as everything is available, with no ordering guarantee.

Two points the workers did not confirm directly:

• No source they opened explicitly says that non-async modules keep document order. That conclusion combines two MDN statements: modules "defer by default", and deferred scripts run in document order.
• No source explicitly says that async works on inline module scripts. MDN limits its "no effect on inline scripts" warning to classic scripts, which implies it does work, and the spec's branching includes all module scripts.

Gaps in the research

• The spec's parsing page and the javascript.info articles both returned 404, so they are not cited.

{"evidence": [
{"claim": "A classic external async script is fetched in parallel with parsing and runs as soon as it is available, possibly before parsing ends; a defer script is fetched in parallel and runs after parsing finishes; with neither attribute, fetching and running blocks parsing.", "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). 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": "Scripts without async/defer block parsing and rendering until downloaded, parsed and executed; inline scripts block the parser too.", "quote": "When loading <script> elements without the defer or async attributes, the browser blocks parsing and rendering until the script is downloaded, parsed, and executed. Similarly, inline scripts block the parser until the script is parsed and executed.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "Synchronous scripts in the initial markup always run before DOMContentLoaded.", "quote": "The document waits for the script to execute before firing DOMContentLoaded, so you are always sure that setup logic in the listener will be executed.", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"},
{"claim": "DOMContentLoaded waits for parsing plus 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": "An async script that finishes downloading during parsing interrupts DOM building.", "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": "MDN's note says DOMContentLoaded fires before async scripts run, which is in tension with the other sources.", "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": "An async script may run after DOMContentLoaded has already fired.", "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": "In the spec, async scripts go into an unordered set of scripts that run 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": "Async scripts are likely to run out of document order.", "quote": "This means it's possible (and likely) that async scripts won't run in the order in which they appear in the HTML.", "url": "https://web.dev/articles/efficiently-load-third-party-javascript"},
{"claim": "Parser-inserted deferred scripts are appended to a list run once parsing finishes.", "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": "Deferred scripts run after parsing and 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": "A second web.dev page loosely says defer runs at the same time as DOMContentLoaded.", "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": "Deferred scripts wait for stylesheets, and DOMContentLoaded is queued after them.", "quote": "DOMContentLoaded does not wait for stylesheets to load, however deferred scripts do wait for stylesheets, and the DOMContentLoaded event is queued after deferred scripts.", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"},
{"claim": "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 may run out of order while defer runs in markup order.", "quote": "Additionally, async scripts may execute out-of-order, while defer scripts are executed in the order in which they appear in the markup.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "With both attributes, async wins; defer is a fallback for legacy browsers.", "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": "MDN confirms async takes precedence when both are set.", "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": "The spec applies the async/defer branching only to classic scripts with src and to module scripts.", "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": "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": "defer has no effect on inline 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 non-module scripts run 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": "defer has no effect on module scripts.", "quote": "(The defer attribute has no effect on module scripts.)", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Module scripts 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": "Automatic deferral applies to inline module scripts too.", "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": "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": "async scripts carry 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"}
]}