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
How to execute the script when the page has finished parsing in HTML?
The defer attribute in HTML allows scripts to execute only after the HTML document has been completely parsed. This ensures that the script runs when the DOM is ready but before the DOMContentLoaded event fires.
Syntax
Following is the syntax for using the defer attribute −
<script src="script.js" defer></script>
The defer attribute is a boolean attribute that only works with external scripts (scripts with a src attribute). It has no effect on inline scripts.
How the Defer Attribute Works
When the browser encounters a script with the defer attribute, it downloads the script in parallel while continuing to parse the HTML document. The script execution is postponed until the HTML parsing is complete. Multiple deferred scripts execute in the order they appear in the document.
Using Defer with External JavaScript
The defer attribute is most commonly used with external JavaScript files. Let us create a simple external script and see how defer works.
Creating the JavaScript File
First, create a JavaScript file named script.js −
function sayHello() {
alert("Hello World! Script executed after HTML parsing.");
}
// Execute function when script loads
sayHello();
Example − Basic Defer Usage
Following example demonstrates the defer attribute with an external script −
<!DOCTYPE html>
<html>
<head>
<title>Defer Attribute Example</title>
<script>
// This inline script executes immediately
console.log("1. Inline script in head executed");
</script>
<script defer>
// Defer has no effect on inline scripts
console.log("2. Inline defer script executed immediately");
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Defer Attribute Demo</h1>
<p>This page demonstrates script execution order.</p>
<script>
console.log("3. Inline script in body executed");
document.write("<p>Body script executed during HTML parsing.</p>");
</script>
</body>
</html>
The console output shows that inline scripts execute immediately, regardless of the defer attribute −
1. Inline script in head executed 2. Inline defer script executed immediately 3. Inline script in body executed Body script executed during HTML parsing.
Example − DOM Manipulation with Defer
Following example shows how defer ensures the DOM is ready for manipulation −
<!DOCTYPE html>
<html>
<head>
<title>Defer with DOM Manipulation</title>
<script defer>
// Simulating external script behavior
console.log("Deferred script: DOM is ready");
document.getElementById("content").innerHTML = "Content updated by deferred script!";
document.getElementById("status").textContent = "? Script executed successfully";
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>DOM Manipulation with Defer</h1>
<div id="content">Original content</div>
<p id="status">? Waiting for script...</p>
<script>
console.log("Inline script: Element exists?", !!document.getElementById("content"));
</script>
</body>
</html>
The deferred script successfully updates the DOM elements because it runs after the HTML is fully parsed −
DOM Manipulation with Defer Content updated by deferred script! ? Script executed successfully
Multiple Deferred Scripts
When multiple scripts have the defer attribute, they execute in the order they appear in the document. This maintains script dependencies even with deferred execution.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Deferred Scripts</title>
<script defer>
// First deferred script
console.log("Script 1: Setting up variables");
window.message = "Hello from Script 1";
</script>
<script defer>
// Second deferred script
console.log("Script 2: Using variables from Script 1");
document.getElementById("output").textContent = window.message + " - processed by Script 2";
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Multiple Deferred Scripts</h1>
<p id="output">Loading...</p>
</body>
</html>
Both scripts execute in order after HTML parsing, maintaining their dependency relationship −
Multiple Deferred Scripts Hello from Script 1 - processed by Script 2
Comparison of Script Loading Attributes
| Attribute | Download | Execution | HTML Parsing |
|---|---|---|---|
| None (default) | Blocks parsing | Immediate | Paused during script |
| async | Parallel | As soon as downloaded | Paused during execution |
| defer | Parallel | After HTML parsing | Continues uninterrupted |
When to Use Defer
Use the defer attribute when −
-
Your script needs to access or manipulate DOM elements.
-
Script execution order is important (maintaining dependencies).
-
You want to improve page load performance without breaking functionality.
-
The script is not critical for initial page rendering.
Note − The defer attribute only works with external scripts that have a src attribute. It has no effect on inline scripts or scripts without a source file.
Conclusion
The defer attribute is an effective way to improve page loading performance while ensuring scripts execute after HTML parsing is complete. It maintains execution order for multiple deferred scripts and provides a reliable way to run DOM-dependent code without using additional event listeners.
440 Views
