script async vs script defer

We often use the script tag to insert a regular JavaScript file to page:

<script src="/path/to/script.js"></script>

When the browser sees a normal script tag declaration, it will perform the following steps:

Pause the document parser
Create a new request to download the script
Execute the script after it's downloaded completely
Continue parsing the document

┌───────────────────────┬───────────────────────────────────────┬───────────────────┐
/ Parse the document    / Pause parsing                         / Resume parsing    /
└───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

This flow gives a bad user experience because users can not interact with the page while the script is being downloaded. They have to wait for all scripts to be downloaded and executed completely before seeing the entire page is parsed.

To fix that problem, HTML 5 provides two attributes for the script tag. They are async and defer:

<script src="/path/to/script.js" async></script>
<script src="/path/to/script.js" defer></script>

These attributes let browser know that the scripts can be downloaded in parallel with the document parser process.

Differences

The async and defer scripts are executed at different moments.

After an async script is downloaded, the browser will pause the document parser, execute the script and resume parsing the document.

┌───────────────────────────────────────────┬───────────────────┬───────────────────┐
/ Parse the document                        / Pause parsing     / Resume parsing    /
└───────────────────────┬───────────────────┼───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

The defer script, on the other hand, will be executed only when the parser has completed its job.

┌───────────────────────────────────────────────────────────┐
/ Parse the document                                        /
└───────────────────────┬─────────────────┬─────────────────┘
                        / Download script /
                        └─────────────────┘                 ┌───────────────────┐
                                                            / Execute script    /
                                                            └───────────────────┘

The async script is executed as soon as it is downloaded completely, hence they might not be executed at the same order as they appear in the page.

On the other hand, the defer scripts guarantee the order of execution.

Good practices

Use async for a script that does not depend on other scripts. A statistic script (Google Analytic script, for example) would be fit in this use case.

In general, put scripts right before </body>.

<body>
    ...
    <script src="..."></script>
    <script src="..."></script>
    <script src="..."></script>
</body>

Good to know

Scripts that are injected to the page dynamically are async by default. However, you can set the async attribute to false if you want.

const script = document.createElement('script');
script.src = '/path/to/script.js';
script.async = false;
document.head.appendChild(script);

<> vs React.Fragment slice vs splice