# When to use async and defer attributes in a script tag and why it is important Do you know the importance of `defer` and `async` attributes in the script tag? 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: ``` ``` 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: ``` . . . ``` ## 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. 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: ``` ``` 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. **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 ---- **Due to many requests for the discount, the Christmas sale of 30% off for [Mastering Modern JavaScript](https://modernjavascript.yogeshchavan.dev/) book is extended till 31st December. So don't miss this last opportunity.** **Check out the preview contents of the book [here](https://yogeshchavan.hashnode.dev/master-modern-javascript-skills-with-this-amazing-guide).** [](https://www.buymeacoffee.com/myogeshchavan97)