How to load website resources asynchronously
Tags: javascript, webdev, programming
Published: 2022-07-16 18:31:58

Browsers load website resources synchronously by default.

This means web browser can do only one thing at a time - loading (downloading and execution) of something blocks the loading of something else.

![Synchronous example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9qq0b1or7obfyyfdubf.png)<br>

## 1. Concepts<br><br>

### 1.1. Async
**async** allows downloading of specified JS resources while the browser is doing something else and then execution of those resources immediately after the download is completed.

**Notes**

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

- To solve reader blocking issues

- Scripts should be executed asap

- Be careful to dependent resources<br>


![Async1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zma24xonl4viglgl8ryl.png)


![Async2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alqipwzh5jrypwsp5jol.png)<br><br>

### 1.2. Defer
**defer** allows downloading of the specified JS resources while the browser is doing something else and then execution of those resources after the HTML file rendering is completed.

**Notes**

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

- To solve reader blocking issues

- Ideal for scripts accessing DOM

- Good for dependent resources<br>


![Defer1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r1o7igtgf2mjcoj0pig.png)


![Defer2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jme2c5vuxyrhyzplm8su.png)<br><br>

### 1.3. Preload
HTML **preload** is a system that is used to give hits to web browsers about the resources/files (e.g., CSS, JS, images, and others) that _**will soon become necessary**_ to load a webpage. The preload hint is given by adding preload as the value of the **rel** attribute in the **<link>** element of those necessary resources.

**Notes**

```javascript
<link href="app.css" rel="preload">
```

- To load _**above the fold contents**_

- Available for font, css, JS, image, ...

- Preload many contents<br>


**Normal**
![Preload1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or17lxvt8jzvqlq8l3yd.png)

**Preload**
![Preload2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcn2mzjoocsuoo8z02v4.png)<br><br>

### 1.4. Server Push
HTTP/2 _**server push**_ allows downloading of specified resources while the browser is doing something else and then execution of those resources when they _**become necessary**_.

**Notes**

- To load _**above the fold contents**_

- Available for font, css, JS, image, ...

- Server Push many contents<br>


![Server Push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8w4jm8vjzfnpv36qeyu.png)<br><br>

---

## 2. Comparisons<br><br>

### 2.1. Between Async, Defer, Preload and Server Push

**Similarities**

They all allow **asynchronous downloading** of website resources.<br>
They all allow specified resources to be downloaded by the browsers simultaneously when it is doing something else.<br>

**Differences**
Downloaded files are **executed in different order**.

- **async** files are executed immediately after they are downloaded.

- **defer** files are executed after the parsing of the HTML document is completed.

- **preload** and **HTTP/2 server push** files are executed when they are necessary.<br><br>

### 2.2. Between Preload and Server Push

**Similarities**

- simultaneous downloading

- executed only when the files are necessary

- to load **above the fold contents**

- support multiple file formats - JS, CSS, image, etc

**Differences**

- **Preload** makes **request** to download those resources from the web server

- **Server Push** doesn't require making any of these **requests** - it allows web servers to automatically send these files alongside the main webpage (HTML file)<br><br>

### 2.3. Between (Async and Defer) vs (Preload and Server Push)

**Diferences**

**a. Supported file formats**

- async, defer: only JS files

- preload, server push: CSS, JS, image, etc

**b. Purpose**

- async, defer: to solve render-blocking issue, control over how the files are loaded

- preload, server push: download resources early<br><br>

**Thanks for reading!**