async和defer的區(qū)別在於腳本執(zhí)行時機。 async讓腳本並行下載且下載完立即執(zhí)行，不保證執(zhí)行順序；defer則在HTML解析完成後按順序執(zhí)行腳本。兩者都避免阻塞HTML解析。使用async適用於獨立腳本如分析代碼；defer適合需訪問DOM或依賴其他腳本的場景。

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 takes 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.

以上是說明HTML5中腳本的'異步”和' defer”屬性。的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！