Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
By default, when the browser encounters a <script> tag, it stops everything: HTML parsing stops, rendering stops, and the user sees a blank page until the script downloads and executes. This is terrible for performance!
Normal script tags are render-blocking. The browser can't show anything to users until all scripts finish downloading and executing.
<script src="app.js"></script> ← Blocks everything! ❌Use async or defer attributes to load scripts without blocking the page!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Normal Script (Blocking)</title>
</head>
<body>
<!-- Script in head blocks rendering -->
<div class="container">
<h1>❌ Normal Script (Blocking)</h1>
<div class="warning-badge">⚠️ Blocks Page Rendering</div>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-number">1</div>
<div class="timeline-text">HTML parsing starts...</div>
</div>
<div class="timeline-item">
<div class="timeline-number">2</div>
<div class="timeline-text">❌ Encounters <script> - STOPS everything!</div>
</div>
<div class="timeline-item">
<div class="timeline-number">3</div>
<div class="timeline-text">Downloads and executes script (2s delay)</div>
</div>
<div class="timeline-item">
<div class="timeline-number">4</div>
<div class="timeline-text">Finally resumes HTML parsing</div>
</div>
<div class="timeline-item">
<div class="timeline-number">5</div>
<div class="timeline-text">Page becomes visible</div>
</div>
</div>
<div class="problem-box">
<div class="problem-title">😢 The Problem</div>
<div class="problem-text">
The page was blank for 2+ seconds while the script executed!
Users see nothing until the script finishes. This creates a terrible user experience.
</div>
</div>
</div>
</body>
</html>Loading preview...
<script async src="analytics.js"></script> <script async src="ads.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Script Loading</title>
<!-- Async script downloads in parallel, executes immediately when ready -->
<script async src="https://cdn.example.com/analytics.js"></script>
</head>
<body>
<div class="container">
<h1>⚡ Async Script Loading</h1>
<div class="success-badge">✅ Non-Blocking & Parallel</div>
<p style="margin-bottom: 20px; color: #4b5563;">
The page loads immediately while scripts download in parallel!
</p>
<div class="parallel-flow">
<div class="flow-column">
<div class="flow-title">HTML Parsing</div>
<div class="flow-item">⏩ Parsing continues...</div>
<div class="flow-item">⏩ Building DOM...</div>
<div class="flow-item">⏩ Rendering page...</div>
<div class="flow-item">✅ Page visible!</div>
</div>
<div class="flow-column">
<div class="flow-title">Script (Parallel)</div>
<div class="flow-item">📥 Downloading...</div>
<div class="flow-item">📥 Downloading...</div>
<div class="flow-item">✅ Ready!</div>
<div class="flow-item">⚡ Executes immediately</div>
</div>
</div>
<div class="benefit-box">
<div class="benefit-title">🎯 Perfect For</div>
<div class="benefit-text">
Async is ideal for scripts that don't depend on the DOM or other scripts:
</div>
<div class="use-case">
<div class="use-case-title">Use Cases:</div>
<ul style="margin-left: 20px; color: #4338ca;">
<li>Analytics scripts (Google Analytics, Plausible)</li>
<li>Advertising scripts</li>
<li>Social media widgets</li>
<li>Independent third-party scripts</li>
</ul>
</div>
</div>
</div>
</body>
</html>Loading preview...
<script defer src="app.js"></script> <script defer src="utils.js"></script> <script defer src="main.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Script Loading</title>
<!-- Defer script downloads in parallel, waits for HTML parsing to complete -->
<script defer src="app.js"></script>
<script defer src="utils.js"></script>
<script defer src="main.js"></script>
</head>
<body>
<div class="container">
<h1>🎯 Defer Script Loading</h1>
<div class="success-badge">✅ Ordered & DOM-Safe</div>
<p style="margin-bottom: 20px; color: #4b5563;">
Scripts download in parallel but execute in order after HTML is parsed!
</p>
<div class="execution-order">
<div class="order-title">Execution Timeline:</div>
<div class="order-item">
<div class="order-number">1</div>
<div class="order-text">HTML parsing starts</div>
</div>
<div class="order-item">
<div class="order-number">2</div>
<div class="order-text">
<span class="highlight">Scripts download in parallel</span> (non-blocking)
</div>
</div>
<div class="order-item">
<div class="order-number">3</div>
<div class="order-text">HTML parsing continues uninterrupted</div>
</div>
<div class="order-item">
<div class="order-number">4</div>
<div class="order-text">
<span class="highlight">HTML parsing completes</span> - DOM ready!
</div>
</div>
<div class="order-item">
<div class="order-number">5</div>
<div class="order-text">
Scripts execute <span class="highlight">in order</span>: app.js → utils.js → main.js
</div>
</div>
<div class="order-item">
<div class="order-number">6</div>
<div class="order-text">DOMContentLoaded event fires</div>
</div>
</div>
<div class="benefit-box">
<div class="benefit-title">🏆 Why Defer is Usually Best</div>
<div class="benefit-text">
<strong>1. Maintains execution order</strong> - Scripts run in the order they appear<br>
<strong>2. DOM is ready</strong> - All HTML elements are available<br>
<strong>3. Non-blocking</strong> - Downloads happen in parallel<br>
<strong>4. Predictable</strong> - Consistent behavior across browsers
</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Loading Comparison</title>
</head>
<body>
<div class="container">
<h1>📊 Script Loading Comparison</h1>
<div class="comparison-grid">
<!-- Normal -->
<div class="card normal-card">
<div class="card-header">
<div class="card-icon normal-icon">❌</div>
<div class="card-title">Normal</div>
</div>
<div class="syntax"><script src="file.js"></div>
<div class="pros-cons">
<h4>❌ Downsides:</h4>
<ul>
<li>❌ Blocks HTML parsing</li>
<li>❌ Blocks page rendering</li>
<li>❌ Slow page load</li>
<li>❌ Poor user experience</li>
</ul>
</div>
<div class="pros-cons">
<h4>✅ Use When:</h4>
<ul>
<li>• Never (use defer instead)</li>
</ul>
</div>
<div class="recommendation">⛔ Avoid This</div>
</div>
<!-- Async -->
<div class="card async-card">
<div class="card-header">
<div class="card-icon async-icon">⚡</div>
<div class="card-title">Async</div>
</div>
<div class="syntax"><script async src="file.js"></div>
<div class="pros-cons">
<h4>✅ Benefits:</h4>
<ul>
<li>✅ Non-blocking download</li>
<li>✅ Executes immediately when ready</li>
<li>✅ Fast initial page load</li>
</ul>
</div>
<div class="pros-cons">
<h4>⚠️ Watch Out:</h4>
<ul>
<li>⚠️ Unpredictable execution order</li>
<li>⚠️ DOM might not be ready</li>
</ul>
</div>
<div class="recommendation">👍 For Independent Scripts</div>
</div>
<!-- Defer -->
<div class="card defer-card">
<div class="card-header">
<div class="card-icon defer-icon">🎯</div>
<div class="card-title">Defer</div>
</div>
<div class="syntax"><script defer src="file.js"></div>
<div class="pros-cons">
<h4>✅ Benefits:</h4>
<ul>
<li>✅ Non-blocking download</li>
<li>✅ Maintains execution order</li>
<li>✅ DOM is fully loaded</li>
<li>✅ Predictable behavior</li>
</ul>
</div>
<div class="pros-cons">
<h4>🎯 Use When:</h4>
<ul>
<li>• Scripts depend on DOM</li>
<li>• Scripts depend on each other</li>
<li>• Most application code</li>
</ul>
</div>
<div class="recommendation">🏆 Best Choice (Usually)</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
When: Almost never!
Exception: Only if the script MUST execute before anything else (very rare)
When: The script is completely independent
Examples: Analytics, ads, social widgets
Key question: "Does this script need the DOM or other scripts?" If NO → use async
When: For all your application code
Examples: App logic, UI components, utilities
Key question: "Does this script need the DOM or depends on other scripts?" If YES → use defer
Async & Defer: Universally supported in all modern browsers
Safe to use in production without any fallbacks!