JavaScript Loading Strategies in Web Page: async and defer

<script> tags are used to download and execute JavaScript on a web page.

Consider these three operations on a web page:

• HTML Parsing

• JavaScript Download

• JavaScript Execution

We can manipulate the sequence of these phases using the following attributes in the <script> tag:

• async (<script async src=''></script>)

• defer (<script defer src=''></script>)

Default Behavior:

By default (<script src=''></script>), the script tag blocks HTML parsing until the JavaScript is downloaded and executed. This means that the browser will stop parsing the HTML, download the script, execute it, and then resume parsing the HTML.

async and defer Behavior:

Both async and defer do not block HTML parsing during the JavaScript download. The script download and HTML parsing happen simultaneously.

• defer ensures that the JavaScript is executed after the HTML parsing is completed. This means that all deferred scripts are executed in the order they appear in the document, but only after the entire HTML has been parsed.

• async ensures that the JavaScript is executed as soon as it is downloaded, without waiting for the HTML parsing to complete. This can result in the script executing before, during, or after HTML parsing, potentially interrupting it.

Default: JS Download → Execute → HTML Parse

Defer: (HTML Parse + JS Download in Parallel) → JS Execute (after parsing)

Async: HTML Parse + (JS Download → JS Execute when ready, possibly mid-parse)

Use Case

1. Use async, when a script has no dependency on others

2. Use defer when the script depends on other scripts

References:

1. Web dev simplified

2. Great Front End