What is the Difference Between Async and Defer Script tags?

Let's start with a normal script tag:

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

In this case, when the browser comes across this line, it stops HTML parsing and starts to fetch the script. It also executes the script before it continues the parsing of the HTML.

If we add an async attribute to the script tag, it will behave differently.

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

If it is present on the script tag, the browser will continue parsing the HTML while the script fetches. Using defer also provides a different behavior.

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

defer is used to only execute the script after the HTML parsing is finished.

They are both used for optimization purposes. If you would like to read more on HTML optimization, you can do so in the link below:

10 Best Practices for HTMLTo help you improve your site’s performance and SEOFollowing these 10 best practices for html will help you step up your html game and get your site ranked higher, leading to more traffic...Learn More

50 JavaScript Interview QuestionsAnd their answers explainedHere are 50 JavaScript interview questions that often come up during a technical interview. In one place, one resource to learn from.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The script element in HTML, and its possible attributes