Single on async vs defer on <script>

Now I have comprehensive information from multiple authoritative sources. Let me write a complete answer.

Answer

The async and defer attributes on HTML <script> elements control when external JavaScript files are downloaded and executed relative to HTML parsing and the DOMContentLoaded event.

The async Attribute

When the async attribute is present on an external classic script, the browser downloads the script in parallel with HTML parsing—parsing does not block while the script downloads. However, once the download completes, the script immediately executes, which blocks both HTML parsing and rendering until execution finishes. The key trade-off is that async scripts execute as soon as they're available, not necessarily in the order they appear in the HTML. If multiple scripts have the async attribute, there is no guarantee about their execution order. Additionally, async scripts can interrupt DOM building if they finish downloading while the parser is still processing HTML. The async attribute must not be used on inline scripts (without a src attribute) for classic scripts, as it would have no effect.

The defer Attribute

The defer attribute causes external classic scripts to download in parallel with HTML parsing, but delays their execution until after the HTML document has been completely parsed. Crucially, deferred scripts execute in the order they appear in the markup. Multiple deferred scripts will execute in sequence, in the order specified in the HTML. Deferred scripts execute just before the DOMContentLoaded event fires, and they prevent DOMContentLoaded from firing until all deferred scripts have loaded and executed. Like async, the defer attribute has no effect on inline scripts.

Interaction with HTML Parsing

Classic scripts without either attribute block HTML parsing immediately—the browser must download, parse, and execute the script before continuing to parse the remaining HTML. Both async and defer eliminate this parser-blocking behavior for the download phase. With async, parsing continues during download but resumes blocking during execution. With defer, parsing continues uninterrupted during both download and execution phases (execution happens later). The HTML parser completes normally regardless of async or defer attributes, but synchronous inline scripts and classic scripts without these attributes will still block the parser.

Relationship to DOMContentLoaded

The DOMContentLoaded event fires when the HTML document has been completely parsed and all deferred scripts and module scripts have been downloaded and executed. Deferred scripts execute before DOMContentLoaded fires, ensuring that any code in those scripts runs before DOMContentLoaded listeners are triggered. However, async scripts may execute after DOMContentLoaded has already fired—the event does not wait for async scripts. The document's readyState property is set to "interactive" after HTML parsing completes but before deferred/module scripts execute, and it's set to "complete" after async scripts execute.

Execution Order with Multiple Scripts

When you have multiple external scripts, the execution order guarantees differ significantly. Deferred scripts maintain execution order: if you have three deferred scripts in sequence in the HTML, they will execute in that same sequence. Async scripts offer no such guarantee—if you have three async scripts, they may execute in any order depending on which finishes downloading first. This is a critical distinction: if your scripts have dependencies (one script uses a function defined in another), you must use defer to ensure correct execution order, or place dependent scripts after their dependencies in the HTML.

Inline Scripts and Module Scripts

Inline scripts (scripts without a src attribute) do not support the async or defer attributes; these attributes are ignored for inline classic scripts. Inline scripts are executed immediately when encountered during parsing, blocking further parsing. However, inline module scripts (with type="module" but no src attribute) are deferred by default, meaning they execute after HTML parsing completes.

Module scripts (type="module") behave differently from classic scripts. External module scripts are deferred by default—they execute after HTML parsing completes, in the order they appear, without needing the defer attribute. The defer attribute has no effect on module scripts since they already defer by default. If you add the async attribute to an external module script, the script and all its dependencies will fetch in parallel, and the module will execute as soon as it's available (like async classic scripts), potentially out of order relative to other module scripts. When module scripts are dynamically injected into the DOM via JavaScript, they behave like async scripts rather than deferred scripts.

{"evidence": [
  {
    "claim": "The async attribute causes external classic scripts to be fetched in parallel to parsing and evaluated as soon as they are available, potentially 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": "The async attribute must not be used on inline scripts as it would have no effect",
    "quote": "Warning: 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": "The defer attribute causes scripts to execute after the document has been parsed but before the DOMContentLoaded event",
    "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 execute in the order they appear in the document",
    "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 can interrupt DOM building if they finish downloading while the parser is still at work",
    "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 do not execute in a guaranteed order when there are multiple scripts",
    "quote": "Scripts with the async attribute execute at the first opportunity after they finish downloading and before the window's load event. This means it's possible (and likely) that async scripts won't run in the order in which they appear in the HTML.",
    "url": "https://web.dev/articles/efficiently-load-third-party-javascript"
  },
  {
    "claim": "DOMContentLoaded fires after deferred scripts execute but before async scripts execute",
    "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": "Module scripts are deferred by default and the defer attribute 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": "Module scripts with async attribute fetch and execute like async classic scripts",
    "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": "Module scripts without async execute in order after HTML parsing completes",
    "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": "Module scripts are deferred automatically and scripts without async or defer are parser-blocking",
    "quote": "async and defer allow external scripts to load without blocking the HTML parser while scripts (including inline scripts) with type=\"module\" are deferred automatically.",
    "url": "https://web.dev/learn/performance/optimize-resource-loading"
  },
  {
    "claim": "Inline scripts without type=\"module\" block the parser until parsed and executed",
    "quote": "When using inline JavaScript, the parser is similarly blocked until the inline script is parsed and executed.",
    "url": "https://web.dev/learn/performance/optimize-resource-loading"
  },
  {
    "claim": "When both async and defer are specified, the element acts as if only async is specified",
    "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"
  }
]}