Orchestrator-workers on async vs defer on <script>

Short version

• A plain <script src> blocks the HTML parser while it is fetched and run.
• async and defer both make the fetch happen in parallel with parsing. They differ in when the script runs and in what order scripts run.
• defer runs scripts after parsing, in document order, before DOMContentLoaded.
• async runs each script as soon as it arrives, in no guaranteed order, and DOMContentLoaded does not wait for it.

Interaction with HTML parsing

• No attribute. The spec says the script "is fetched and evaluated immediately, blocking parsing until these are both complete."
• async on an external classic script. The script is fetched in parallel with parsing and evaluated as soon as it is available. This can happen before parsing completes, so an async script can interrupt parsing at the moment it executes.
• defer on an external classic script. The script is fetched in parallel and evaluated once the page has finished parsing, so it never interrupts the parser.

Timing relative to DOMContentLoaded

• defer. MDN says deferred scripts run after the document is parsed but before DOMContentLoaded fires. It also says the event is held back until they have loaded and finished evaluating.
• async. DOMContentLoaded does not wait for async scripts. An async script that downloads quickly can run before DOMContentLoaded, which follows from the spec's "potentially before parsing completes". One that downloads late runs after it. MDN's event page puts it this way for the late case: "DOMContentLoaded is fired after the execution of these scripts, but before the execution of scripts with async."
• Sourcing caveat. The DOMContentLoaded timing rests on MDN. The research workers could not open the spec's parsing section, which would define when the parser fires the event. The two sources describe async timing from different angles rather than contradicting each other.

Ordering with several scripts

• defer. Scripts run in document order. In the spec's processing model, parser-inserted deferred scripts go into a list that runs when parsing finishes.
• async. There is no order guarantee. Each script runs when its own download completes. MDN's example is that a library like jquery.js may load before or after the scripts that depend on it, so dependent code can break.
• Both attributes together. MDN says the element acts as if only async were specified. The spec says authors may add defer anyway so that legacy browsers that only support defer fall back to deferred behavior instead of blocking.
• Dynamically inserted scripts. web.dev says scripts injected into the DOM with JavaScript behave like async scripts. The spec's mechanism is a "force async" flag that starts true. Setting script.async = false clears it, and the workers read from the spec's steps that such scripts then run in order. No page stated that last point in plain language.

Inline scripts

• Classic inline scripts (no src).

  • MDN warns that async and defer must not be used without src and have no effect there.
  • The spec's algorithm only applies the async and defer branches to classic scripts with src, or to module scripts. A classic inline script is executed immediately and blocks the parser.
• MDN's wording is stronger than the spec's. The spec does not contain a sentence saying inline classic scripts ignore these attributes. It simply does not use them in that case.

type="module" scripts

• Default behavior.

  • Module scripts are deferred by default. They go into the same run-after-parsing, in-order list as defer scripts. They also hold up DOMContentLoaded the same way, according to MDN's event page, which lists modules alongside deferred scripts.
  • The spec's deferred-branch condition ("if el has a defer attribute or el's type is "module"") has no src requirement, so inline modules are deferred too. web.dev also says inline modules are deferred. No page the workers opened stated the inline-module case in so many words.
• defer attribute. It has no effect on modules.
• async on a module. The module and all its dependencies are fetched in parallel and evaluated as soon as they are available, possibly before parsing completes. The spec's attribute table allows async on inline modules too. For an inline module, the spec says a task is queued, so execution is never synchronous at the point the parser reaches the tag.

Practical rule

Use defer for scripts that need the DOM or depend on each other. Use async for independent scripts such as analytics, where order does not matter.

Gaps

• The javascript.info page returned 404, so it is not used.
• MDN says an executing async script "blocks the page from rendering". web.dev says async scripts "can interrupt DOM building". This was not checked against the spec and is not a core claim.

{"evidence": [
{"claim": "A classic external script with no attribute blocks parsing while it is fetched and run", "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 external scripts are fetched in parallel 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": "defer classic external 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": "defer scripts run after parsing and 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": "DOMContentLoaded waits for deferred scripts to load and finish evaluating", "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": "A late-arriving async script runs after DOMContentLoaded", "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": "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": "defer 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 have no execution-order 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": "If both async and defer 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": "Spec rationale for specifying both attributes: 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": "Dynamically injected scripts behave like async scripts", "quote": "scripts loaded by injecting <script> markup into the DOM with JavaScript behave like async scripts.", "url": "https://web.dev/learn/performance/optimize-resource-loading"},
{"claim": "Script elements have a force async flag that is initially true", "quote": "A script element has a force async boolean, initially true.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "async/defer have 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), 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 plain scripts run immediately, blocking parsing", "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": "The spec's async/defer branches apply only to classic scripts with src or 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": "Module scripts are deferred by default and go into the run-after-parsing list regardless of src", "quote": "Otherwise, if el has a defer attribute or el's type is \"module\":", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Without async, module scripts are fetched in parallel and evaluated after parsing", "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": "defer has no effect on module scripts", "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 runs it as soon as it and its 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 execution is always queued as a task, never synchronous", "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"}
]}