Investigating Async vs Defer

As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices — Paul Irish, Chrome Developer Relations

As web developers or customers we have all been introduced to a scenario where we check for particular web apps or websites and observe an endless (more than 10 seconds 😛) loading screen. We either wait or end up refreshing the screen or check for internet connectivity.

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

Let us observe what happens we normally have a script tag, one with an async attribute in the script and one contains the defers attribute.

During the process of parsing of HTML line by line, when it encounters the script tag, the browser would fetch the script from the network, then execute it before continuing with the HTML rendering again. The key point to observe here the browser stops rendering the HTML unless the script tag is fetched and executed.

To make sure that HTML rendering and synchronous scripts are not blocked from executing and their critical work is completed more quickly, we rely on using async and defer attribute in the script as it would help in the optimization of the webpage.

When it comes to the script having an async attribute, as soon as the browser observes the script with the async attribute, the browser would fetch the script parallelly while the HTML is being rendered, as soon as the script is available, The browser pauses HTML rendering, executes the script and then it continues with HTML rendering.

The disadvantage with using the async attribute would be if we have multiple scripts which are dependent on one another. The async doesn’t guarantee that the order of execution is in a particular order which would lead to the breaking of code. If we have an independent script, then we can rely on async. However, we can completely rely on defer attribute due to the below reasons.

defer attribute is similar to async, except for the browser doesn’t execute the script as soon as it is downloaded, it waits until the parser is completely finishing parsing the HTML, then it runs all the script tags in the exact order in which they are defined.

By now, we had reached to the conclusion that defer is most useful when it comes to loading the javascript as it allows the javascript to execute in order which is important when we include interdependent libraries. defer attribute in scripts can never block synchronous scripts, while async in scripts might depending on how quickly they download

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️. Source of images are from google😅

Happy Coding :)

Why does a particular website takes so long to load the page would always be a question is addressed below.