How do defer and async attributes for JavaScript improve page performance?

Why does JavaScript block page rendering?

Before a browser can display a web page, it must first build the Document Object Model (DOM) tree by parsing the HTML markup. This process involves reading through the HTML document and constructing a structured representation of the page's content.

During this parsing process, if the browser encounters a JavaScript `<script>` element without specific attributes, it must pause. The parser stops its work to download and execute the script immediately before it can resume parsing the rest of the HTML. This interruption is known as render-blocking JavaScript.

Google for Developers advises minimizing and avoiding the use of blocking JavaScript, especially external scripts that require fetching before they can be executed. Such blocking scripts can significantly delay the initial display of a page to the user.

How do async and defer prevent render blocking?

The `async` and `defer` attributes are instructions to the browser that it can continue parsing the HTML document while simultaneously loading a script in the background. This parallel loading prevents the script download from blocking the construction of the DOM or the rendering of the page.

By allowing HTML parsing and script downloading to occur concurrently, these attributes enable users to see the page content sooner, even before all scripts have fully loaded. This improves the perceived performance and user experience.

Google for Developers states that scripts not critical for the initial page render should be made asynchronous or deferred until after the first render. Deferring the loading and execution of these non-essential scripts until after the initial render or other critical parts of the page have finished loading can reduce resource contention and improve overall performance.

How does the async attribute work?

When the `async` attribute is present on a classic script, the browser fetches the script in parallel with parsing the HTML. MDN Web Docs explains that the script downloads without blocking the page while it is being fetched. Once the download is complete, the script executes at the first available opportunity, before the window's `load` event.

A key characteristic of `async` scripts is that their execution is not guaranteed to follow the order in which they appear in the HTML document. It is possible, and often likely, that `async` scripts will run out of order. MDN Web Docs also notes that while the download is non-blocking, the script's execution itself will block the page from rendering.

Google for Developers recommends using the HTML `async` attribute on external scripts to prevent JavaScript from blocking the parser. However, Google also cautions that asynchronous scripts are not guaranteed to execute in a specified order and should not use `document.write`.

• Downloads in parallel with HTML parsing.
• Executes as soon as it finishes downloading.
• Execution is not guaranteed to be in the order they appear in the HTML.
• Execution can block page rendering once downloaded.

How does the defer attribute work?

The `defer` attribute also tells the browser to fetch the script in parallel with HTML parsing, similar to `async`. However, MDN Web Docs specifies that `defer` indicates the script is meant to be executed after the document has been fully parsed, but before the `DOMContentLoaded` event fires.

Unlike `async` scripts, `defer` ensures that scripts run in the exact order they appear in the HTML document. This attribute is particularly useful for scripts that depend on the Document Object Model (DOM) being fully in place, such as those that modify elements on the page.

MDN Web Docs advises that if your scripts need to wait for parsing and depend on other scripts or the DOM being present, you should load them using `defer`. Additionally, place their corresponding `<script>` elements in the order you want the browser to execute them to ensure proper functionality.

• Downloads in parallel with HTML parsing.
• Executes after HTML parsing is completely finished.
• Executes in the order they appear in the HTML.
• Does not block the parser during download or execution.

When should you use async versus defer?

The choice between `async` and `defer` depends on the script's criticality and its dependencies. Google for Developers suggests that scripts not critical for the initial page render should be made asynchronous or deferred. If it is important for a script to run earlier in the loading process, `async` is the appropriate choice.

For scripts that are less critical or are not needed for the initial view of the page, such as a video player that appears below the fold, `defer` is often more suitable. MDN Web Docs explains that `defer` is useful if your scripts depend on the DOM being in place, for example, if they modify one or more elements on the page.

If your scripts need to wait for the HTML parsing to complete and depend on other scripts or the DOM being fully constructed, you should use `defer`. In such cases, ensure the `<script>` elements are ordered correctly in the HTML to reflect their execution dependencies.

Common questions