Single on async vs defer on <script>

Now I have comprehensive information. Let me write the complete answer based on my research.

The async and defer Attributes on HTML <script> Elements

The async and defer attributes provide two different strategies for controlling when external JavaScript scripts are fetched and executed, helping to optimize page load performance.

What Each Attribute Does

The async attribute tells the browser to fetch the script in parallel with HTML parsing and execute it as soon as it becomes available. Once the script finishes downloading, the browser immediately executes it, which can interrupt HTML parsing if parsing is still ongoing. According to the HTML specification, "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)." (https://html.spec.whatwg.org/multipage/scripting.html)

The defer attribute tells the browser to fetch the script in parallel with HTML parsing but delay execution until after the HTML document has been completely parsed. The HTML specification states: "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." (https://html.spec.whatwg.org/multipage/scripting.html)

HTML Parsing Interaction

Without either attribute, external classic scripts block HTML parsing—the browser must download and execute the script before continuing to parse the rest of the HTML. According to web.dev: "A parser-blocking resource interrupts the HTML parser, such as a <script> element without async or defer attributes." (https://web.dev/learn/performance/optimize-resource-loading)

With async, the script is fetched in parallel while parsing continues, but execution can still interrupt parsing. As noted, "Scripts with async can still block HTML parsing." (https://web.dev/articles/efficiently-load-third-party-javascript)

With defer, the script is fetched in parallel and parsing is never interrupted. The browser completes parsing the entire HTML document before executing deferred scripts. According to web.dev: "defer ensures that scripts run in the order they appear in the HTML and don't block the parser." (https://web.dev/articles/efficiently-load-third-party-javascript)

Execution Timing Relative to DOMContentLoaded

The timing relationship with the DOMContentLoaded event is a key difference between these attributes:

Scripts with defer execute after HTML parsing completes but before the DOMContentLoaded event fires. According to MDN: "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." (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script)

Scripts with async execute as soon as they download, which may be before or after the DOMContentLoaded event, depending on timing. According to web.dev: "Scripts with the async attribute execute at the first opportunity after they finish downloading and before the window's load event." (https://web.dev/articles/efficiently-load-third-party-javascript) The MDN documentation on the DOMContentLoaded event clarifies: "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." (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)

Execution Order Guarantees

For defer scripts, execution order is guaranteed to match the document order. MDN states: "Scripts with the defer attribute will execute in the order in which they appear in the document." (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) This means if you have three deferred scripts in your HTML, they will execute in the order they appear, regardless of download times.

For async scripts, there are no guarantees about execution order. Web.dev explains: "This means it's possible (and likely) that async scripts won't run in the order in which they appear in the HTML." (https://web.dev/articles/efficiently-load-third-party-javascript) If your scripts have dependencies on each other, this unpredictability can cause problems.

Inline Scripts vs. External Scripts

Inline scripts (scripts with content directly in the HTML rather than loaded from a src attribute) behave fundamentally differently from external scripts. The async and defer attributes have no effect on inline classic scripts. MDN notes: "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." (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script)

Inline classic scripts always execute immediately and block HTML parsing until they complete.

Module Scripts

Module scripts (specified with type="module") have fundamentally different default behavior. MDN states: "The defer attribute has no effect on module scripts — they defer by default." (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) This means module scripts automatically behave like deferred scripts: they are fetched in parallel, and execution is delayed until after HTML parsing completes and before DOMContentLoaded fires.

For module scripts, the async attribute has a special effect: if you add async to a module script, it changes the behavior so the module executes as soon as it's available (like a non-deferred script), rather than waiting for parsing to complete. According to the HTML specification: "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). Otherwise, the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing." (https://html.spec.whatwg.org/multipage/scripting.html)

Inline module scripts also defer by default but ignore the defer attribute. They wait for the HTML to finish parsing before executing, and can use the async attribute to change this behavior (causing them to execute as soon as they load).

{"evidence": [{"claim": "async attribute causes external classic scripts to be fetched in parallel to parsing and evaluated as soon as available", "quote": "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": "defer attribute causes scripts to be fetched in parallel but evaluated when 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": "async scripts can still interrupt 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 but before DOMContentLoaded", "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": "async scripts execute before the window's load event and their order is unpredictable", "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": "defer scripts execute in document order", "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": "DOMContentLoaded waits for defer and module scripts but not 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": "async and defer attributes have no effect on inline classic 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": "defer attribute has no effect on module scripts as they defer by default", "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 execute as soon as available rather than after parsing", "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). 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"}]}