What do defer and async attributes do on script tags?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Neither blocks HTML parsing while downloading. async scripts execute as soon as they're ready (order not guaranteed); defer executes after parsing finishes, in order, right before DOMContentLoaded.
Detailed explanation
A classic <script src> pauses HTML parsing: download, execute, resume — slow and render-blocking. Adding async lets parsing continue during download, but execution still pauses parsing at the moment the script arrives, so async scripts run unpredictably relative to each other — fine for independent analytics widgets, wrong for scripts that depend on each other. defer downloads in parallel but queues execution until the document is fully parsed, preserving order; deferred scripts run before DOMContentLoaded fires, so they can safely query the full DOM without a load-event listener. Modern defaults: module scripts are deferred automatically, and bundlers inject hashed bundles with defer semantics. If you need nothing from the page, plain async or even dynamic import() is fine.
Example
<script src="vendor.js"></script> <!-- blocking -->
<script async src="analytics.js"></script><!-- runs whenever ready -->
<script defer src="app.js"></script> <!-- ordered, after parse -->
<script type="module" src="main.js"></script> <!-- deferred by default -->Interview tip
Draw the three timelines verbally: parse-blocked vs parallel-download-execute-immediately vs parallel-download-execute-in-order-after-parse.
Common mistakes
- Saying async preserves execution order.
- Not knowing type="module" implies defer behavior.