Detailed explanation
For external classic JavaScript, <script>, <script async>, and <script defer> differ in when the browser fetches and executes the file, whether execution interrupts HTML parsing, and whether execution order is guaranteed. These choices affect when page elements become available and whether dependent scripts run correctly. The distinction is between downloading code and executing it: async and defer allow downloading alongside parsing, but neither automatically moves execution to a background thread.
A plain <script src="app.js"></script> pauses the HTML parser when encountered. The browser must obtain and execute the script before parsing continues, although its preload scanner may have started fetching the resource earlier. During execution, the script can access elements already parsed, but later elements may not exist yet. Putting a plain script near the end of <body> makes earlier markup available, but generally starts its discovery later than placing a deferred script in <head>. Inline classic scripts also execute immediately when encountered; they have no external download to wait for.
With <script src="analytics.js" async></script>, fetching happens alongside parsing, and execution occurs as soon as the script is ready. If parsing is still underway, execution pauses it. Multiple async scripts have no guaranteed execution order, so async suits independent code that does not rely on other scripts or on the entire DOM being available. DOMContentLoaded does not wait for async scripts, which may execute before or after that event depending on timing.
With <script src="app.js" defer></script>, fetching also happens alongside parsing, but execution waits until the document has been parsed. Parser-inserted deferred classic scripts execute in document order, before DOMContentLoaded fires. This makes defer a good default for application scripts that need the parsed DOM or ordered dependencies. In interviews, state the scope clearly: async and defer are primarily relevant here to external classic scripts. They do not defer inline classic scripts. Module scripts, declared with type="module", already have deferred execution behaviour by default; adding defer has no effect, while async changes their scheduling.
Key points to remember
- Plain external classic scripts pause HTML parsing until fetching and execution finish.
- async fetches alongside parsing and executes as soon as ready, without guaranteeing document order.
- defer fetches alongside parsing and executes after parsing, in document order for parser-inserted classic scripts.
- DOMContentLoaded waits for deferred scripts to execute, but does not wait for async scripts.
- Use async for independent scripts and defer for scripts needing the parsed DOM or ordered dependencies.
Common mistakes candidates make
- Saying async execution happens in a background thread or never interrupts parsing.
- Using async for dependent scripts and assuming their HTML order determines execution order.
- Assuming defer works on inline classic scripts or waits for every image and other resource to load.
Likely follow-up questions
If app.js depends on library.js, how should they be loaded?
Use two external classic scripts with defer, placing library.js before app.js in the HTML. They can download concurrently but execute in document order; using async would not guarantee that dependency order.
Does defer wait for images to load?
No, defer waits for HTML parsing to finish, not for all page resources to load. The parsed DOM is available, but image loading may still be in progress.
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 waiting for parsing to finish or preserving document order.
Interview tip: Compare fetching, execution timing, and ordering first, then illustrate async with independent analytics and defer with DOM-dependent application code.