What Is the Difference Between defer and async Scripts?
Learn how defer and async script loading differ in execution timing and ordering, with examples of when to use each.
Expected Interview Answer
Both defer and async let the browser download a script without blocking HTML parsing, but defer additionally guarantees execution happens after parsing finishes and in document order, while async executes as soon as the download completes, potentially mid-parse and out of order relative to other scripts.
A plain <script> tag blocks the HTML parser both while it downloads and while it executes, which is why blocking scripts are traditionally placed at the end of the body. Adding “async” lets the download happen in parallel with parsing, but as soon as the script finishes downloading, parsing pauses and the script runs immediately — the exact timing is unpredictable, and multiple async scripts can execute in any order relative to each other. Adding “defer” also downloads in parallel, but execution is deferred until parsing completes, and multiple deferred scripts always run in their source order, right before DOMContentLoaded fires. As a rule of thumb, use defer for scripts that depend on the DOM or on each other (like most app bundles), and reserve async for independent scripts with no ordering dependency, like analytics tags.
- Both avoid blocking HTML parsing during download, unlike a plain blocking script tag
- defer preserves execution order and guarantees the DOM is fully parsed first
- async minimizes latency for scripts with no dependency on document state
- Choosing correctly avoids race conditions between interdependent scripts
AI Mentor Explanation
A blocking script is like stopping play entirely while new stumps are fetched from storage. Defer is like a substitute jogging on with fresh equipment while the over continues, but that equipment is only actually used once the current over fully ends, in the exact order it was requested. Async is like a runner who sprints back the moment they grab the gear and hands it over mid-ball, whenever that happens to be, interrupting play unpredictably. That guaranteed-order-after-parsing versus whenever-it-arrives distinction is exactly what separates defer from async.
Step-by-Step Explanation
Step 1
Browser encounters the script tag
Parsing continues uninterrupted while the script downloads, for both defer and async, unlike a plain blocking tag.
Step 2
Download completes
For async, execution happens immediately, pausing the parser mid-document; for defer, execution is queued.
Step 3
Parsing finishes (defer only)
Deferred scripts wait until the full document is parsed before they run.
Step 4
Scripts execute
Deferred scripts run in source order right before DOMContentLoaded; async scripts already ran whenever they finished downloading.
What Interviewer Expects
- Clear statement that both avoid parser-blocking during download
- Correct explanation that defer preserves order and waits for parsing to finish
- Correct explanation that async runs immediately on download completion, with no ordering guarantee
- A practical rule for when to use each (defer for dependent/app scripts, async for independent scripts)
Common Mistakes
- Claiming async and defer are interchangeable performance optimizations
- Forgetting that multiple async scripts can execute out of order relative to each other
- Assuming defer scripts execute immediately after download rather than after parsing completes
- Applying async to a script that depends on another script or the fully parsed DOM
Best Answer (HR Friendly)
“Both defer and async let the page keep loading while a script downloads in the background instead of freezing everything. The difference is timing: defer waits until the whole page is ready and always runs scripts in the order you wrote them, while async just runs the moment it finishes downloading, which can be at an unpredictable time and in an unpredictable order if you have more than one.”
Code Example
<!-- Blocking: parser stops entirely until this downloads AND runs -->
<script src="/legacy.js"></script>
<!-- defer: downloads in parallel, runs in order, after parsing finishes -->
<script src="/app-core.js" defer></script>
<script src="/app-features.js" defer></script>
<!-- async: downloads in parallel, runs immediately on completion, order not guaranteed -->
<script src="/analytics.js" async></script>Follow-up Questions
- What happens to inline scripts placed between two deferred external scripts?
- How does type="module" affect default script loading behavior compared to defer?
- Why might using async on a script that manipulates the DOM cause a bug?
- How does the order of async scripts get decided if two finish downloading at the same time?
MCQ Practice
1. Which best describes when a deferred script executes?
defer guarantees execution after parsing completes and preserves source order across multiple deferred scripts.
2. What is the main risk of using async on multiple interdependent scripts?
async scripts run as soon as each individually finishes downloading, with no cross-script ordering guarantee.
3. Which script type is generally best for an independent analytics tag with no DOM dependency?
async is ideal for scripts with no ordering or DOM dependency, since exact timing does not matter.
Flash Cards
When does an async script execute? — Immediately upon finishing download, potentially mid-parse, order not guaranteed.
When does a deferred script execute? — After the document is fully parsed, in source order, right before DOMContentLoaded.
What do defer and async share? — Both download the script in parallel without blocking HTML parsing.
Rule of thumb for choosing? — defer for dependent/ordered app scripts; async for independent scripts like analytics.