Script Async vs Defer

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

<!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>

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

<!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>

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.