Propose-select on async vs defer on <script>

How async and defer Work in HTML Script Elements

The async Attribute

The async attribute applies only to external scripts (those with a src attribute, not inline scripts). When present, it tells the browser that the script can be fetched in parallel with HTML parsing and executed as soon as the download completes, without waiting for the parser to finish. This means async scripts can interrupt HTML parsing while they execute. A critical point is that async scripts provide no guarantee about execution order—if you have multiple async scripts, they execute in whatever order they finish downloading, not necessarily in the order they appear in the HTML. Async scripts execute after they download but before the window's load event, though they may execute before or after the DOMContentLoaded event depending on timing.

The defer Attribute

The defer attribute also applies only to external scripts. When present, the script is fetched in parallel with parsing (like async), but execution is delayed until the HTML parsing is completely finished. Critically, defer guarantees execution order—deferred scripts execute in the order they appear in the document. Deferred scripts execute after HTML parsing completes but before the DOMContentLoaded event fires. This makes defer ideal when scripts depend on the DOM being constructed and when execution order matters.

Interaction with HTML Parsing

Both async and defer allow the HTML parser to continue parsing while the script downloads, which is the main performance benefit. However, they differ in execution timing: async scripts can execute while parsing is still happening (potentially blocking it when they run), while defer scripts always wait for parsing to complete. Without either attribute, external scripts are parser-blocking—the browser must download and execute them before continuing to parse the HTML.

Relative to DOMContentLoaded

The DOMContentLoaded event fires when the HTML document is completely parsed and all deferred scripts (those with defer or type="module") have downloaded and executed. Critically, DOMContentLoaded does not wait for async scripts. This means:

• Deferred scripts: Execute before DOMContentLoaded
• Async scripts: May execute before or after DOMContentLoaded depending on download timing
• Module scripts (default behavior): Treated like deferred scripts by default, executing before DOMContentLoaded

Multiple Scripts and Execution Order Guarantees

When you have several external classic scripts:

• With async: No specific order guarantee. Scripts execute as soon as they download, potentially in a different order than they appear in the HTML.
• With defer: Strict document order. Scripts are guaranteed to execute in the order they appear, regardless of download speed.
• With both attributes: If both are specified, async takes precedence, and the element acts as if only async is present.

Inline Scripts (<script> without src)

The async and defer attributes have no effect on inline scripts. According to the HTML standard, these attributes must not be used on inline scripts because there's nothing to defer or parallelize—the script content is already present in the HTML. Inline scripts execute immediately when encountered during parsing, blocking further parsing until complete. This means any inline script, regardless of attributes, behaves as a synchronous parser-blocking script.

Module Scripts (type="module")

Module scripts behave differently from classic scripts by default:

• Without async: Module scripts defer by default. They fetch in parallel and execute when page parsing is finished, before DOMContentLoaded, in document order.
• With async: If the async attribute is present on a module script, it executes as soon as available (like async classic scripts), potentially before DOMContentLoaded.
• The defer attribute has no effect on module scripts because they defer by default.

All module scripts execute before DOMContentLoaded unless they have the async attribute, in which case they may execute after DOMContentLoaded if they haven't finished downloading yet. Module scripts maintain document order unless async is specified.

{"evidence": [{"claim": "The async attribute tells the browser that a classic script can be fetched in parallel to parsing and evaluated as soon as 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": "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 guarantee any specific execution order when there are multiple scripts.", "quote": "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": "The defer attribute tells the browser to execute scripts after the document has been parsed.", "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": "The DOMContentLoaded event fires after deferred scripts and module scripts execute.", "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 does not wait for async scripts.", "quote": "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": "The 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 defer by default, with no effect from the defer attribute.", "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": "When async is specified on a module script, it executes as soon as available like async classic scripts.", "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": "Module scripts and inline scripts with type=module are automatically deferred.", "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": "Scripts with async may execute out-of-order while defer scripts execute in document order.", "quote": "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": "Async classic scripts execute as soon as download completes, not in guaranteed order.", "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": "If both async and defer are specified, async takes precedence.", "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"}]}