← Back tothis vs that

script async vs script defer

Written byPhuoc Nguyen

Category

HTML

Created

31 Aug, 2020

Last updated

14 Oct, 2020

Contributors

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);

#See also

preload vs prefetch

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn