async and defer: Real-World Examples
Real-world examples of when to use async and defer.
async and defer: Real-World Examples
Example 1: App with Dependencies (defer)
<head> <script src="react.js" defer></script> <script src="react-dom.js" defer></script> <script src="app.js" defer></script> </head>
All deferred: download in parallel, execute in order (react -> react-dom -> app).
Example 2: Analytics (async)
<head> <script src="analytics.js" async></script> </head>
async: downloads and executes independently. Does not block the page.
Example 3: Ads (async)
<script src="ads.js" async></script>
async: loads whenever, does not depend on other scripts.
Example 4: Mixed
<head> <script src="analytics.js" async></script> <script src="app.js" defer></script> </head>
Analytics loads independently (async). App loads in order with other deferred scripts.
The Takeaway
Real-world: use defer for app logic and dependencies (react, react-dom, app). Use async for independent scripts (analytics, ads). Mix both: async for independent, defer for dependent. Place all in the head for early download.
<script src='react.js' defer></script><script src='react-dom.js' defer></script><script src='app.js' defer></script>. All deferred: download in parallel, execute in order (react first, app last).
<script src='analytics.js' async></script>. Analytics is independent (does not depend on other scripts or the DOM), so async is appropriate. It loads and runs whenever it is ready.
Yes. Use async for independent scripts (analytics, ads) and defer for dependent scripts (app logic). They do not interfere with each other. async scripts may run before or after deferred scripts.
The dependency may not be loaded when the script executes. async does not guarantee order. Use defer for both scripts to guarantee the dependency loads first.
defer. jQuery is usually a dependency for other scripts. Use defer to guarantee it loads before scripts that depend on it. async would not guarantee order.
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.