Propose-select on async vs defer on <script>

Short answer. async and defer both let the browser fetch an external script while it keeps parsing the HTML. They differ in when the script runs and whether order is kept. An async script runs as soon as it has downloaded, in no guaranteed order, possibly before parsing finishes. A defer script runs after parsing finishes and before DOMContentLoaded, in document order.

Plain classic external script (no attribute). 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)

async on a classic external script

• Parsing: The script is fetched in parallel with parsing and evaluated "as soon as it is available (potentially before parsing completes)". Download never blocks the parser, but execution interrupts it if the parser is still running. MDN adds that a running async script "blocks the page from rendering".
• DOMContentLoaded: There is no fixed relationship. The spec puts async scripts in a "set of scripts that will execute as soon as possible". The event does not wait for them: MDN says it "doesn't wait for other things like images, subframes, and async scripts to finish loading". An async script can therefore run before the event (fast download) or after it (slow download). Code inside an async script should check document.readyState instead of assuming the event is still pending. MDN's note that the event fires "before the execution of scripts with async" describes the typical sequence, not a guarantee. The spec's "potentially before parsing completes" is broader, so I treat the spec as authoritative.
• Order: None is guaranteed. MDN says "You get no guarantee that scripts will run in any specific order." Each async script runs when its own download finishes, so async suits independent scripts such as analytics.

defer on a classic external script

• Parsing: The script is fetched in parallel and "evaluated when the page has finished parsing". In the spec's algorithm it is appended to the document's "list of scripts that will execute when the document has finished parsing".
• DOMContentLoaded: Deferred scripts run after parsing and before the event, and the event waits for them. document.readyState is "interactive" while they run.
• Order: Deferred scripts run in document order, whichever download finishes first. Use defer when scripts depend on each other or on the DOM.

Both attributes together. MDN says the element acts as if only async were set. The spec allows defer alongside async so that legacy browsers that only know defer fall back to deferring instead of blocking.

Inline classic scripts. async and defer have no effect on them. MDN says the attributes must not be used without src, and that in that case they "would have no effect". An inline classic script runs immediately and blocks the parser. In the spec's algorithm, only a classic script with src, or a module script, takes the async or defer path.

type="module" scripts

• Default timing: Module scripts are deferred by default. The module and its dependencies are fetched in parallel with parsing and evaluated when parsing finishes. They share the deferred list, so they run in document order and before DOMContentLoaded. The defer attribute has no effect on them, and MDN's modules guide says it is unnecessary.
• With async: async does apply to modules. The module and all its dependencies run as soon as they are available, possibly before parsing completes, in no guaranteed order.
• Inline modules: Unlike inline classic scripts, inline modules also follow the defer or async behaviour. async is allowed on them; defer is not. The spec queues a task, so an inline module never runs synchronously in the middle of parsing.
• CORS: Cross-origin module fetches require CORS, unlike classic scripts.

{"evidence": [
{"claim": "Per the spec, a classic external script with neither async nor defer is fetched and run immediately, blocking the parser.", "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 and runs as soon as it is 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": "A defer classic script is fetched in parallel but evaluated once the page has finished parsing.", "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": "Module scripts are deferred by default, and 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": "Deferred scripts execute after parsing but before DOMContentLoaded, and they hold up 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": "Deferred scripts keep 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 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"},
{"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 async script may run after DOMContentLoaded has already fired, so code should check readyState.", "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": "MDN describes the typical sequence: deferred and module scripts, then DOMContentLoaded, then async scripts. This is narrower 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": "async and defer have 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 and block the parser.", "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": "If both async and defer are given, 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": "The spec allows defer alongside async as 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": "In the spec's algorithm, deferred classic scripts and module scripts share the list that runs when parsing finishes.", "quote": "Otherwise, if el has a defer attribute or el's type is \"module\":", "url": "https://html.spec.whatwg.org/multipage/scripting.html"},
{"claim": "Modules are deferred automatically, so defer is unnecessary on them.", "quote": "There is no need to use the defer attribute (see <script> attributes) when loading a module script; modules are deferred automatically.", "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"},
{"claim": "Inline module scripts never execute synchronously with parsing, because a task is queued.", "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": "Module scripts use CORS for cross-origin fetching, unlike classic scripts.", "quote": "Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.", "url": "https://html.spec.whatwg.org/multipage/scripting.html"}
]}