# Script Async vs Defer

<figure><img src="https://1374779285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFW3x2aqEO8GF2kr3VU%2Fuploads%2FoGxfbMPzLYumOMelkuZf%2Fimage.png?alt=media&#x26;token=a9ae8479-15b1-40eb-a098-22a85275bb08" alt=""><figcaption></figcaption></figure>

## Overview

* Initially, when the script file will be executed in sequence, and wait for the end of execution of script file and then parse html page continuously

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Parsing Sequence Example</title>
</head>
<!-- Include script1.js and script2.js without async or defer attributes -->
<script src="script1.js"></script>
<body>
    <script>console.log("test")</script>
    <h1>Script Parsing Sequence Example</h1>
    <p>This is the content before the scripts are executed.</p>
</body>
<script src="script2.js"></script>
</html>
```

<figure><img src="https://1374779285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFW3x2aqEO8GF2kr3VU%2Fuploads%2Fg5EtmJmePHHRyv6vNr0I%2Fimage.png?alt=media&#x26;token=36fdbb92-8854-4393-9226-daf0b9e5bc03" alt=""><figcaption></figcaption></figure>

## Async

* The script will be downloaded on background without stopping the parsing of html file
* Once finished downloading, the script file will be executed immediately
* However, the sequence of execution is uncertain
* Suitable for the script file then can be executed independently, e.g: GA

## Defer

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Parsing Sequence Example</title>
</head>
<!-- Include script1.js and script2.js without async or defer attributes -->
<script src="script1.js" defer></script>
<script src="script2.js"></script>
<body>
    <script>console.log("test")</script>
    <h1>Script Parsing Sequence Example</h1>
    <p>This is the content before the scripts are executed.</p>
</body>

</html>
```

<figure><img src="https://1374779285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFW3x2aqEO8GF2kr3VU%2Fuploads%2FHRawnhOYm3KVbJQmxldH%2Fimage.png?alt=media&#x26;token=bdba1993-5821-408f-b102-c62f5907f930" alt=""><figcaption></figcaption></figure>

* The script will be downloaded in the background without stopping the parsing of html file
* After the parsing of html file, the downloaded scripts will be executed in sequence
* Suitable for the script file that rely on html dom, such as built react script

## HTML Loading

The lifecycle of an HTML page has three important events:

* `DOMContentLoaded` – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures `<img>` and stylesheets may not yet have loaded.
* `load` – not only HTML is loaded, but also all the external resources: images, styles etc.
* `beforeunload/unload` – the user is leaving the page.

Each event may be useful:

* `DOMContentLoaded` event – DOM is ready, so the handler can lookup DOM nodes, initialize the interface.
* `load` event – external resources are loaded, so styles are applied, image sizes are known etc.
* `beforeunload` event – the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave.
* `unload` – the user almost left, but we still can initiate some operations, such as sending out statistics.

## Reference

{% embed url="https://gcdeng.com/blog/script-tag-async-defer-attributes" %}

{% embed url="https://medium.com/schaoss-blog/02-html-script-tag-%E5%8A%A0%E4%B8%8A-async-defer-%E7%9A%84%E5%8A%9F%E8%83%BD%E5%8F%8A%E5%B7%AE%E7%95%B0-8205fddbbafc" %}
