Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the role of deferred scripts in JavaScript?
The defer attribute in JavaScript is a crucial performance optimization tool that controls when scripts execute during page loading. It ensures scripts run only after the HTML document has been completely parsed, preventing blocking behavior that can slow down page rendering.
The Problem with Regular Scripts
When a browser encounters a regular <script> tag, it stops HTML parsing, downloads the script, executes it, and then continues parsing. This blocking behavior creates performance bottlenecks and delays page rendering.
How Defer Attribute Works
The defer attribute tells the browser to:
Download the script in parallel while continuing HTML parsing
Wait until HTML parsing is complete before executing the script
Execute deferred scripts in the order they appear in the document
Maintain script dependency order for better reliability
Syntax
<script defer src="script.js"></script>
Example: Basic Defer Usage
<!DOCTYPE html>
<html>
<head>
<title>Defer Example</title>
</head>
<body>
<h1>Page Content</h1>
<script defer>
alert("This script runs after HTML parsing is complete");
</script>
<p>This paragraph loads first, even though the script appears before it.</p>
</body>
</html>
Example: Multiple Deferred Scripts
<!DOCTYPE html>
<html>
<head>
<title>Multiple Defer Scripts</title>
</head>
<body>
<h1>Understanding Script Order</h1>
<script defer>
console.log("First deferred script");
</script>
<script defer>
console.log("Second deferred script");
</script>
<p>HTML content loads first</p>
</body>
</html>
First deferred script Second deferred script
Defer vs Async Comparison
| Attribute | Blocks HTML Parsing? | Execution Order | Best For |
|---|---|---|---|
| None (Regular) | Yes | Immediate | Critical inline scripts |
defer |
No | Document order | Scripts that need DOM ready |
async |
No | Load completion order | Independent scripts (analytics) |
DOM Manipulation Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Ready with Defer</title>
</head>
<body>
<script defer>
// This works because DOM is fully parsed
document.getElementById("content").style.color = "blue";
</script>
<div id="content">This text will turn blue</div>
</body>
</html>
Key Benefits
Improved Performance: Non-blocking script loading speeds up initial page render
DOM Availability: Scripts can safely access DOM elements without waiting for load events
Predictable Order: Multiple deferred scripts execute in document order
Better User Experience: Users see content faster while scripts load in background
Conclusion
The defer attribute is essential for optimizing JavaScript loading performance. It prevents render-blocking while ensuring scripts execute after DOM parsing is complete, making it ideal for scripts that manipulate page content.
2K+ Views
