🔄 Script Loading: async vs defer vs Both

Async and defer attributes control how scripts load and execute. Critical for optimizing page performance and preventing render-blocking JavaScript.

Understanding when to use , , or both attributes on tags to optimize page loading performance and avoid render-blocking issues. -- 💡 What are Script Loading Attributes? Script loading attributes control how and when JavaScript files are downloaded and executed, preventing render-blocking and improving page performance. Why it matters: Default tags block HTML parsing and rendering, causing slow page loads and poor user experience. -- 🧠 Core Concepts Default Behavior (No Attributes) What happens: 1. HTML parsing stops 2. Script downloads 3. Script executes immediately 4. HTML parsing resumes Impact: Slows First Contentful Paint, blocks rendering. Attribute What happens: 1. Download starts in parallel with HTML parsing 2. HTML parsing continues uninterrupted 3. Script executes after DOM is complete 4. Multiple deferred scripts run in order Best for: Application scripts that need DOM access. Attribute What happens: 1. Download starts in parallel with HTML parsing 2. HTML parsing continues 3. Script executes as soon as download completes 4. May interrupt HTML parsing if downloaded early Best for: Independent scripts (analytics, ads, widgets). (Both) What happens: takes precedence, is ignored. Same as only. -- ✅ When to Use Each Approach Use for: Application scripts that manipulate DOM Scripts that depend on each other (maintains execution order) Scripts that need DOM to be ready Most JavaScript in modern web apps Use for: Analytics and tracking scripts Social media widgets Ads and third-party scripts Independent utilities that don't need DOM Never use both: -- 🧪 Practical Examples E-commerce Site Loading Strategy Blog Site Loading Strategy Single Page Application (SPA) -- ⚠️ Limitations & Considerations Execution Order Issues DOMContentLoaded Timing scripts run before event scripts may run before or after Default scripts run immediately (block ) Module Scripts Browser Support *: IE 10+, all modern browsers : IE 10+, all modern browsers Both attributes: takes precedence in all browsers -- 📊 Performance Comparison Blocks HTML Execution Order Use Case ✅ Yes ✅ Ordered Legacy code ❌ No ✅ After ❌ No ❌ Unordered Widgets/ads | -- 🔍 Summary : Use for application JavaScript that needs DOM access and execution order : Use for independent scripts like analytics, ads, and third-party widgets Never both: is invalid takes precedence Default: Avoid unless you have legacy requirements Key Rule: If script needs DOM or depends on other scripts → . If script is independent → . -- 🌐 Related Resources Browser Rendering Path () How scripts affect rendering Critical Rendering Path () Advanced optimization ES6 Modules () Modern module loading Promises() Async JavaScript patterns -- <!-quiz-start --Q1: What happens when you use both and on the same script tag? [ ] takes precedence [x] takes precedence, is ignored [ ] Both attributes work together [ ] The browser throws an error Q2: Which attribute should you use for scripts that depend on each other and need to maintain execution order? [x] [ ] [ ] Both and [ ] Neither, use no attributes Q3: When do scripts with the attribute execute? [ ] Immediately when downloaded [ ] Before HTML parsing begins [x] After the DOM is fully parsed, before DOMContentLoaded [ ] Only when called by other scripts <!-quiz-end --

🔄 Script Loading: async vs defer vs Both

jsgeneral-conceptshard

Understanding when to use async, defer, or both attributes on <script> tags to optimize page loading performance and avoid render-blocking issues.

💡 What are Script Loading Attributes?

Script loading attributes control how and when JavaScript files are downloaded and executed, preventing render-blocking and improving page performance.

Why it matters: Default <script> tags block HTML parsing and rendering, causing slow page loads and poor user experience.

🧠 Core Concepts

Default Behavior (No Attributes)

<!-- ❌ BLOCKS everything -->
<script src="app.js"></script>

What happens:

HTML parsing stops
Script downloads
Script executes immediately
HTML parsing resumes

Impact: Slows First Contentful Paint, blocks rendering.

`defer` Attribute

<!-- ✅ NON-blocking, executes in order -->
<script src="app.js" defer></script>

What happens:

Download starts in parallel with HTML parsing
HTML parsing continues uninterrupted
Script executes after DOM is complete
Multiple deferred scripts run in order

Best for: Application scripts that need DOM access.

`async` Attribute

<!-- ✅ NON-blocking, executes immediately when ready -->
<script src="analytics.js" async></script>

What happens:

Download starts in parallel with HTML parsing
HTML parsing continues
Script executes as soon as download completes
May interrupt HTML parsing if downloaded early

Best for: Independent scripts (analytics, ads, widgets).

`async defer` (Both)

