The core difference between async and defer is the script loading and execution timing. The async attribute enables the script to be loaded asynchronously and executed immediately without blocking HTML parsing. It is suitable for independent and DOM-dependent scripts; the defer attribute also loads scripts asynchronously, but delays the execution in order until the HTML parsing is completed. It is suitable for multiple scripts that rely on DOM or need to be executed in sequence; if none is added, the script will block HTML parsing. Reasonable use of async and defer can improve page loading performance, reduce white screen time, and optimize user experience.

In web development, async and defer are two properties of the <script></script> tag. They exist to better control the way scripts are loaded and executed. Simply put, their function is to prevent scripts from blocking page rendering and improve page loading performance .

async: load asynchronously, does not block HTML parsing when downloading

When you add an async attribute to a <script></script> tag, the browser will load the script asynchronously and will not block HTML parsing during the download process. Once the script download is complete, it executes immediately , and HTML parsing may be paused.

• Suitable for standalone scripts that do not depend on page DOM and do not need to wait for other scripts.
• There is no execution order requirement between scripts.
• Commonly used for statistics scripts, advertising scripts, etc. that do not need to participate in page initialization.

For example:

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

This script will be downloaded in the background and run immediately after the download is completed, without affecting the construction of the page structure.

defer: load asynchronously and delay execution until HTML parsing is completed

A script using defer will also be loaded asynchronously , but its execution will be delayed until the entire HTML document parsing is completed , that is, before the DOMContentLoaded event.

• Suitable for scripts that depend on the page DOM or need to wait until the HTML is loaded before executing.
• Multiple defer scripts are executed in the order in which they appear in HTML.

For example:

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

Even if main.js is downloaded first, it will wait until init.js is executed before executing it.

Summary of the difference between async and defer

Although both can make scripts load asynchronously, the key difference is:

• async : Execute immediately after the download is completed, and the execution order is not guaranteed.
• defer : Wait until the HTML parsing is completed before executing in the order of occurrence .

If you are not sure which one to choose, you can judge this:

• If the script does not depend on DOM and runs independently → use async
• If the script depends on the DOM or there are sequential dependencies between multiple scripts → use defer
• If not added → the browser will block HTML parsing until the script is executed (impacting performance)

Basically that's it. Reasonable use of async and defer can effectively reduce the white screen time of the page and improve the user experience. It seems like a small detail, but it is actually quite critical.

The above is the detailed content of What is the purpose of the async and defer attributes for scripts?. For more information, please follow other related articles on the PHP Chinese website!