script async vs script defer
Written byPhuoc Nguyen
Created
31 Aug, 2020
Last updated
14 Oct, 2020
Category
HTML
Contributors
We often use the
`script` tag to insert a regular JavaScript file to page:html
<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
shell
┌───────────────────────┬───────────────────────────────────────┬───────────────────┐
/ 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`:html
<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.shell┌───────────────────────────────────────────┬───────────────────┬───────────────────┐/ 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.shell┌───────────────────────────────────────────────────────────┐/ 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>`.html<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.js
const script = document.createElement('script');
script.src = '/path/to/script.js';
script.async = false;
document.head.appendChild(script);#See also
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
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