async takes an intentionally different approach from defer — prioritizing immediate execution the moment a script is ready, at the cost of any execution-order guarantee, making it correct for a specific, narrower class of scripts.
1Immediate Execution The Moment Download Completes
Like defer, <script async src="..."> downloads without blocking the initial HTML parsing. But its execution timing is fundamentally different: the instant the download finishes — whenever that happens to occur relative to parsing progress — the script executes immediately, briefly pausing HTML parsing at that specific point until the script finishes running.
This is a meaningfully different philosophy from defer's patient wait until parsing fully completes: async prioritizes running the script as soon as possible, accepting the tradeoff of a potential (typically brief) parsing interruption at an unpredictable moment.
2No Execution Order Guarantee Whatsoever
This is the critical distinction from defer covered in the previous lesson: multiple async scripts provide zero guarantee about relative execution order. Whichever script's file finishes downloading first executes first — a small, fast-loading tracker script listed second in the document might genuinely execute before a larger library script listed first, purely due to file size or network timing differences.
This makes async fundamentally unsafe for any scripts with real dependencies on each other — using it for a library and application code that depends on that library risks intermittent, hard-to-reproduce race-condition bugs depending on network conditions on any given page load.
3The Correct Use Case: Genuine Independence
async is the right choice precisely for scripts with no dependencies on other scripts and no requirement to interact with the DOM in any particular order relative to page content — the textbook example being third-party analytics, advertising, or monitoring tags that simply need to load and begin reporting, entirely independent of the rest of the page's JavaScript.
For these genuinely independent scripts, async's 'run as soon as possible' behavior is a pure win with no real downside, since there's no ordering relationship to actually violate — making the choice between defer and async fundamentally a question of whether the script has real dependencies (use defer) or is genuinely standalone (use async).
4Step-by-Step Breakdown
Runs The Instant It's Ready, No Waiting. Where defer waits patiently for parsing to finish and preserves document order, async takes the opposite approach entirely: execute the instant the download completes, parsing be damned, in whatever order downloads happen to finish.
async Executes Immediately On Download Completion. A <script async src="..."> also downloads without blocking parsing, but the moment it finishes downloading, it executes immediately — briefly pausing HTML parsing at that exact point, unlike defer's patient wait until parsing fully completes.
async Execution Timing. Unlike defer, when does an async script actually execute?
- →After HTML parsing fully completes, same as defer
- →Immediately the moment its download finishes, potentially interrupting parsing
- →It never executes automatically; requires manual triggering
Execution Order Is Unpredictable With Multiple async Scripts. Multiple async scripts execute in whatever order their downloads happen to complete — a smaller or faster-served script can execute before a larger one listed earlier in the document, making async unsafe for scripts with dependencies on each other.
async Execution Order. If two async scripts are listed in a specific document order, is that order guaranteed during execution?
- →Yes, document order is always preserved, same as defer
- →No, execution order depends entirely on which script's download finishes first
- →They always execute in alphabetical order by filename
The Correct Choice For Genuinely Independent Scripts. async is the right choice specifically for scripts with zero dependencies on other scripts and no need to interact with the DOM in a specific order — the classic example being third-party analytics or ad tags that just need to run and report, independent of everything else.
When async Is The Right Choice. What characteristic makes a script a good candidate for async rather than defer?
- →It depends on another script having already run
- →It's genuinely independent, with no ordering or DOM-readiness dependencies
- →It must run before any other script on the page
async Mastered. You now understand async's immediate-on-download execution timing, why multiple async scripts have no guaranteed execution order (unlike defer), and that this makes it the correct choice specifically for genuinely independent scripts like analytics tags.
Load A Script Asynchronously. async lets the script download in parallel and run as soon as it's ready, out of order.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1async's Unpredictable Parsing Interruption Should Never Be Used For Scripts Affecting Critical, Above-The-Fold Content
Since async can briefly pause parsing at an unpredictable moment, reserving it for genuinely independent, non-critical scripts (like analytics) avoids any risk of disrupting the rendering of essential accessible content.
SEO Implications
- 1
Using async Instead Of Defer For Third-Party Analytics Avoids Unnecessarily Delaying Application-Critical Script Execution
Since analytics scripts have no bearing on core page functionality or content, letting them load independently via async, rather than being forced into the same ordered defer queue as critical application code, is both correct and slightly more efficient.
Best Practices
Use async Specifically For Scripts With Zero Dependencies On Other Scripts Or Specific DOM State
This is the one scenario where async's lack of ordering guarantee is a non-issue, letting the script run as early as possible without any real risk.
Never Use async For Scripts That Depend On Another Script Having Already Executed
The lack of execution-order guarantee makes this a genuine, hard-to-reproduce race-condition risk — use defer instead for any scripts with real dependencies.
Frequent Bugs
An application intermittently throws an error claiming a library function is undefined, but only on some page loads.
Check whether the library and dependent script both use async — switch both to defer to guarantee document-order execution instead.
A third-party analytics script is unnecessarily delaying other, more critical application scripts.
Switch the analytics script to async specifically, since it has no real ordering dependency and can safely run independently.
Real-World Examples
Correctly Separating Dependent And Independent Scripts
An application using defer for its own ordered, dependent code and async for an unrelated third-party analytics tag.
<script defer src="/vendor/library.js"></script>
<script defer src="/app/main.js"></script>
<script async src="https://analytics.example.com/tracker.js"></script>