mediumConceptScenarioEntryMidSenior
A third-party script in the head delays your first paint by a second. What do async, defer and type="module" each change about parsing and execution order?
A plain script in the head stops the parser until it is fetched and run. defer fetches in parallel and runs after parsing, in document order, before DOMContentLoaded. async runs as soon as it arrives, in no guaranteed order. Module scripts are deferred by default and also accept async.
5 min readUpdated 2026-10-09Target archetype: Big Tech, Product Startup
Answer
Short answer
A plain <script src> in the head is parser-blocking. The parser stops, the browser fetches and runs the file, and only then carries on building the page, so a slow third-party host delays first paint. The async vs defer choice changes script loading and execution timing, not whether the script runs:
| Script | Fetch | Runs | Order | DOMContentLoaded |
|---|---|---|---|---|
| plain | blocks the parser | immediately | document order | waits for it |
defer | in parallel | after parsing finishes | document order | waits for it |
async | in parallel | as soon as it arrives | none guaranteed | does not wait |
type="module" | in parallel, with imports | after parsing finishes | document order | waits for it |
type="module" async | in parallel, with imports | as soon as the graph arrives | none guaranteed | does not wait |
Was this answer helpful?
Likely follow-ups
- The vendor's snippet injects its script with createElement instead of a script tag. Which of these behaviours does the injected script get?
- A deferred script registers a DOMContentLoaded listener and it fires. The same code marked async sometimes never sees the event. Why?
- Moving the vendor tag to type=module broke it with a network error that never happened as a classic script. What changed about the request?
- Would you self-host the third-party file to avoid the extra connection, and what do you lose by doing it?
Related questions
- A flex item with a long URL in it pushes past its container instead of shrinking. Why does flex-shrink not save you?mediumSame kind of round: concept4 min
- A save button calls an API, the request fails, the error appears in the console - and the UI still shows 'Saved'. Walk me through what is actually happening in that promise chain.mediumSame kind of round: concept4 min
- What does a business analyst do on an agile team, and how does requirements work survive without a signed-off specification?mediumSame kind of round: concept6 min
- Walk me through a claim from first notification to closure, and tell me what the reserve is doing at each stage.mediumSame kind of round: concept5 min