说明HTML5中脚本的'异步”和' defer”属性。

async和defer的区别在于脚本执行时机。async让脚本并行下载且下载完立即执行，不保证执行顺序；defer则在HTML解析完成后按顺序执行脚本。两者都避免阻塞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”属性。的详细内容。更多信息请关注PHP中文网其他相关文章！