Gated-execute on async vs defer on <script>

async and defer both let the browser download an external classic script without pausing the HTML parser. They differ in when the script runs. A defer script runs after parsing finishes, in document order, and before DOMContentLoaded. An async script runs as soon as it has downloaded, in no guaranteed order, and its timing relative to DOMContentLoaded is not fixed.

A plain classic script (no attributes). With <script src> and neither attribute, "the script is fetched and evaluated immediately, blocking parsing until these are both complete" (https://html.spec.whatwg.org/multipage/scripting.html).

async (classic, with src)

• Parsing: The script is "fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes)" (spec). The download doesn't block the parser, but running the script can. web.dev says async scripts "can interrupt DOM building if they finish downloading while the parser is still at work" (https://web.dev/articles/efficiently-load-third-party-javascript).

• DOMContentLoaded: That event "doesn't wait for … async scripts" (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). So an async script may run before or after the event. The same MDN page lists <script async> as a case where your code may run after DOMContentLoaded has already fired. web.dev only promises that async scripts run "before the window's load event."

  • Conflicting sources: a note on that same MDN page says DOMContentLoaded fires "before the execution of scripts with async." The spec's "potentially before parsing completes" contradicts that as a general rule. The safe reading is that the order isn't guaranteed either way.
• Order: None is guaranteed. In the spec's algorithm, an async script goes into a set of "scripts that will execute as soon as possible," and each one runs whenever its fetch finishes. MDN says: "You get no guarantee that scripts will run in any specific order" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

defer (classic, with src)

• Parsing: The script is "fetched in parallel and evaluated when the page has finished parsing" (spec), so it never blocks the parser.
• DOMContentLoaded: It runs after parsing but before the event, and the event waits for it to load and finish running (MDN script page). MDN's event page adds that deferred scripts wait for stylesheets, and the event is queued after them.
• Order: Defer scripts go into an ordered list of scripts that run once the document has finished parsing. They run in the order they appear in the document (spec algorithm; MDN).
• Both attributes at once: async wins. The spec allows writing both so that old browsers that only understand defer fall back to it instead of blocking.

Inline classic scripts. For a script with no src, async and defer aren't allowed and do nothing. The spec's attribute table marks both as invalid for inline classic scripts. Its algorithm treats them specially only when the script "has a src attribute"; any other inline classic script runs immediately and blocks the parser. MDN says the same.

type="module" scripts

• Default behaviour: A module script with no async acts like a deferred script. It and its imports are fetched in parallel with parsing, and it runs once parsing has finished. It goes into the same ordered list as defer scripts, so it keeps document order and runs before DOMContentLoaded (MDN event page).
• defer: "The defer attribute has no effect on module scripts" (spec).
• async: The module "and all its dependencies" are fetched in parallel and run "as soon as it is available," with no ordering guarantee.
• Inline modules: Unlike inline classic scripts, inline modules accept async, and the spec's table allows it. Without async, an inline module is also deferred until parsing ends.

Scripts added by JavaScript. Scripts inserted dynamically, rather than by the parser, behave as async by default (the spec's "force async" flag).

{"evidence": [
{"claim": "Without async/defer, an external classic script blocks parsing while it is fetched and evaluated; async fetches in parallel and evaluates as soon as available, possibly before parsing completes; defer fetches in parallel and evaluates after 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": "async classic scripts may execute 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": "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": "async scripts are guaranteed only to run before the window load event, and may run out of order.", "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 have no guaranteed execution order.", "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": "DOMContentLoaded waits for deferred and module scripts but not 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": "An MDN note says DOMContentLoaded fires before async scripts execute, which conflicts with the spec's statement that async scripts may run 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 scripts execute after parsing, before DOMContentLoaded, and delay that event.", "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": "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": "If both async and defer are present, the element behaves as async only.", "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": "Specifying defer alongside async is a fallback for legacy browsers that only support 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": "async and 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 attribute-less scripts execute 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 are deferred by default; async makes them run as soon as available; 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": "With async, a module script and all its dependencies are fetched in parallel and evaluated as soon as 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": "DOMContentLoaded waits for both defer scripts and module scripts to download and execute.", "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": "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": "Defer scripts and non-async module scripts share one ordered list that runs 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": "Async scripts are held in an unordered set and run as soon as each is 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": "async scripts 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"}
]}