使用async時(shí)，腳本異步下載並立即執(zhí)行，不保證執(zhí)行順序，適用於獨(dú)立腳本；2. 使用defer時(shí)，腳本異步下載但延遲到HTML解析完成後按順序執(zhí)行，適合依賴DOM或需順序執(zhí)行的腳本；3. 若無(wú)屬性，腳本會(huì)阻塞HTML解析，影響性能；因此，對(duì)非關(guān)鍵腳本用async，對(duì)關(guān)鍵邏輯用defer。

When you add a <script></script> tag to an HTML document, the browser normally downloads and executes the script immediately, which can block HTML parsing and slow down page loading. To improve performance, HTML provides two attributes — async and defer — that change how external scripts are loaded and executed. While both help avoid blocking the page, they work differently.

How async works

When you use async :

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

• The script is downloaded in the background while the HTML continues to parse.
• As soon as the script finishes downloading, parsing stops , and the script is executed immediately.
• After execution, HTML parsing resumes.

Key behavior :

• Execution order is not guaranteed . If you have multiple async scripts, they run as soon as they're ready, which might not be in the order they appear in the HTML.
• Best for scripts that are independent (like analytics or ads) and don't rely on the DOM or other scripts.

Example: Script A is smaller and downloads faster than Script B, even if B comes first in the HTML — A will run first.

How defer works

When you use defer :

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

• The script is downloaded in the background , like with async .
• But execution is delayed until the HTML parsing is completely finished .
• Scripts with defer execute in order , right after parsing ends but before the DOMContentLoaded event.

Key behavior :

• Scripts run in the order they appear in the HTML.
• The DOM is fully constructed by the time they run, so it's safe to manipulate elements.
• Ideal for scripts that need the full DOM or depend on other scripts.

Example: If you have multiple defer scripts, they download in any order but execute in sequence after the page finishes parsing.

When to use which?

• Use async for:

  • Independent scripts (eg, Google Analytics, third-party widgets).
  • You don't care when they run, as long as they don't block rendering.
  • Faster execution as soon as possible — even before the page is fully parsed.

• Use defer for:

  • Scripts that rely on the DOM or other scripts.
  • You need them to run in a specific order.
  • Main application logic that should run after the page is ready.

One more thing: no attribute

If you use neither async nor defer :

• The browser stops parsing HTML while it downloads and runs the script.
• This can significantly delay page rendering, especially if the script is large or slow to load.

In summary :

So, if you want scripts to load fast without blocking, but don't need them in order — use async .
If you need scripts to run in order and after the page is ready — use defer .

Basically, defer is safer for most site-critical scripts, while async is best for independent, non-essential ones.

以上是腳本標(biāo)籤的異步和延期有什麼區(qū)別？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！