What is the Difference Between Async and Defer Script tags?

What is the Difference Between Async and Defer Script tags?

Ferenc Almasi β€’ 2020 November 05 β€’ Read time 1 min read
  • twitter
  • facebook
JavaScript

Let's start with a normal script tag:

Copied to clipboard!
<script src="script.js"></script>
script.html

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.

Copied to clipboard!
<script src="script.js" async></script>
script.html

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.

Copied to clipboard!
<script src="script.js" defer></script>
script.html

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 HTML
The differences between an async and defer script tag
If you would like to see more Webtips, follow @flowforfrank

50 JavaScript Interview Questions

Resources:

  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.