The difference between async and defer is the execution timing of the script. async allows scripts to be downloaded in parallel and executed immediately after downloading, without guaranteeing the execution order; defer executes scripts in order after HTML parsing is completed. Both avoid blocking HTML parsing. Using async is suitable for standalone scripts such as analyzing code; defer is suitable for scenarios where you need to access the DOM or rely on other scripts.

When you're adding JavaScript to an HTML page, using the async or defer attributes can make a real difference in how your page loads and performs. These two attributes control how the browser handles script loading and execution, especially during the parsing of the HTML document.

Here's what they do in short:

• async makes the script load in parallel with HTML parsing and executes it as soon as it's downloaded — without waiting for the HTML parsing to finish.
• defer also loads the script while HTML is being parsed, but it waits until the entire HTML document is parsed before running the script.

Let's go into more detail about when and why you'd use each one.

What happens without async or defer

By default, when the browser encounters a <script></script> tag (without any attribute), it stops parsing the HTML. It downloads and runs the script immediately. Only after the script finishes executing does the browser continue building the DOM.

This behavior can cause delays in rendering the page, especially if the script is large or take time to download. That's why async and defer were introduced — to avoid blocking the parser.

How async works

The async attribute tells the browser that the script doesn't depend on the rest of the page content or other scripts. So the browser can:

• Download the script in the background while it continues parsing HTML
• Run the script as soon as it finishes downloading
• Stop HTML parsing just long enough to execute the script

Because of this behavior, async is best used for scripts that are completely independent — like analytics trackers or simple widgets that don't interact with the page content.

Example:

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

Important notes:

• The order of execution isn't guaranteed for multiple async scripts
• They run as soon as they're ready, not in the order they appear in the HTML

How defer works

With defer , the script also downloads in the background during HTML parsing. But instead of running right away, it waits until the entire HTML document has been parsed.

This means:

• HTML parsing continues uninterrupted
• Scripts are executed in the order they appear in the document
• Execution happens after the DOM is fully built but before the DOMContentLoaded event

This is ideal for scripts that need to access or manipulate the DOM, or rely on other deferred scripts.

Example:

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

Key points:

• defer preserves execution order
• It ensures the DOM is ready when the script runs
• No need to manually wait for DOMContentLoaded inside the script

When to use which

Choosing between async and defer depends on what the script does and whether it relies on anything else.

Use async if:

• The script doesn't depend on the DOM or other scripts
• You want it to run as soon as possible after download
• It's something like a tracking code or third-party widget

Use defer if:

• The script needs to access or modify the DOM
• It relies on other scripts (especially those earlier in the page)
• You want to ensure execution happens in a specific order

If a script is small and critical, sometimes it's even better to inline it in a <script></script> block rather than load it externally — but that's another topic.

A quick comparison summary

So, basically, pick async when the script can run anytime, and defer when it needs to wait for the page. Both help improve performance by avoiding render-blocking JavaScript — and that makes for a better user experience.

That's it. Not too complicated once you get the hang of it.

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