In this blog post, we explore the async and defer attributes in JavaScript, used with script tags to efficiently load external scripts onto a web page. We discuss three scenarios: using a script tag normally, with the async attribute, and with the defer attribute, examining the impact on HTML parsing and script execution. Async is suitable for independent, modular scripts, while defer is preferable for multiple scripts that depend on each other's execution order. In most cases, using the defer attribute is the sensible choice.

Hello everyone. In this specific blog post, we will be exploring the async and defer attributes in JavaScript. These are boolean attributes used with script tags to effectively load external scripts onto a web page.

This exploration covers three main scenarios - using a script tag normally, one with the async attribute, and another with the defer attribute. We'll examine what happens in each of these situations.

The Pieces of Loading a Web Page

When a web page is loaded, two crucial processes occur in your browser. The first is the parsing of HTML, and the second is the loading of scripts. The latter can be further divided into two parts - retrieving the script from the network and executing it line by line. We will explore how these operations work when using async, defer, or a plain script tag.

---

The Normal Scenario

Let's first focus on what happens under normal conditions. As your browser loads a web page and begins parsing the HTML, it may suddenly encounter a script tag. The browser pauses the parsing process, retrieves the script from the network, and executes it immediately.

This means that the HTML parsing only resumes after the script is fully executed. In simpler terms, while the script loading and execution process is ongoing, the HTML parsing is paused. Consequently, the JavaScripts are blocking the HTML rendering process, which is far from ideal.

---

The Async Scenario

When using the async attribute, our scripts with this tag are fetched from the network asynchronously while the HTML parsing continues.

Once the scripts are fetched and available in the browser, HTML parsing briefly pauses, allowing the scripts to run. After script execution, HTML parsing resumes as usual.

The critical difference between this and the normal scenario is the parallel fetching of scripts from the network while HTML parsing continues. However, there is still a period during which the HTML parsing is blocked.

---

The Defer Scenario

With the defer attribute, we observe a distinct behavior. In this situation, the fetching of scripts from the network and HTML parsing occur simultaneously.

However, unlike with async, regardless of when the scripts become available in the browser, script execution does not begin until the HTML parsing is fully completed. This means that there is no blocking of HTML parsing, as seen in the other two scenarios.

---

Making Your Choice: Async, Defer or None?

This covers the three ways scripts are loaded into a browser: using Async, Defer, or no particular attribute. The lingering question remains: when should you use one over the others?

An important distinction between Async and Defer is that the former does not guarantee the order of execution for the scripts, while the latter does.

Therefore, if you have multiple scripts that depend on each other's execution order, using an async attribute could disrupt your code's sequence and potentially break it. In such a case, defer is the preferable choice.

In a different scenario, where you need to load an independent, modular external script like Google Analytics scripts, using an async attribute would be more suitable than defer.

In most instances, using a defer attribute is the sensible choice. While HTML parsing is ongoing, scripts are fetched from the network and are only run when the HTML parsing is fully completed.

That's all for now. Thank you for reading, and please share this blog post!