Single on async vs defer on <script>

async and defer both make an external script download in parallel with HTML parsing. They differ in when the script runs and in whether several scripts keep their order.

Classic external scripts (<script src>)

• Neither attribute. The script is fetched and run immediately, and parsing stops until both are done. The spec says so, and MDN says the same: "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."
• async. The script is fetched in parallel and runs as soon as it arrives, which can be before parsing finishes. If it arrives mid-parse, it interrupts the parser while it runs.
• defer. The script is fetched in parallel but runs only after the document has finished parsing.
• Both together. MDN says the element acts as if only async is set. The spec says authors may write both so that legacy browsers that only know defer fall back to deferred behaviour instead of blocking.

Timing relative to DOMContentLoaded

• defer. Deferred scripts run after parsing finishes and before DOMContentLoaded fires. MDN adds that a deferred script holds DOMContentLoaded back until it has loaded and finished running. While deferred and module scripts run, document.readyState is "interactive".
• async. There is no fixed relationship. An async script runs whenever its download completes, which can be during parsing, before DOMContentLoaded, or after it.
• A source disagreement. MDN's DOMContentLoaded page says the event fires "before the execution of scripts with async". That is a simplification. MDN's own <script> page and the spec say async scripts can run before parsing completes. I would not rely on async scripts running after DOMContentLoaded.

Order with several scripts

• async. There is no ordering guarantee. In the spec's processing model, each async script is added to a set and runs as soon as its own result is ready. MDN's example is three async scripts where jquery.js may load before or after the other two, so dependent code can fail.
• defer. Deferred scripts run in document order. The spec puts them in a list that is processed when parsing finishes. MDN says "Scripts with the defer attribute will execute in the order in which they appear in the document."

Inline scripts

• Classic inline scripts. For classic scripts, async and defer do nothing without src. MDN warns that without src they have "no effect". In the spec's algorithm, the async and defer branches apply only to classic scripts that have a src, or to module scripts. An inline classic script runs immediately, blocking the parser.
• Inline module scripts. async does apply to these, and the spec's algorithm treats them like external modules. I did not find a source that discusses defer on inline modules specifically, but the spec says defer has no effect on any module script.

type="module"

• Default timing. Module scripts are deferred by default. The spec says that, without async, the module and its dependencies are fetched in parallel and "evaluated when the page has finished parsing". Their place in the order is the same as for defer.
• defer attribute. It has no effect on module scripts, according to both the spec and MDN.
• async on modules. The module and all its dependencies are fetched in parallel, and it runs as soon as they are ready. Like classic async, this has no order guarantee and can happen before parsing completes.
• Fetching. Cross-origin module scripts must use CORS.

Sources: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script, https://html.spec.whatwg.org/multipage/scripting.html and https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event.

{"evidence": [
{"claim": "Classic external async scripts are fetched in parallel and run as soon as available, possibly before parsing completes; defer scripts run when parsing is finished; with neither, parsing blocks.", "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": "With defer (and no async), the classic script is fetched in parallel and evaluated after parsing; with neither attribute it blocks 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. 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": "Module scripts are deferred by default, and defer has no effect on them; async makes them run as soon as available.", "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": "Specifying both async and defer is allowed so legacy browsers fall back to defer behavior.", "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": "Deferred scripts run before DOMContentLoaded and delay that event until they finish; they run in document order.", "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 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": "Async and defer have no effect on classic inline scripts (no src).", "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": "Defer has no effect on module scripts, which defer by default.", "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": "Module scripts with async and all their dependencies are fetched in parallel and evaluated as soon as available.", "quote": "For module scripts, if the async attribute is present then the scripts and all their dependencies will be fetched in parallel to parsing and evaluated as soon as they are available.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"},
{"claim": "Plain classic scripts and inline non-module 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": "In the spec algorithm, async scripts go into a set that executes as soon as possible, while defer/module scripts go into a list run 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": "MDN's DOMContentLoaded page states deferred/module scripts run before DOMContentLoaded and async scripts after it (a simplification versus the script page).", "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"}
]}