Orchestrator-workers on async vs defer on <script>

The HTML async and defer Attributes on Script Elements

The async and defer attributes are boolean attributes that control how and when JavaScript executes relative to HTML parsing. Their behavior depends critically on whether the script is a classic external script, an inline script, or a module script.

Classic External Scripts with src

What async Does

The async attribute tells the browser to fetch the script in parallel with HTML parsing without blocking it. However, once the download completes, the script executes immediately and synchronously, which blocks parsing at that moment. Multiple async scripts execute as soon as each finishes downloading, with no guaranteed order—they may execute out of sequence relative to their appearance in the HTML.

What defer Does

The defer attribute tells the browser to fetch the script in parallel with HTML parsing without blocking it, but to delay execution until after the HTML has been completely parsed. Multiple deferred scripts execute in the order they appear in the document, providing a guaranteed execution order that preserves dependencies.

Interaction with HTML Parsing

Without attributes (synchronous): The script is parser-blocking. The browser stops parsing, fetches and executes the script immediately, then resumes parsing.

With async: Parsing continues while the script downloads. However, when the download completes, execution blocks parsing until the script finishes. Because download time is unpredictable, this interruption can occur at any point during parsing.

With defer: Parsing continues uninterrupted. The script waits in the background until parsing is completely finished, then executes.

Execution Relative to DOMContentLoaded

The DOMContentLoaded event fires when HTML parsing is complete and all deferred scripts have executed. Critically:

• defer scripts execute before DOMContentLoaded fires. The event waits for all deferred scripts to complete.
• async scripts execute at unpredictable times relative to DOMContentLoaded. They may execute before or after it. DOMContentLoaded does not wait for async scripts.

Execution Order Guarantees

defer: Multiple deferred scripts execute in the order they appear in the HTML, making them suitable for scripts with dependencies.

async: There is no guaranteed order. Multiple async scripts may execute in any sequence, making them suitable only for independent scripts.

Inline Classic Scripts (No src)

Inline scripts (script elements without a src attribute) execute immediately and synchronously during HTML parsing, blocking the parser until execution completes. The async and defer attributes have no effect on inline scripts—they are ignored by the browser. Inline scripts function as if they have no attributes, executing as part of the normal parsing flow before DOMContentLoaded fires.

Module Scripts (type="module")

Module scripts behave fundamentally differently from classic scripts.

Default Behavior

Module scripts are deferred by default without needing the defer attribute. Both external and inline module scripts:

• Are fetched in parallel to parsing (for external scripts)
• Execute after HTML parsing is completely finished, before DOMContentLoaded fires
• Execute in the order they appear in the document
• Are executed only once, even if referenced multiple times

The defer attribute has no effect on module scripts because they already defer by default.

With async

If async is specified on a module script, the module and all its dependencies are fetched in parallel and executed as soon as they become available—potentially before parsing completes. This means async module scripts can interrupt the parser, unlike the default module behavior.

Inline Module Scripts

Inline module scripts (<script type="module"> without src) also defer execution by default until after parsing completes. They execute in order with other module scripts and before DOMContentLoaded fires.

Evidence

{
  "evidence": [
    {
      "claim": "The async attribute on external classic scripts causes the script to be fetched in parallel to parsing and evaluated as soon as it is 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 defer attribute on external classic scripts causes the script to be fetched in parallel but evaluated after 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": "Without async or defer, classic scripts are fetched and evaluated immediately, blocking parsing",
      "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": "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 execute with no guaranteed 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": "DOMContentLoaded fires after deferred and module scripts have executed but does not wait for async 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. 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": "document.readyState becomes interactive before defer/module scripts execute, and DOMContentLoaded fires after them but before async scripts",
      "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": "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": "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": "Inline classic scripts execute immediately and block parsing",
      "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": "Module scripts are deferred by default without needing the defer attribute",
      "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 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": "The defer attribute has no effect on module scripts",
      "quote": "The defer attribute has no effect on module scripts.",
      "url": "https://html.spec.whatwg.org/multipage/scripting.html"
    },
    {
      "claim": "For module scripts with async, the module and all dependencies are fetched in parallel and evaluated as soon as 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": "For module scripts without async, the module and dependencies are fetched in parallel but evaluated when the page has finished parsing",
      "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 only executed once even if referenced in multiple script tags",
      "quote": "Modules are only executed once, even if they have been referenced in multiple <script> tags.",
      "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"
    },
    {
      "claim": "Async scripts can interrupt DOM building if they finish downloading while the parser is still working",
      "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"
    }
  ]
}