Difference Between Async & Defer Attributes in HTML
Last Updated :
07 Feb, 2024
The async and defer attributes on a <script> tag in HTML are used to control the loading and execution behavior of external JavaScript files. While both of them have their own set of advantages and disadvantages, one should know which attribute is used at the right time. The difference between the async and defer attributes in HTML are as follows.
Async attribute
Including the async attribute in the script, the tag tells the browser to start loading the script files immediately parallel to the HTML parsing process. It does not block the HTML parsing process when the script file is being loaded. After the script files are loaded, the execution of these files is done asynchronously, which means it will not wait for the HTML parsing process to complete. If there are many external script files with async attributes then loading them all asynchronously speeds up the page loading time. These multiple scripts may execute in any order relative to each other and the HTML document’s parsing.
Syntax:
<script src="script.js" async></script>
Example: Consider an HTML file index.html having an async attribute in the script tag of HTML and a JavaScript file named Script.Js with a console message.
Javascript
console.log(
"The content in script.js file is executing asynchronously.");
|
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Async Attribute Example</title>
<script async src="script.js"></script>
</head>
<body>
<p>
This is an example demonstrating the
usage of async attribute.
</p>
</body>
</html>
|
Output
The content in script.js file is executing asynchronously.
Defer attribute
Including the defer attribute in the script tag tells the browser to start the execution of script files after the completion of the HTML parsing process. Similar to the async attribute it fetches the loaded script files immediately but does not start the execution until HTML parsing is completed. After the completion of HTML parsing and the DOM tree is generated, the execution of scripts happens in the order they appear in a document. If there are many scripts with defer attributes then they are executed in the order they appear in the document.
Syntax:
<script src="index.js" defer></script>
Example: Consider an HTML file index.html having a defer attribute in the script tag of HTML and a JavaScript file named Script.Js with a console message.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Defer Attribute Example</title>
<script defer src="script.js"></script>
</head>
<body>
<p>
This is an example demonstrating the
usage of defer attribute.
</p>
</body>
</html>
|
Output:
This is an example demonstrating the usage of defer attribute.
Difference between async and defer attributes:
The script files are loaded asynchronously without blocking the HTML parsing when we use either of the attributes. However, they are used for serving different purposes and there are different scenarios where each of them is used. Below is a list of differences between async and defer attributes.
|
Async Attribute
|
Defer Attribute
|
|
Async attribute when set the scripts are downloaded parallel with the HTML parsing and the execution of the scripts starts immediately when they are available.
|
Defer attribute when set the scripts are downloaded parallel with the HTML parsing, but the execution of the scripts starts after the page has finished parsing completely.
|
|
Async attribute loads and executes the script files as soon as they are available regardless of whether HTML parsing is complete or not.
|
The defer attribute waits for the HTML parsing to start the execution of the script files.
|
|
The async attribute is useful for scripts that can execute independently and do not rely much on DOM elements or another script.
|
The defer attribute is commonly used when you want to ensure that scripts execute in the correct order, or when you want to defer script execution until after the HTML document has been fully loaded.
|
|
The Async attribute is used mostly to improve performance by avoiding render blocking. The Async attribute helps in loading the page more quickly.
|
Defer attribute is useful when you want to ensure that scripts execute in a specific order.
|
|
For instance, external scripts used for services such as Google Analytics are marked as async so that they do not delay the loading of the content of the main page.
|
For instance, scripts that depend on the DOM( Document Object Model), such as scripts that manipulate or interact with elements on the page, must use the defer attribute to ensure that they execute after the DOM is ready.
|
Conclusion
When using async and defer attributes there is no change in loading behavior of the files. Both of them allow to load the files without render blocking. However, the difference lies in their behaviour when executing. Both async and defer attributes are used for loading and execution of external script files only. If neither of them is present then the scripts will be downloaded and executed without waiting until HTML parsing. Most of the time, it makes no difference which attribute you use in the <script> tag along with src, both will increase speed by letting the browser continue parsing while script files are loaded.
Share your thoughts in the comments
Please Login to comment...