<!-- ⚠️ NOT RECOMMENDED -->
<script src="script.js" async defer></script>

What happens: async takes precedence, defer is ignored. Same as async only.

✅ When to Use Each Approach

Use `defer` for:

Application scripts that manipulate DOM
Scripts that depend on each other (maintains execution order)
Scripts that need DOM to be ready
Most JavaScript in modern web apps

<!-- ✅ Good: Deferred app scripts -->
<script src="react.js" defer></script>
<script src="app.js" defer></script>  <!-- Runs after React -->
<script src="utils.js" defer></script> <!-- Runs in order -->

Use `async` for:

Analytics and tracking scripts
Social media widgets
Ads and third-party scripts
Independent utilities that don't need DOM

<!-- ✅ Good: Async independent scripts -->
<script src="analytics.js" async></script>
<script src="facebook-pixel.js" async></script>
<script src="ads.js" async></script>

Never use both:

<!-- ❌ Don't do this -->
<script src="script.js" async defer></script>
<!-- Same as async only, defer ignored -->

🧪 Practical Examples

E-commerce Site Loading Strategy

<!DOCTYPE html>
<html>
<head>
    <!-- Critical CSS inline -->
    <style>body{margin:0}.loading{display:block}</style>
</head>
<body>
    <div class="loading">Loading...</div>

    <!-- ✅ Analytics (async - doesn't need DOM) -->
    <script src="analytics.js" async></script>

    <!-- ✅ Framework (defer - needs to load first) -->
    <script src="vue.js" defer></script>

    <!-- ✅ App code (defer - depends on framework) -->
    <script src="app.js" defer></script>

    <!-- ✅ Utilities (defer - may be needed by app) -->
    <script src="utils.js" defer></script>
</body>
</html>

Blog Site Loading Strategy

<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
    <!-- Minimal critical styles -->
</head>
<body>
    <header>Blog Header</header>
    <main>Content loads fast...</main>

    <!-- ✅ Ads (async - independent) -->
    <script src="ads.js" async></script>

    <!-- ✅ Comments widget (async - doesn't block content) -->
    <script src="comments.js" async></script>

    <!-- ✅ Syntax highlighting (defer - needs DOM ready) -->
    <script src="prism.js" defer></script>
</body>
</html>

Single Page Application (SPA)

<!DOCTYPE html>
<html>
<head>
    <title>SPA</title>
</head>
<body>
    <div id="app"></div>

    <!-- ✅ All app scripts deferred -->
    <script src="vendor.js" defer></script>
    <script src="app.js" defer></script>
    <script src="routes.js" defer></script>
</body>
</html>

⚠️ Limitations & Considerations

Execution Order Issues

<!-- ❌ Async scripts run out of order -->
<script src="jquery.js" async></script>
<script src="app.js" async></script> <!-- May run before jQuery! -->

<!-- ✅ Defer maintains order -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script> <!-- Runs after jQuery -->

DOMContentLoaded Timing

defer scripts run before DOMContentLoaded event
async scripts may run before or after DOMContentLoaded
Default scripts run immediately (block DOMContentLoaded)

Module Scripts

<!-- Modern ES modules are deferred by default -->
<script type="module" src="app.js"></script>
<!-- Same as: <script src="app.js" defer></script> -->

Browser Support

defer: IE 10+, all modern browsers
async: IE 10+, all modern browsers
Both attributes: async takes precedence in all browsers

📊 Performance Comparison

Attribute	Blocks HTML	Blocks Render	Execution Order	DOM Ready	Use Case
None	✅ Yes	✅ Yes	✅ Ordered	❌ Before	Legacy code
`defer`	❌ No	❌ No	✅ Ordered	✅ After	App scripts
`async`	❌ No	⚠️ Maybe	❌ Unordered	❓ Unpredictable	Widgets/ads

🔍 Summary

defer: Use for application JavaScript that needs DOM access and execution order
async: Use for independent scripts like analytics, ads, and third-party widgets
Never both: async defer is invalid - async takes precedence
Default: Avoid unless you have legacy requirements

Key Rule: If script needs DOM or depends on other scripts → defer. If script is independent → async.

🌐 Related Resources

Browser Rendering Path (general/browser_rendering.md) - How scripts affect rendering
Critical Rendering Path (general/critical_rendering_path.md) - Advanced optimization
ES6 Modules (js/general-concepts/es6_modules.md) - Modern module loading
Promises (js/promises/) - Async JavaScript patterns

Quick Quiz

Test your understanding with 3 quick questions

Q1What happens when you use both `async` and `defer` on the same script tag?

Q2Which attribute should you use for scripts that depend on each other and need to maintain execution order?

Q3When do scripts with the `defer` attribute execute?