What are defer and async attributes in <script> tag ?

Last Updated : 27 Feb, 2024

In this article, we will learn about the defer and async attributes in <script> tag.

In your webpage, two things are happening in your browser:

HTML Parsing
Loading of the scripts

Suppose the browser is loading your webpage, At that time, your browser is parsing the HTML document line by line and suddenly it encounters a script tag. Then the browser stops parsing at that time as it sees the script tag which fetches the script from the network, gets into your browser then runs that script. Now, the browser starts parsing after that script tag again. This situation creates a blocking nature which results in slow loading.

To overcome this situation, the script tag has introduced two boolean attributes: Defer and Async.

Defer: This attribute makes sure that all the scripts are downloaded but it will not be executed until the DOM is ready.

The process of loading the webpage using the defer attribute

Note: Defer attribute will load scripts in the order specified. It allows you to structure which script comes first.

Syntax:

<script src="" defer></script>

Example: In this example, we will see the use of defer.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title> 
      async and defer 
    </title> 
    <link rel="stylesheet" href="./style.css"> 
</head> 
  
<body> 
    <script src="./script.js" defer></script> 
    <script src="./script1.js"></script> 
    <script src="./script2.js"></script> 
</body> 
  
</html>

In the above code, we have created three javascript files (script 0, script 1, script 2). Each file has some functions. I add defer attribute in the ‘script.js’ file. Now, let’s see the output of this code.

Output:

The output of the above code (defer)

In the above image of the console, script 0 (contains defer attribute) is processed at the last which is good if you want to change the order of the processing and improve it.

Async: This attribute is preferred when the scripts included in the page are not dependent on each other. It is also very useful for loading scripts in the middle of the DOM which are already there.

the process of loading the webpage using the async attribute

Note: Async doesn’t guarantee the order. Suppose there are six scripts, any script can be executed at any time.

Syntax:

<script src="" async></script>

Example: In this example, we will see the use of the async attribute.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>async and defer</title> 
    <link rel="stylesheet" 
          href="./style.css" /> 
</head> 
  
<body> 
    <script src="./script.js" async></script> 
    <script src="./script1.js" async></script> 
    <script src="./script2.js" async></script> 
</body> 
  
</html>

In the above code, I have created three javascript files (script 0, script 1, script 2). Each file has some functions. I add the async attribute in all the javascript files. Now, let’s see the output of this code.

Output: