Plan-execute on async vs defer on <script>

Now let me compile the comprehensive answer with all the key information I've gathered.

Answer

The async and defer attributes on HTML <script> elements control how external scripts are fetched and executed relative to HTML parsing and DOM readiness. They address a fundamental tension in web loading: scripts can modify the DOM and need to execute at precise times, but blocking HTML parsing for script downloads/execution degrades page performance.

What async and defer do

async allows a script to be fetched in parallel with HTML parsing, but it executes as soon as the download completes—potentially interrupting DOM construction. defer also fetches in parallel but delays execution until after HTML parsing finishes. Both attributes eliminate parser-blocking for the download phase itself.

Interaction with HTML parsing

Without either attribute, an external classic script is parser-blocking: the browser stops parsing HTML, downloads the script, parses it, executes it, then resumes parsing. This can severely delay initial page rendering.

With async, the HTML parser continues uninterrupted during the download, but when the download finishes, the parser pauses to execute the script. This means async scripts can still interrupt DOM construction. With defer, the HTML parser continues without interruption during both download and parsing, and the script only executes after the parser completes naturally.

Execution timing relative to DOMContentLoaded

The DOMContentLoaded event is critical for understanding these differences. This event fires after HTML parsing completes and all deferred/module scripts have executed, but it does not wait for async scripts.

• defer scripts execute after HTML parsing completes but before DOMContentLoaded fires. The DOMContentLoaded event is delayed until all deferred scripts finish executing.
• async scripts execute as soon as downloaded, which can be before or after DOMContentLoaded. The event does not wait for them.
• Undeferred regular scripts block parsing and execute immediately; DOMContentLoaded fires after they complete.

Execution order guarantees with multiple scripts

This is where the attributes diverge sharply:

• defer scripts execute in document order: if you have multiple deferred scripts, they always execute in the order they appear in the HTML, even if one downloads faster than another.
• async scripts execute in download order, not document order: there is no guarantee about execution order. If script 2 downloads faster than script 1, script 2 executes first, regardless of which appeared first in the HTML. This is crucial: if script 2 depends on script 1, an async setup can break.

Inline scripts and type="module" scripts

Inline scripts (scripts without a src attribute) do not support async or defer—these attributes have no effect on inline classic scripts. An inline classic script always executes immediately and blocks parsing until complete. This is by design: inline scripts are already in the HTML, so there's no fetch phase to optimize.

Module scripts (type="module") differ fundamentally from classic scripts:

• Module scripts are deferred by default—they always wait until HTML parsing completes before executing, without needing the defer attribute. The defer attribute has no effect on module scripts.
• Inline module scripts are also deferred by default—even without src or defer attributes, inline modules execute after parsing, unlike inline classic scripts.
• Module scripts with async (both external and inline) execute as soon as they and their dependencies are available, similar to async classic scripts, potentially before parsing completes. When async is specified on a module, the defer behavior is overridden.
• Multiple module scripts maintain execution order when deferred (the default), similar to deferred classic scripts—they execute in document order. This is a safety feature: modules often import from each other, and preserving order prevents broken dependencies.

Special case: async + defer together

If both async and defer are specified on a classic script, async wins—the script behaves as if only async is present.

Evidence

{
  "evidence": [
    {
      "claim": "For classic scripts, if async is present, the classic script is fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes).",
      "quote": "For 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.",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"
    },
    {
      "claim": "Async scripts execute as soon as download is complete and do not guarantee any specific execution order.",
      "quote": "scripts with an async attribute will execute as soon as the download is complete. This blocks the page and does not guarantee any specific execution order.",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"
    },
    {
      "claim": "Async scripts can still block HTML parsing.",
      "quote": "Scripts with async can still block HTML parsing.",
      "url": "https://web.dev/articles/efficiently-load-third-party-javascript"
    },
    {
      "claim": "Defer scripts execute after HTML parsing is completely finished, but before the DOMContentLoaded event.",
      "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": "Scripts with defer attribute will execute in the order in which 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": "The DOMContentLoaded event fires after all deferred scripts and module scripts have downloaded and executed.",
      "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 fires after deferred/module script execution but before async script execution.",
      "quote": "document.readyState is set to \"interactive\" after the completion of the HTML parser but before the execution of scripts with defer or type=\"module\". 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 scripts may execute out-of-order, while defer scripts are executed in the order they appear in markup.",
      "quote": "Scripts loaded with async are parsed and executed immediately once downloaded, while scripts loaded with defer are executed when HTML document parsing is finished—this occurs at the same time as the browser's DOMContentLoaded event. Additionally, async scripts may execute out-of-order, while defer scripts are executed in the order in which they appear in the markup.",
      "url": "https://web.dev/learn/performance/optimize-resource-loading"
    },
    {
      "claim": "The async attribute 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) 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 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": "Module scripts defer 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": "Inline scripts with type='module' are deferred automatically.",
      "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": "For module scripts, if async attribute is present, the module script and its dependencies are fetched in parallel and evaluated as soon as available (potentially before parsing completes).",
      "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": "For external classic scripts, async fetches in parallel and evaluates as soon as available; defer fetches in parallel but evaluates after parsing.",
      "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). 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"
    }
  ]
}