Detailed explanation
For external classic JavaScript scripts, async and defer let the browser fetch a script while continuing to parse HTML. Their main difference is when execution happens and whether execution order is guaranteed. A normal external script without either attribute pauses HTML parsing while the browser waits for and executes it. These attributes avoid that download-related pause, helping the browser build the page while JavaScript loads. However, neither makes JavaScript execution itself non-blocking or moves it to a background thread.
An async script executes as soon as it is available, without waiting for HTML parsing to finish. If parsing is still happening, execution interrupts it on the main thread. Multiple async scripts have no guaranteed execution order: a later script can execute before an earlier one if it becomes ready first. For example, <script src="analytics.js" async></script> is suitable when that script can operate independently of other scripts and does not require DOM elements that might not exist yet. Async is therefore a poor default for scripts with dependency chains.
A defer script downloads alongside HTML parsing but executes only after the document has been parsed. Multiple deferred classic scripts execute in document order, even if their downloads finish in a different order. For example, <script src="app.js" defer></script> can access elements from the parsed HTML without wrapping its initialisation in a DOMContentLoaded listener. If app.js depends on another deferred classic script, placing that dependency first preserves their execution sequence. DOMContentLoaded waits for deferred scripts to finish executing; it does not specifically wait for async scripts.
In interviews, explain the distinction using three dimensions: parsing, execution timing, and ordering. Then justify the choice: defer usually suits page application code with DOM access or ordered dependencies, while async suits independent scripts. Mention scope when relevant: these rules primarily describe parser-inserted external classic scripts. For inline classic scripts, async and defer have no effect. Module scripts defer by default; adding async changes their timing, and adding defer has no effect.
Key points to remember
- Both attributes allow external script fetching to overlap with HTML parsing.
- Async executes when ready and can interrupt parsing; execution order is not guaranteed.
- Defer executes after HTML parsing and preserves document order among deferred classic scripts.
- DOMContentLoaded waits for deferred scripts, but does not specifically wait for async scripts.
- Use defer for DOM-dependent or ordered application scripts and async for independent scripts.
Common mistakes candidates make
- Saying async or defer runs JavaScript in a background thread or prevents execution from blocking the main thread.
- Using async for dependent scripts and assuming their HTML order guarantees execution order.
- Applying classic-script rules indiscriminately to inline scripts or modules, which have different attribute behaviour.
Likely follow-up questions
What happens if both async and defer are present?
For an external classic script in modern browsers, async takes precedence. The script executes when ready rather than following defer's post-parsing, ordered execution behaviour.
Is defer the same as putting a script just before the closing body tag?
Both usually let the script access preceding page elements, but their loading behaviour differs. A deferred script in the head can be discovered and fetched early while parsing continues; a normal script at the end of the body still blocks the parser when encountered.
How do async and defer work with module scripts?
Parser-inserted module scripts are deferred by default: the browser fetches their dependencies and waits until HTML parsing finishes before evaluation. Defer adds nothing, while async allows evaluation once the module graph is ready without waiting for parsing or preserving document order.
Interview tip: Start with the timing and ordering difference, then use analytics.js and app.js to explain when you would choose each attribute.