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.

Reference

Logo[前端優化系列] 使用async, defer屬性加速網頁載入時間 | Eric Deng
Logo前端三十｜02. [HTML] script tag 加上 async & defer 的功能及差異？Schaos’s Blog
PreviousJavaScriptNextModule

Last updated

Was this helpful?