Async Vs Defer In Javascript
Tags: javascript, codenewbie, 100daysofcode, functional
Published: 2021-01-31 01:32:41

Hello developers!!🤓🤓 If you ever design a dynamic webpage then I'm sure you definitely encounter the `<script>` tag at least once while coding.

> The `<script>` tag is used to embed a client-side script (JavaScript). It either contains scripting statements, or it points to an external script file through the src attribute.

In this article, we'll discuss the **async** & **defer** attribute of the `<script>` tag. But before that, we'll discuss what happens in a browser when you load a webpage.

We will cover the following concepts:
- Introduction
- Normal `<script>` tag
- The **async** Attribute
- The **defer** Attribute
- Which one to use?

Let's get started🚀🚀!!

## Introduction

When you load a webpage then there are two major things happening in your browsers: 
- HTML Parsing
- Loading of the scripts

Loading of the scripts contain two parts:
- Fetching the script from the network.
- Executing the script line by line.

The `<script>` element has two attributes, **async** and **defer**, that can give us more control over how and when external files are fetched and executed.

> **async** and **defer** are boolean attributes that are used along with the `<script>` tag to load the external scripts efficiently into your webpage.

## Normal `<script>` tag

Suppose your browser is parsing the HTML and then it encounters the `<script>` tag.


```javascript
<html>
<head> ... </head>
<body>
    ...
    <script src="script.js">
    ....
</body>
</html>
``` 

In the case of the normal `<script>` tag following steps takes place:

- JS blocks the parsing of HTML
- fetches the script from the network
- Executes the script
- HTML parsing is started only after the script is fully executed.


![normal script tag.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612053909288/AAWBNfo1x.png)

## The **async** Attribute

The **async** attribute is used to indicate to the browser that the script file can be executed *asynchronously*. 

```javascript
<script async src="script.js">

``` 

- While using the **async** attribute, meanwhile, the HTML parsing is going on, any of the script with the **async** attribute is fetched from the network *asynchronously* along with the HTML parsing.

- As soon as scripts are fetched & available in the network, HTML parsing stops & scripts start executing.

- Once the scripts are executed, the HTML parsing continues like regular.


![async.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612054457243/mwDyBcmTI.png)

## The **defer** Attribute

The **defer** attribute tells the browser to only execute the script file once the HTML document has been fully parsed.


```javascript
<script defer src="script.js">
``` 

In the case of **defer**:

- HTML parsing goes on and scripts are fetched in parallel.
- Scripts are only executed once the HTML parsing is complete.


![defer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612054790010/lwGWfRqDy.png)


## Which one to use?

> **async** attribute does not guarantee the order of execution of scripts but **defer** does.

If you are putting multiple **async** attribute in script tags which is dependent on each other, then **async** attribute does not guarantee that these scripts are executed in a particular order. It can break your code. So in this case you probably prefer **defer**.

> **defer** attribute is not supported in an old browser 

So for this, we can use an alternative solution which is to use the `<script>` tag just before the `<body>` tag of the HTML file.

## Wrap Up !!

Thank you for your time !! Let's connect to learn and grow together.

[LinkedIn](https://www.linkedin.com/in/anuradha-aggarwal-4a2751107/) [Twitter](https://twitter.com/Anuradh06359394)

[![Buy-me-a-coffee](https://cdn.buymeacoffee.com/buttons/v2/default-blue.png)](https://www.buymeacoffee.com/anuradha2612)