Async and Defer are two boolean attributes available in HTML5. These 2 attributes are used with the <script> tag in HTML to download JavaScript files asynchronously.
That means the browser will parse HTML while JavaScript files are being downloaded. This helps to increase website performance and reduce web page loading time.
On the other hand, if we download JavaScript files synchronously it blocks HTML parsing. If the JS file size is large then it might take some time. The browser does not show anything on the screen.
It is a very bad experience for the users as well as it is also bad for SEO (Search Engine Optimization).
If you want to know the difference between synchronous and asynchronous, you can read your complete tutorial about - Synchronous VS Asynchronous programming with examples.
In the article, I will show you the differences between async and defer in HTML <script> tag. You will also learn when and how you should use them and what would be the best choice for you.
Async VS Defer
With the async, the browser downloads JS files asynchronously while parsing HTML but as soon as the download is finished it stops parsing HTML and executes JavaScript. With the defer, the browser downloads JS files asynchronously while parsing HTML but only executes them when HTML parsing completes.
The browser completes JavaScript execution before the DOMContentLoaded event.
This is the main difference between async and defer. But there is another very important difference between these two attributes you should know about.
The async attribute does not maintain the file orders as they were used in the HTML file while executing them. But The defer attribute always maintains the order.
Let me give you an example to help you understand this concept.
In the above example, I will show you how the browser downloads JS files and execute them.
Without Any Attribute in Script Tag
If we use <script> tags without any attribute, the browser starts parsing HTML, and when it finds a <script> tag for large.js file it starts downloading the file and stops parsing HTML.
When the download is completed, it executes the file. Then it goes to the nest <script> tag for the small.js file. A similar process happens once again.
The browser downloads and executes the file. All this time, the browser does not parse any HTML so the user can not see anything on the screen.
It is very bad for user experience and SEO because if JS file size is large, it will take time to download within this time the user might leave your website without seeing anything.
With Async Attribute in Script Tag
If you use the async attribute in your <script> tags, the browser will parse HTML and download JS files in the background asynchronously at the same time.
In this example, the small.js file is smaller in size than the large.js file so it will be downloaded before the large.js file.
As soon as the file is downloaded, the browser will stop parsing HTML and start executing the file. In this case, it will execute small.js file before large.js file even though it was added after large.js script tag in HTML.
Because the async attribute does not care about the order. It executes the files as soon as they are downloaded.
So, you can see it also stops HTML parsing for a little time while executing JavaScript.
With Defer Attribute in Script Tag
If you add the defer attribute in your <script> tag, it also parses HTML and downloads JS files at the same time asynchronously as the async attribute.
But the difference is that the browser will not execute those JS files until HTML parsing is completed.
In the example, you can see browser downloads large.js and samll.js files in the background but only execute them after parsing HTML.
Most importantly, These files are being executed in order. First, the browser executes the large.js file then the small.js file.
How to Use Async in HTML Script Tag
It is very easy to use async attribute with your <script> tag in HTML. You just have to add the word async in your tag. This is a boolean attribute.
<html>
<head>
<title>How to use async attribute</title>
<script async src="large.js"></script>
<script async src="small.js"></script>
</head>
<body>
...
</body>
</html>
How to Use Defer in HTML Script Tag
You can use the defer attribute with your <script> tag similarly as you use the async attribute.
You need to add the word defer in your <script> tag because it is also a boolean attribute.
<html>
<head>
<title>How to use defer attribute</title>
<script defer src="large.js"></script>
<script defer src="small.js"></script>
</head>
<body>
...
</body>
</html>
Should You Use Async and Defer?
Day by day, everyone is considering user experience very seriously. Google also announced that user experience and loading time will be considered as ranking factors.
In HTML5 these 2 attributes were introduced to provide a better experience and reduce web page loading time.
It stops blocking HTML parsing so that users can see the content as soon as they visit the page and also download JavaScript in the background.
Yes, you should use async and defer attributes in your projects for better SEO and a higher ranking in Google search.
When and Where Do You Use Async and Defer?
In modern times, you should always use async and defer in your projects. Because user experience and fast webpage matter a lot.
Better experience and fast website also get higher ranking in Google search that means more visitors.
If you get more and more visitors to your website, you can generate more profit from your business.
Mostly we use these two attributes when we add our <script> tags to the HTML <head> tag. Because in this way the browser does not block HTML parsing and as well as it can download JS files asynchronously in the background.
Should You Add Scripts in the HTML Body?
In the earlier day, we used to add our <script> tags at the bottom of the <body> tag in our HTML files. Many people still follow this pattern.
But this pattern has a drawback many of us don't know.
The drawback is, as we put our scripts at the bottom the browser parses HTML easily because nothing blocks it. So users can see the content.
But if any part of the content depends on JavaScript, that part will not work. For example, there is a button, and when a user clicks the button it uses JavaScript to show something.
In this case, this button will not work because HTML content is ready but JS files are not downloaded and executed yet as they are at the bottom of the page.
When HTML parsing is over, the browser starts downloading those files and then executes them.
If your application does not have such requirements you can follow this old pattern or I would prefer to add my scripts in the <head> tag with async or defer attribute.
How do async and defer help to solve this issue?
With async and defer JS files get downloaded without blocking the HTML parsing. The async blocks parsing for a little time while executing JavaScript but your HTML button gets access to JavaScript quickly.
The defer attribute executes JavaScript after parsing HTML but it downloads those JS files while parsing. Now it will just execute them in order before the DOMContentLoaded event so your button can use JavaScript.
Async and Defer in Dynamic Scripts
You can add your <script> tags to your page dynamically using JavaScript. You have to create a script element and add it to the document.
let script = document.createElement('script');
script.src = "large.js";
document.head.appendChild(script);
The above code will create a script tag and append it to the document head. But this script tag will follow async rules by default.
That means when this file is downloaded, it will start executing. It will not wait for anything.
You can change this default behavior by setting script.async = false while creating the script tag. Then it will behave like defer attribute.
function addScript(src) {
let script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
}
addScript("large.js");
addScript("small.js");
Here I am adding two script tags for large.js and small.js files. As I have used script.async = false both of them will behave like defer.
- Both files will be downloaded in the background but will be executed after HTML parsing.
- First, the browser will execute
large.jsfile. - Then it will execute the
small.jsfile.
Is Defer Faster Than Async?
Both of them are pretty fast compared to the normal <script> tag. But if we look at the behaviors of async and defer, we find both downloads JS files asynchronously.
But async executes them blocking HTML parsing on the other hand defer executes them after HTML parsing completes.
By testing and comparing both of them it seems like defer provides a smoother experience than async. Most of the time users will not feel any difference between them.
Both of them have their own usages. In some case, async perform better in other case defer provide better performance.
Should You Use Async or Defer?
Finally, if you want to know which attribute you should pick, you need to know the requirements of your application. You can check the following criteria before choosing any of them:
- As
asyncdoes not follow the order, if your JS files do not depend on another file then you can use this. If your JS files depend on one another then go with thedefer. - If your DOM or your content does not need access to JavaScript immediately then
asyncis a good choice. Otherwise, you should usedefer. - If you don't want to block the HTML parsing at all then you must choose
defer. Because async will block parsing while executing JavaScript. But defer only execute JavaScript when parsing completes.
Can You Use Async and Defer Together?
Yes, it is possible to use async and defer to a <script> tag together. But it is not a good practice.
If you set both of them to a <script> tag most browsers will ignore defer attribute. The async attribute always has a higher priority.
So in this case, your scripts will not maintain order and will be executed as soon as the download completes.
It might break your application if the DOM needs JavaScript or one file is dependent on another.
Conclusion
In this article, I have discussed everything about async and defer attributes in the script tag. Now you know the differences between async and defer.
Both of them have their own usages. It mainly depends on the requirements of your application. So before choosing any of them check the need of your application and follow the best practices.
