async vs defer Script Loading in JavaScript
async and defer affect when scripts load and execute. Here is the difference (Ola question).
async vs defer Script Loading in JavaScript
async and defer are attributes for <script> tags that affect when scripts are downloaded and executed.
Normal (No Attribute)
<script src="app.js"></script>
- Download: blocks HTML parsing.
- Execute: immediately after download, blocks parsing.
async
<script src="app.js" async></script>
- Download: in parallel with HTML parsing (does not block).
- Execute: as soon as downloaded, pauses HTML parsing.
- Order: not guaranteed (whichever downloads first executes first).
- Use for: independent scripts (analytics, ads).
defer
<script src="app.js" defer></script>
- Download: in parallel with HTML parsing (does not block).
- Execute: after HTML parsing completes, in order.
- Order: guaranteed (scripts execute in the order they appear).
- Use for: most scripts (app logic, dependencies).
Comparison
| Feature | Normal | async | defer |
|---|---|---|---|
| Download | Blocks | Parallel | Parallel |
| Execute | Immediate | When ready | After parse |
| Order | Sequential | Unordered | Sequential |
| Blocks parsing | Yes | Briefly | No |
The Takeaway
Normal: blocks parsing. async: parallel download, execute when ready (unordered). defer: parallel download, execute after parse (ordered). Use defer for most scripts, async for independent scripts like analytics. Asked by Ola.
async downloads in parallel but executes as soon as ready (unordered, briefly blocks parsing). defer downloads in parallel and executes after HTML parsing (ordered, does not block).
For independent scripts that do not depend on other scripts or the DOM: analytics, ads, tracking pixels. async executes as soon as downloaded, regardless of order.
For most scripts: app logic, dependencies, scripts that need the DOM. defer downloads in parallel, executes after HTML parsing in order. It does not block rendering.
No. async scripts execute in whatever order they finish downloading. If script A is before script B but B downloads first, B executes first. Use defer if order matters.
Yes. defer scripts execute in the order they appear in the HTML, after parsing completes. This makes defer safe for scripts with dependencies.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.