How to Eliminate Render Blocking JavaScript using async and defer?
Tags: javascript, html, performance, webdev
Published: 2021-05-31 07:43:58

#### What is Render Blocking Resources?
Render blocking resources are static files, such as fonts, HTML, CSS, and **JavaScript** files, that are vital to the process of rendering a web page. When the browser encounters a render blocking resource, it stops downloading the rest of the resources until these critical files are processed.

---- 

#### What is `async` and `defer`?
`async` and `defer` attributes are two different ways of loading JavaScript. 

To understand `async` and `defer` first we need to understand how the **HTML** is parsed. 

**HTML** is parsed from top to bottom and if there is an 
`<img src="img.jpeg" />` tag in between it starts downloading the image in the background and the parsing will continue till it reaches the end. 

When it comes to **JavaScript** it acts a little differently, parsing starts from top to bottom but if it encounters `<script src="script.js"></script>` tag in between the script file gets downloaded and it **stops HTML parsing until it executes the script**. 

`async` and `defer` attributes allow us to modify how this flow works.


### Normal Parsing -
![Normal Parsing Image](https://res.cloudinary.com/duhbhavesh/image/upload/v1622436692/blogs/async-defer/Async_Defer-1_izjq2v.jpg)

In Normal parsing HTML file is parsed from top to bottom and when it reaches the `script` tag it **stops HTML parsing and downloads the script file and executes the script file**, after downloading and executing it then **continues parsing the HTML file**.

```html
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document</title>
      <script src="script.js"></script>
    </head>
  <body>
    ....
  </body>
</html>
```

_**Note**_: When you're not using the `async` or `defer` attribute it is advised that you should use the `<script></script>` tag before the `</body>` closing body tag.

----- 

### Async Parsing - 
![Async Parsing Image](https://res.cloudinary.com/duhbhavesh/image/upload/v1622436692/blogs/async-defer/Async_Defer-2_nf8ib3.jpg
)

In `async` parsing HTML file is parsed from top to bottom and when it reaches the `script` tag **instead of stopping, script file is downloaded in the background** and it **continues to parse the HTML file** 
While the script file is being downloaded in the background, as soon as the **script file is downloaded, HTML parsing is stopped and script file is executed and then it continues parsing the HTML file** till it reaches the end. 

script with `async` attribute can run anytime, there is no guarantee for when it runs, and it can run in any order because they are just downloaded in the background asynchronously, and as soon as they are done downloading they run immediately.

```html
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document</title>
      <script src="script.js" async></script>
    </head>
  <body>
    ....
  </body>
</html>
```
-----

### Defer Parsing -
![Defer Parsing Image](https://res.cloudinary.com/duhbhavesh/image/upload/v1622436692/blogs/async-defer/Async_Defer-3_jdva4j.jpg)

Parsing with `defer` attribute is very similar to `async` parsing, HTML file is parsed from top to bottom and when it reaches the `script` tag `script` file gets **downloaded in the background** and **HTML parsing continues** but **instead of executing** the script file after getting downloaded **it waits until the entire page of HTML is parsed** before it actually executes the script file.
Execution is deferred at the end with `defer` attribute.

```html
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document</title>
      <script src="script.js" defer></script>
    </head>
  <body>
    ....
  </body>
</html>
```
----

### So who's the winner? - 
It depends, 
use `defer` when the order of execution of scripts is important.
use `async` when the order of execution of scripts is not important.

----

### Summary
`async` and `defer` are the great script tag attributes that allow you to speed up the page loading. 
Both `async` and `defer` have one common thing: downloading of such scripts doesn’t block page rendering. So the user can read page content and get acquainted with the page immediately.

|async  |defer  |
|---	|---	|
|`async` attribute blocks the parsing of the page.|`defer` attribute never blocks the parsing of the page.   	|
|Execution of scripts can be non-sequential.   	|Execution of scripts is sequential.   	|
|Execution of scripts leads to pausing of HTML document parsing.   	|Execution of scripts is done when HTML document is completely parsed.  	|

_Thank you_ for making it till the end!