Async VS Defer

Async VS Defer

Hi, everyone in this blog we will be talking about the Async and Defer attribute in JavaScript. But before that, we should know what they are, how and where they are used.

Async and Defer are attributes that are used along the script tags in HTML to load external scripts into our webpage efficiently.

Have you ever worked on an application and as you add more and more things to it, it starts running slower and slower for the end user. One solution to that problem is to optimize your backend code to reduce the loading time. But one of the quickest ways to increase page load speed is to look at how we are loading our external scripts. Here Async and Defer play a vital role in loading our external scripts onto the frontend of our webpage. But before that, we need to know how browsers parse our HTML.

Parsing

When an HTML file is downloaded by the browser, it read the HTML file from top to bottom line by line.

Here the browser will start reading from the 1st line and so on. As it's doing this, if it comes across some resource like an image in the example, it will download that in the background and it will continue parsing even if the resource is not downloaded completely.

But when it comes to JavaScript, a normal script tag will send a request to download and the parser stops as soon as it hits the script tag and will wait until the script is downloaded and executed, after that it will continue to load the HTML just like it would normally. Now let's visualize this

This is how HTML will be parsed if we don't use any Async or Defer attribute with the script tag. As you can see the HTML parsing stopped while the JavaScript was downloading and getting executed, and once these processes were done, it simply resumed the parsing.

Async

Now let us look at how the Async attribute would function

Here as you can see, the HTML parsing will continue even if the parser hits the script tag. The script will download in the background. Once the script is done downloading, the parser will stop and will let the JavaScript execute and once that is done it will continue to parse further.

This means that if you have multiple asynchronous JavaScript tags in your project, they will be loaded in random order. Depending on how fast the file downloads. So every time you load the page, they can potentially run in a different order. This may create problems since many libraries are dependent on other libraries and may not function without them. This is something you may not want.

Defer

Now let us look at how the Defer attribute would function

With Defer attribute, it works just like the Async attribute but the key difference is that it will wait for the parser to completely finish the parsing of the HTML and then only execute the script tags in order that they are listed inside of the HTML document. So here using Defer is beneficial if you are certain libraries that depend on other libraries, so you need to load them in a very specific order.

Key Takeaways

Quick rundown on what we just learned:

  1. While parsing normally with any Async or Defer attribute, the parse will stop until the script is done downloading and getting executed.

  2. While parsing with Async attribute, the parse will keep parsing when it hits the script tag and will download the script in the background, while only stopping to execute it once downloaded. But this all will be in a nonsequential manner.

  3. While parsing with Defer attribute, the parse will keep parsing when it hits the script tag and will download the script in the background, and will only sequentially execute the script once the parsing is done.

That's all for this blog, do check out the "JavaScript basics" playlist on my profile for more such blogs.