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 set the script to be executed asynchronously in HTML?
The async attribute in HTML allows external JavaScript files to execute asynchronously, meaning the script runs as soon as it finishes downloading without blocking the HTML parsing. This improves page loading performance by preventing scripts from delaying the rendering of other page content.
Syntax
Following is the syntax for using the async attribute −
<script src="filename.js" async></script>
The async attribute is a boolean attribute that only works with external scripts (scripts with a src attribute). It cannot be used with inline scripts.
How Async Scripts Work
When a browser encounters a <script> tag with the async attribute, it continues parsing the HTML while downloading the script in parallel. Once the script finishes downloading, it executes immediately, potentially interrupting the HTML parsing process.
Basic Async Script Example
First, create an external JavaScript file named demo.js −
function sayHello() {
alert("Hello World from Async Script!");
}
// Execute function when script loads
sayHello();
Now use the async attribute to load this script asynchronously −
<!DOCTYPE html> <html> <head> <title>Async Script Example</title> <script src="demo.js" async></script> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Async Script Demo</h1> <p>This content loads immediately while the script runs in parallel.</p> <p>The script alert may appear before or after this content is visible.</p> </body> </html>
The page content displays immediately while the script downloads and executes asynchronously. The alert may appear at any time during page loading.
Multiple Async Scripts
When using multiple async scripts, they execute in the order they finish downloading, not in the order they appear in the HTML −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Async Scripts</title>
<script async>
// Inline script to demonstrate timing
console.log("Inline script executed");
</script>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Multiple Scripts Demo</h1>
<p>Check the browser console to see script execution order.</p>
<p>Async scripts may execute in any order based on download speed.</p>
</body>
</html>
Each async script runs as soon as it downloads, which means script2.js might execute before script1.js if it downloads faster.
Async vs Defer vs Regular Scripts
Following are the key differences between async, defer, and regular script loading −
| Script Type | Download | Execution | HTML Parsing |
|---|---|---|---|
Regular <script>
|
Blocks HTML parsing | Immediate after download | Paused during download and execution |
<script async> |
Parallel with HTML parsing | Immediate after download | Paused only during execution |
<script defer> |
Parallel with HTML parsing | After HTML parsing completes | Never paused |
Practical Use Case
Following example shows a practical use case where async is beneficial for loading analytics or tracking scripts −
<!DOCTYPE html>
<html>
<head>
<title>Async Analytics Example</title>
<script async>
// Simulated analytics script
function trackPageView() {
console.log("Page view tracked at: " + new Date().toLocaleTimeString());
}
// Track when script loads
window.addEventListener('load', trackPageView);
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Welcome to Our Website</h1>
<p>This main content loads immediately without waiting for analytics.</p>
<p>Check the browser console to see when tracking occurs.</p>
<button onclick="console.log('Button clicked')">Click Me</button>
</body>
</html>
The page content loads immediately while the analytics script executes asynchronously in the background.
Welcome to Our Website This main content loads immediately without waiting for analytics. Check the browser console to see when tracking occurs. [Click Me] Console output: "Page view tracked at: 10:23:45 AM"
When to Use Async
Use the async attribute when −
-
The script is independent and doesn't depend on other scripts or DOM elements.
-
You want to load analytics, ads, or tracking scripts without blocking page rendering.
-
The script can execute at any time during page load without affecting functionality.
-
You need to improve page load performance for non-critical scripts.
Avoid async when the script needs to manipulate DOM elements that may not have loaded yet, or when script execution order matters for your application.
Conclusion
The async attribute enables external scripts to download and execute in parallel with HTML parsing, improving page load performance. Use async for independent scripts like analytics or ads, but avoid it when script execution order or DOM manipulation timing is critical to your application.
176 Views
