Propose-select on async vs defer on <script>

What async and defer do on <script>

Default (no attribute). A plain external classic script stops the HTML parser. The browser fetches the script and runs it before it parses any more HTML. In the spec's words: "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)

defer (external classic scripts).

• Parsing: the script downloads while parsing continues, and runs only once the whole document has been parsed (https://html.spec.whatwg.org/multipage/scripting.html).
• DOMContentLoaded: deferred scripts run before DOMContentLoaded fires, and the event waits until they have finished (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).
• Order: several deferred scripts run in the order they appear in the document (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). In the spec, each one is added to a per-document list of scripts that run once parsing is finished (https://html.spec.whatwg.org/multipage/scripting.html).

async (external classic scripts).

• Parsing: the script also downloads while parsing continues, but it runs as soon as it arrives, "potentially before parsing completes" (https://html.spec.whatwg.org/multipage/scripting.html). If it arrives mid-parse, parsing pauses while it runs (https://web.dev/articles/efficiently-load-third-party-javascript).
• Order: not guaranteed. Async scripts run in whatever order they finish downloading (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). The spec keeps them in an unordered "set of scripts that will execute as soon as possible" (https://html.spec.whatwg.org/multipage/scripting.html).

Async and 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 before or after the event, depending on when it finishes downloading. Async scripts do always run before the window's load event (https://web.dev/articles/efficiently-load-third-party-javascript).

Where the sources disagree.

• A note on MDN's DOMContentLoaded page says the event "is fired after the execution of these scripts, but before the execution of scripts with async" (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).
• The spec (https://html.spec.whatwg.org/multipage/scripting.html) and web.dev (https://web.dev/articles/efficiently-load-third-party-javascript) say an async script can run before parsing completes, which would be before DOMContentLoaded.
• The two fit together if MDN's note is read as covering only async scripts still downloading when parsing ends. The safe rule is that nothing guarantees whether an async script runs before or after DOMContentLoaded.

Both attributes. If both are present, async wins (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script). The spec allows writing both so that old browsers that only understand defer fall back to deferring instead of blocking (https://html.spec.whatwg.org/multipage/scripting.html).

Inline classic scripts.

• Without src, async and defer do nothing. MDN says neither attribute should be used there (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).
• In the spec's processing steps, the async/defer logic only applies to classic scripts with src or to module scripts. Any other script is run immediately during parsing (https://html.spec.whatwg.org/multipage/scripting.html).

type="module" scripts.

• Deferred by default: defer has no effect on modules (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script).
• Without async: a module and all its imports download while parsing continues and run after parsing finishes (https://html.spec.whatwg.org/multipage/scripting.html). Parser-inserted modules go into the same ordered after-parsing list as classic defer scripts, so they run in document order with them, before DOMContentLoaded (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).
• With async: the module and its imports download in parallel, and the module runs as soon as everything is ready, possibly before parsing completes, with no ordering guarantee (https://html.spec.whatwg.org/multipage/scripting.html).
• Inline modules: unlike inline classic scripts, they follow these same rules, so async matters on an inline module. Even an inline module with no imports never runs synchronously in the middle of parsing, because the spec queues a task before running it (https://html.spec.whatwg.org/multipage/scripting.html).

{"evidence": [
{"claim": "Without async or defer, an external classic script 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": "An async classic script is fetched in parallel with parsing 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 defer classic script 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": "Deferred scripts hold back 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": "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": "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": "In the spec, async scripts go into an unordered set of scripts that run as soon as possible.", "quote": "Let scripts be el's preparation-time document's set of scripts that will execute as soon as possible.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Async scripts run as soon as they are downloaded and 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 construction 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": "DOMContentLoaded waits for parsing plus 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": "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": "An MDN note says async scripts run after DOMContentLoaded, which is stronger than 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, 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": "Writing both attributes gives old browsers that only support defer a fallback.", "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": "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": "async has no effect on inline classic scripts.", "quote": "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": "Inline classic scripts run immediately during 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 handling applies only to external classic scripts and to module scripts, inline or external.", "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": "Other scripts, such as inline classic ones, are executed 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"},
{"claim": "Modules defer by default, and defer has no effect on them.", "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 modules and their dependencies are fetched in parallel and the module runs as soon as it is 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": "Non-async modules and their dependencies are fetched in parallel and run after parsing finishes.", "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": "Deferred classic scripts and non-async modules go into the same ordered list that runs after parsing.", "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": "Inline modules 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"}
]}