Propose-select on async vs defer on <script>

Here's how async and defer work. I relied mainly on the WHATWG HTML Standard's scripting section and checked it against MDN and web.dev.

What happens with no attribute. A plain external <script src> stops the parser. The spec 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). An inline classic <script>…</script> also runs right away during parsing. MDN says such scripts "are fetched and executed immediately before the browser continues to parse the page" (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).

async (classic script with src). The browser downloads the script while it keeps parsing, then runs it as soon as the download finishes. That can happen before parsing is done, so running it can briefly pause the parser. 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).

• Order: none is guaranteed. MDN says "You get no guarantee that scripts will run in any specific order." The spec keeps these scripts in an unordered "set of scripts that will execute as soon as possible."
• DOMContentLoaded: the event doesn't wait for async scripts (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event). An async script can run before or after the event.
• The sources disagree here. A note on MDN's DOMContentLoaded page says the event fires "before the execution of scripts with async." The spec says an async script is evaluated "as soon as it is available (potentially before parsing completes)", which can be before DOMContentLoaded. web.dev only promises async scripts run before the window's load event. I'd follow the spec: don't assume either order.

defer (classic script with src). The script also downloads while parsing continues, but it runs only after parsing has finished and before DOMContentLoaded fires (MDN's <script> page; web.dev).

• Order: deferred scripts run in the order they appear in the document. In the spec they go into an ordered "list of scripts that will execute when the document has finished parsing."
• DOMContentLoaded: MDN says deferred scripts "will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating."
• Wording conflict: a summary elsewhere on MDN's <script> page says deferred scripts run "once everything has finished loading," which sounds like the load event. The spec, MDN's attribute definition and web.dev all say "after parsing, before DOMContentLoaded," so that's the accurate version.

Both attributes together. async wins. MDN says the element "will act as if only the async attribute is specified". The spec explains that authors add both so that old browsers which only support defer fall back to deferring instead of blocking.

Inline classic scripts. async and defer do nothing on them. MDN warns they must not be used when src is absent, because "it would have no effect". In the spec's processing steps, the async/defer queues apply only to classic scripts that have a src, and to module scripts. Any other script falls through to "immediately execute the script element".

type="module" scripts.

• Deferred by default. The defer attribute has no effect on them. Without async, a module and all its imports download while parsing continues, and the module runs after parsing ends. It joins the same ordered list as defer scripts, so modules keep document order and run before DOMContentLoaded. MDN's DOMContentLoaded page counts <script type="module"> among the deferred scripts the event waits for.
• With async: the module runs as soon as it and all its dependencies have loaded. There's no ordering guarantee, and it may run before parsing finishes.
• Inline modules: unlike classic scripts, async does work on inline modules (the spec's attribute table allows it). An inline module never runs synchronously during parsing, even if it has no imports.

Scripts added from JavaScript. Scripts inserted by other scripts behave as async by default. If you turn that flag off, they run in insertion order, using the spec's "list of scripts that will execute in order as soon as possible".

One gap: the spec's parsing chapter returned a 404, so the claim that deferred scripts run before DOMContentLoaded rests on MDN and web.dev, not the spec's own steps.

{"evidence": [
{"claim": "A classic external script with neither attribute is fetched and run immediately and blocks 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 downloads while parsing continues and runs as soon as it is available, possibly before parsing finishes.", "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 deferred classic script downloads in parallel and runs when 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": "Async scripts can interrupt 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": "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": "Deferred 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": "Deferred scripts hold DOMContentLoaded back until they finish.", "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": "Deferred scripts run 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": "web.dev agrees that defer runs after parsing, 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": "DOMContentLoaded waits for deferred and module scripts but not async ones.", "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 DOMContentLoaded page says async scripts run after the event, which conflicts 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": "If both attributes 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": "Authors add defer next to async as a fallback for old 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": "defer 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), 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 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": "Module scripts without async are deferred, and the defer attribute 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 load with all their dependencies in parallel and may run before parsing finishes.", "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 never run synchronously during parsing.", "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"},
{"claim": "Deferred scripts and non-async modules go into an 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": "Scripts without src that aren't modules run 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"}
]}