Why You Should Use async And defer Attributes In a Script Tag

Why You Should Use async And defer Attributes In a Script Tag

Written by Yogesh Chavan on Aug 19th, 2021 ・ Views ・ Report Post

Yogesh Chavan Visit User Profile

Do you know the importance of defer and async attributes in the script tag?

This is one of the most popular interview question asked in JavaScript interviews.

When we load any webpage in the browser, the browser generates a DOM(Document Object Model) by parsing the document.

When there is no attribute(defer or async) to the script tag like this:

<script src="index.js"></script>
<script src="script.js"></script>

then all the scripts are downloaded and executed one after the other simultaneously.

So it will block the parsing of the document until all the scripts are downloaded and executed and therefore it will take some time to load the page completely.

Therefore it's a common practice to add all the scripts before the end of the body tag so the browser will generate the DOM first and then all the scripts will be executed like this:

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

Using defer and async

When we add the defer attribute to the script tag, the browser will download all the scripts included in the page but will not execute it until the DOM is created.

So we can place all the scripts in the head tag with defer attribute and is an alternative option rather than placing all the scripts before the end of the body tag.

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Scripts with defer added will execute in order.

The async attribute works the same as the default behaviour of script tag when there is no defer or async attribute specified like this:

<script src="index.js"></script>

This means it will stop the parsing of the document until all the scripts are downloaded and executed.

But the difference between async and defer is that async scripts will not execute in order so If we have 4 scripts included, any script will be executed at any time but that's not the case with defer.

So when the scripts are not dependent on each other we should use the async attribute like this:

<script src="index.js" async></script>

And when we use defer attribute, browser will download all javascript files but will not execute then until the DOM is completely created so we use defer attributes for all script included in head tag.

<script src="index.js" defer></script>

Knowing when to use defer and async is important because even if you have not used it, it is a famous question in an interview.

Conclusion

  • async or defer attributes can be added to the script tag depending on the requirement
  • adding defer attribute will make sure that all the scripts are downloaded but will not be executed until the DOM is ready
  • adding async attribute is preferred when the scripts included in the page are not dependent on each other

Thanks for reading!

Check out my recently published Mastering Redux course.

In this course, you will build three apps along with a food ordering app, and you'll learn:

  • Basic and advanced Redux
  • How to manage the complex state of array and objects
  • How to use multiple reducers to manage complex redux state
  • How to debug Redux application
  • How to use Redux in React using react-redux library to make your app reactive.
  • How to use the redux-thunk library to handle async API calls and much more

And then finally, we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Comments (0)