Explain the Difference Between <script async> and <script defer>

The async and defer attributes in the <script> tag in HTML are similar in nature and the difference between the two is a common interview question. In this article, we aim to clarify the purpose of these attributes and provide a clear comparison between them, helping you to gain a comprehensive understanding of their use in HTML.

Why do we need async and defer?

The async and defer attributes were introduced to address a problem with the way the browser processes HTML. When the browser encounters a <script> tag while constructing the Document Object Model (DOM), it will halt the DOM construction process to start loading and executing the script. This means that the DOM construction will not resume until the script has finished loading and executing, which can cause delays in the screen rendering.

To address this issue, it was previously common practice to place the <script> tag at the bottom of the HTML, so that the script would load after the screen was rendered. However, this approach also had its own drawbacks. If the <script> tag was placed at the bottom, the screen would be displayed before the script was loaded, making it unresponsive until the script was finished loading.

The async and defer attributes were created to resolve these issues. By using either async or defer, the browser is able to continue constructing the DOM while the script is being loaded, allowing for DOM construction and script loading to occur simultaneously. This results in improved performance and a better user experience.

How does async differ from defer?

While async and defer share similar functionalities, they are different and best suited for different situations.

defer

The defer attribute tells the browser that it can continue parsing HTML and constructing the DOM without waiting for the script to be downloaded and executed. The script will be loaded in the background during the DOM construction process, allowing the page to render without interruption.

If the script finishes downloading before the HTML parsing is complete, it will not run until the HTML parsing is finished. This means that if a script requires the HTML to be parsed and the DOM to be fully constructed before it can run, defer should be used.

When multiple script resources have the defer attribute, the browser will download them in sequence, but execute them in the order in the HTML. This ensures that the scripts are executed in the desired order.

For example, if script A relies on script B for proper execution, it is important to ensure that script A runs before script B. In such cases, using the defer attribute is recommended.

async

The async attribute stands for asynchronous, indicating that tasks such as HTML parsing and script loading are performed in a non-blocking manner. This means that the browser will not pause HTML parsing while waiting for the script to be downloaded and executed.

In contrast to defer, async scripts and HTML parsing are separate from each other. The script will start executing as soon as it finishes downloading, rather than waiting until the HTML parsing is complete, which is what defer would do.

Scripts with the async attribute are independent of each other and the DOM construction. The first script to finish downloading will be the first one to run. HTML parsing will not be stopped while the script is downloading, but it will be paused during script execution. In most cases, async is appropriate for scripts that don't depend on the DOM or other scripts, such as analytics scripts from Google Analytics.