HTML · The document layer
What is the difference between normal, defer and async scripts?
Short answer
A normal script blocks HTML parsing until it downloads and runs. defer downloads in parallel and runs after parsing in order, while async downloads in parallel and runs as soon as it is ready.
Script loading affects when the parser stops and when the DOM is available. The right choice depends on whether the script depends on the DOM or on other scripts.
The three modes
- No attribute: the parser stops, the script downloads, then it executes immediately
- defer: downloads in parallel, executes after parsing, preserves document order
- async: downloads in parallel, executes as soon as it is ready, order is not guaranteed
- defer scripts run before DOMContentLoaded
- Module scripts are deferred by default
<script src="/analytics.js" async></script>
<script src="/app.js" defer></script>Use defer for most application code because the DOM is parsed and execution order is stable. Use async for independent third-party scripts where order does not matter, such as analytics or ads.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Which runs first, defer or DOMContentLoaded?
- 2Are module scripts deferred by default?
- 3When is async a bad choice?
- 4Does defer guarantee order?
Say it in the interview
A normal script blocks parsing while it downloads and runs. defer downloads in parallel but waits until parsing finishes, then runs in document order. async also downloads in parallel but runs as soon as it is ready, so order is not guaranteed. I use defer for application code that needs the DOM or depends on other scripts, and async for independent scripts like analytics. Module scripts are deferred by default.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.