Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Mar, 2022

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 having a 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:

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 if there are six scripts, any script can be executed at any time.

Syntax:

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

Example:

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:

The output of the above code (async)

In the above image of the console, the scripts are executing asynchronously and they have executed the above information.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!