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 a Script Asynchronously in HTML5 ?
Script tag is used to make the webpage dynamic, however heavy scripts can result in slow rendering of the webpage which ultimately results in poor user experience. To solve this issue, we asynchronously execute the scripts in the webpage i.e. the JavaScript is downloaded in parallel with other website elements and starts to execute as soon as it is completed.
To load scripts asynchronously two popular approaches are used
Async attribute The scripts are downloaded in parallel and start to execute as soon as downloading is complete.
Defer attribute The scripts are downloaded in parallel and only start to execute after the page parsing process is finished.
In absence of any of these attributes, the script starts to execute immediately after it is downloaded, also resulting in blocking the parsing process.
Async Attribute
The async attribute enables the browser to download the script in the background while continuing to parse the HTML document. As soon as the script finishes downloading, HTML parsing is paused and the script executes immediately.
Syntax
Following is the syntax for the async attribute
<script src="script.js" async></script>
async is a boolean attribute which is true when defined, else it is set to false by default.
Example
Following example demonstrates asynchronous script execution using the async attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Script Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>TutorialsPoint</h1>
<p>Page content loads without waiting for the script...</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" async></script>
<h3>Welcome to TutorialsPoint</h3>
<p>
This content appears immediately because the script downloads asynchronously.
The jQuery library loads in the background without blocking HTML parsing.
</p>
<button onclick="window.location.reload()" style="padding: 8px 16px; margin-top: 10px;">Reload Page</button>
</body>
</html>
The output shows all content loads immediately without waiting for the jQuery script to complete downloading
TutorialsPoint Page content loads without waiting for the script... Welcome to TutorialsPoint This content appears immediately because the script downloads asynchronously. The jQuery library loads in the background without blocking HTML parsing. [Reload Page]
Key Points About Async
Execution timing Scripts with the async attribute execute as soon as they finish downloading, regardless of their position in the HTML file or whether other resources have finished loading.
Execution order Multiple async scripts may execute in any order, not necessarily the order they appear in the HTML. This can cause issues if one script depends on another.
Non-blocking Scripts with async do not block page rendering, improving initial load time but potentially causing visual glitches if the script manipulates the DOM.
Defer Attribute
The defer attribute also allows the browser to download the script in parallel with HTML parsing. However, unlike async, deferred scripts wait until HTML parsing is completely finished before executing, and they maintain their document order.
Syntax
Following is the syntax for the defer attribute
<script src="script.js" defer></script>
defer is a boolean attribute which is true when defined, else it is set to false by default.
Example
Following example demonstrates script execution using the defer attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Script Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>TutorialsPoint</h1>
<p>Page content loads immediately while script downloads...</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<h3>Welcome to TutorialsPoint</h3>
<p>
This content appears immediately. The jQuery script downloads in parallel
but waits to execute until after all HTML is parsed.
</p>
<div id="status">Status: HTML parsing complete, script will execute now</div>
<button onclick="window.location.reload()" style="padding: 8px 16px; margin-top: 10px;">Reload Page</button>
</body>
</html>
The output displays all content immediately, with the deferred script executing only after HTML parsing completes
TutorialsPoint Page content loads immediately while script downloads... Welcome to TutorialsPoint This content appears immediately. The jQuery script downloads in parallel but waits to execute until after all HTML is parsed. Status: HTML parsing complete, script will execute now [Reload Page]
Demonstrating Script Dependencies
Following example shows how defer maintains execution order for dependent scripts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Dependencies Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Script Execution Order Test</h1>
<div id="output"></div>
<script defer>
// First script - defines a variable
window.message = "Hello from first script! ";
document.getElementById("output").innerHTML += "Script 1 executed<br>";
</script>
<script defer>
// Second script - uses the variable from first script
document.getElementById("output").innerHTML += window.message + "<br>";
document.getElementById("output").innerHTML += "Script 2 executed<br>";
</script>
<p>Both scripts execute in order after HTML parsing is complete.</p>
</body>
</html>
The defer attribute ensures the scripts execute in the correct order
Script Execution Order Test Script 1 executed Hello from first script! Script 2 executed Both scripts execute in order after HTML parsing is complete.
Comparison of Script Loading Methods
Following table summarizes the differences between normal, async, and defer script loading
| Attribute | Download | Execution | HTML Parsing | Execution Order |
|---|---|---|---|---|
| None (Normal) | Blocks HTML parsing | Immediate after download | Paused during download and execution | Document order |
| async | Parallel with HTML parsing | As soon as downloaded | Paused during execution only | Unpredictable |
| defer | Parallel with HTML parsing | After HTML parsing complete | Never paused | Document order preserved |
When to Use Async vs Defer
Use async For independent scripts like analytics, advertisements, or tracking codes that don't depend on other scripts or DOM elements.
Use defer For scripts that depend on the DOM being fully parsed, manipulate page elements, or have dependencies on other scripts.
Use neither For critical scripts that must execute before the page renders, though this should be avoided for performance reasons.
Conclusion
The async and defer attributes in HTML5 enable asynchronous loading of scripts, improving page performance by downloading scripts in parallel with HTML parsing. Use async for independent scripts that can execute immediately, and defer for scripts that need DOM access or depend on other scripts, as it preserves execution order.
555 Views
