Orchestrator-workers on async vs defer on <script>

The async and defer Attributes on HTML <script> Elements

The async and defer attributes control how external scripts are fetched and executed relative to HTML parsing, but they have fundamentally different behaviors.

The async Attribute

When the async attribute is present on a classic script element with a src attribute, the browser downloads the script in parallel with HTML parsing. However, once the script finishes downloading, it executes immediately, regardless of whether the HTML parser has finished parsing the document. This execution can interrupt HTML parsing. Because scripts download independently and can finish at unpredictable times, async scripts are not guaranteed to execute in any particular order—they may run out of order relative to how they appear in the markup. The DOMContentLoaded event does not wait for async scripts to complete.

The async attribute has no effect on inline scripts (scripts without the src attribute), as inline scripts are always executed immediately. For type="module" scripts, if the async attribute is present, they execute as soon as available rather than being deferred by default.

The defer Attribute

The defer attribute instructs the browser to download the script in parallel with HTML parsing but postpone execution until after the HTML document has been completely parsed. Critically, defer scripts maintain their execution order relative to the document—if you have multiple deferred scripts, they execute in the order they appear in the markup. The DOMContentLoaded event fires after all deferred scripts have downloaded and executed.

Like async, the defer attribute has no effect on inline scripts and cannot be used on them. Additionally, defer has no effect on module scripts since modules are deferred by default.

Module Scripts and Inline Module Scripts

Classic <script type="module"> elements are deferred automatically by default—there is no need to add the defer attribute. They behave like scripts with defer: they load in parallel but execute after HTML parsing completes, in document order, and before DOMContentLoaded fires. However, if the async attribute is present on a module script, it behaves like an async script instead, executing as soon as it's available.

Inline scripts with type="module" are also deferred automatically and execute in-place in the document order. Standard inline scripts (without type="module") cannot use async or defer; they execute synchronously and block HTML parsing.

Interaction with HTML Parsing

Classic scripts without async or defer block the HTML parser entirely until they download and execute. Both async and defer allow the HTML parser to continue while scripts download. However, async scripts can interrupt the parser when they finish downloading and begin execution. Defer scripts never interrupt parsing—they wait until parsing is completely finished.

Execution Order Guarantees

• No attributes (classic scripts): Execute immediately in document order, blocking the parser
• async: Execute as soon as downloaded; order is unpredictable
• defer: Execute in document order, after parsing completes
• type="module": Execute in document order after parsing (as if defer), unless async is also present

{"evidence": [{"claim": "For classic scripts, async allows the script to be fetched in parallel to parsing and evaluated as soon as it is available.", "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": "The defer attribute indicates the script should 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": "Scripts with defer 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": "The DOMContentLoaded event fires after deferred scripts execute but before 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": "Async scripts may execute out of order and can interrupt DOM building.", "quote": "This means it's possible (and likely) that async scripts won't run in the order in which they appear in the HTML. 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 and defer attributes have no effect on inline 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": "Module scripts are deferred by default and do not require 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": "Module scripts have no effect from defer and charset attributes.", "quote": "The processing of the script contents is deferred. The charset and defer attributes have no effect.", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script"}, {"claim": "For module scripts, async causes them to execute as soon as available rather than being deferred.", "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": "Scripts without async, defer, or type=module execute immediately and block parsing.", "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"}]}