Explain Asynchronous vs Deferred JavaScript

In most cases, whenever we use a script tag to load any JavaScript code, the browser pauses HTML processing when it comes across the script tag and begins downloading the JavaScript file first. Until the browser has finished downloading and running the script, the HTML elements script tag will not be activated. The browser waits for the script to download, execute, and then process before processing the rest of the page.

The script has a potential to be bigger in newer browsers than the HTML file, which increases the downloading size and processing time. By limiting the user's ability to navigate the website, this lengthens the page's load time. Async and defer attributes are put to use to resolve this problem.

Syntax

The page contains a standard script in the manner that is described below.

<script src = "script.js"></script>

The HTML parser sends a request to the server to fetch the script when it encounters this element.

Asynchronous

Whenever the async attribute is used, the script is downloaded asynchronously with the rest of the page neither delaying the processing and presentation of the page's contents or the HTML parsing. The HTML parsing will be stopped after the script has been downloaded as well as the script will begin to run. Following execution, HTML processing will continue. Async scripts are not expected by the page or any other scripts, and vice versa. For standalone scripts that are located outside, it works really well.

When there will be a lot of iterations or when the activities inside the loop will be complicated, asynchronous loops are required. However, there is no need to use a complicated recursive function for straightforward operations like iterating through a small array.

Syntax

<script async src = "script.js"></script>

Advantages of implementing the async attribute

• The async attribute could be useful while loading a big JavaScript file. Whereas the JavaScript file is downloading, it instructs the browser that it may continue parsing the HTML file.

• As a result, the browser can begin rendering items more quickly, which can decrease the perceived load time of the page.

Disadvantages of implementing the async attribute

• Async can violate the render-blocking CSS rule, which is one of its major disadvantages. This rule is crucial to making sure that the page loads properly and doesn't look empty whereas the JavaScript file is loading. If async is employed, the CSS file would be downloaded as soon as the JavaScript file begins to load, which may be problematic if the JavaScript file is big or takes a while to load.

• Async also has the drawback of slowing down the loading of other resources on the website, including photos. This may significantly lengthen the time it takes for the page to load overall.

Deferred

The defer property instructs the browser to avoid from tampering with HTML parsing and to only run the script file once all HTML tags have been correctly interpreted. Anytime a script with this attribute is found, the script's download begins asynchronously in the background. Once the script is downloaded, it is only run once the HTML parsing is complete.

A boolean value is assigned to the defer attribute. When the defer property is set, the script is downloaded simultaneously with page processing and only run once the page has done parsing. For external scripts only, the defer property is used (src property must be present for this to be used).

Syntax

<script defer src = "script.js"></script>

Advantages of implementing the defer attribute

The defer attribute has a number of benefits that script tags can take advantage of −

• Deferred scripts are ensured to execute after the page has loaded and been parsed, thus they cannot hamper the speed at which the page loads initially.

• Deferred scripts are not parsed until the page has fully loaded, therefore they cannot prevent the parsing of other page elements like images.

• Deferred scripts can be updated separately from the rest of the page, therefore developers do not need to re-parse and re-render the whole page whenever you change a deferred script.

Disadvantages of implementing the defer attribute

• One is the possibility of a loading time delay for your page. Your page might load more slowly if many of your scripts use defer since they might all be attempting to load at once.

• Older browsers may not support defer, which is another drawback; as a result, some users may not even see your scripts load.

• Last but not least, some user scripts and extension types can have problems with async. Some user scripts and extensions depend on the ability to change the DOM after the page has loaded, however if async has been used, they might not be able to accomplish this since the DOM could not have loaded by the time they run.

Look at the following visualisation to better understand the differences between a regular, async, and defer script tag −