Defer vs Async Attributes
Tags: javascript, beginners, html, programming
Published: 2022-06-01 07:02:03

Async and Defer may look to have the same function but they are actually quite different. Usually its best to use Defer even though Async looks tastier😁. Though that's not to say you can't use Async. In this post I'll speak about what they both do and when you should use either one. So, let's begin.

<u>**SCRIPT TAG IN THE HEAD WITH NO ASYNC OR DEFER**</u>
Before we begin looking at script loading with async and defer, lets look at a script tag with none of them loaded in the head of the document. 

An example could look like this:

```
<head>
<script src = "index.js"></script>
</head>

```
When the browser is typically parsing an HTML document, it will stop parsing the HTML doc the moment it encounters a `<script>` tag in the head. The browser will be forced to download parse the entire `<script>` tag and evaluate it. Only then can the HTML parsing continue.

Here is a diagram I made to illustrate:
![A diagram of html parsing with script tag in the head](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83jnj1k9ydf3ap3xbg0n.jpg)

The problem is that large scripts can cause the DOM to stop loading. This can provide a very unsatisfactory user experience.

<u>**SCRIPT TAG IN THE BODY WITH NO ASYNC OR DEFER**</u>
However, when the `<script>` is placed at the end of the body tag, like so:

```
<head>
<title>JS Script Loading</title>
</head>
<body>
<p>Some Content</p>
<script>
</body>
```
The HTML parsing will be carried out first then the `<script>` is fetched and executed like so:

![A diagram of html parsing with script tag in the body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qzybr6ndexd8txm4q66.jpg)

<u>**SCRIPT LOADING IN THE HEAD WITH ASYNC**</u>
When loading `<script>` with Async the browser will fetch and download the `<script>` as it is parsing the HTML. It will only pause the HTML parsing when it wants to execute the `<script>`:


![A diagram of html parsing with script tag and async attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt7w1i7q7h1pkdvsu3po.jpg)

<u>**SCRIPT LOADING IN THE HEAD WITH DEFER**</u>
Jus like with Async, Defer will fetch and download the `<script>` as it parsing the HTML. However, Defer is different from Async in that it will complete the HTML parsing before it executes the script:


![A diagram of html parsing with script tag and defer attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmkavtnjhx11f65m2vxq.jpg)

<u>**DEFER vs ASYNC**</u>
Both Asnyc and Defer load scripts without blocking the DOM, but they have two main differences:

- Async does not load scripts in order while defer does.
This means that if you have three scripts loaded like this:

```
<script async src="script1.js"></script>
<script async src="script2.js"></script>
<script async src="script3.js"></script>
```
Async can randomize the order of execution while defer will respect the sequence order. 

- Defer waits for the [DOM (Document Object Model)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) while Async does not. Defer will wait for the DOM to fully load before it executes. Async will not. This means if your `script` requires the DOM you should use defer. If you use Async in this scenario you stand the chance that  element you need cannot be found which can lead to bugs.

Here are some general rules on when to use either:
1. If the script does not rely on any other scripts or if it does not require the DOM then you can use **Async**.
2. If you want to load scripts in the middle of your HTML you can use **Async**. Since the DOM is already present, the `script` can be executed immediately without any problems.
3. You should use **defer** for all other scripts because:
- It gets loaded ASAP which reduces load time.
- It respects the script order letting you structure which script will come first.
- It only executes once the DOM is ready.

<u>**CONCLUSION**</u>
In conclusion, it usually better to use defer because it has more  advantages over Async in most use cases even though Async can sound much better.

If you found this article useful or if you spotted an error drop me a line in the comments i'd love to hear you opnions😁.