深入解析 HTML 中 <script>标签的 async 和 defer 属性

2025-02-24 1,066 阅读3分钟

大家好，今天小编来给大家详细讲解一下 HTML 中 <script> 标签的两个重要属性：async 和 defer。这两个属性在控制脚本加载和执行行为方面起着关键作用，下面我们就来一一探讨它们之间的区别、使用场景、方式和条件。

async

定义： 小编先来说说 async 属性。async 属性表示脚本在下载时不会阻塞 HTML 的解析，但一旦脚本下载完成，它将立即执行，可能会阻塞 HTML 的解析。

使用场景：

当脚本与页面上的其他脚本或 DOM 元素无关时。
当你希望脚本尽快执行，但不关心它在 DOMContentLoaded 事件触发之前还是之后执行。 使用方式： 下面是一个使用 async 属性的例子：

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

使用条件：

脚本应该是独立的，不应该依赖于其他脚本或 DOM 的状态。
脚本不应该修改 DOM，因为它可能在 DOM 完全加载之前执行。

defer

定义： 接下来，我们来看看 defer 属性。defer 属性表示脚本在文档解析和显示完成后再执行，即脚本会被延迟到整个页面都解析完毕后再运行，且按照它们在文档中出现的顺序执行。 使用场景：

当脚本依赖于整个 DOM 的加载。
当你需要确保脚本按照它们在文档中出现的顺序执行。 使用方式： 下面是一个使用 defer 属性的例子：

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

使用条件：

脚本需要在 DOMContentLoaded 事件之前或之后立即执行。
脚本需要访问或修改 DOM。
脚本依赖于其他脚本按照特定顺序执行。

区别

下面小编来总结一下 async 和 defer 的主要区别：

执行时间： async 脚本在下载完成后立即执行，而 defer 脚本会等待整个文档解析完毕后再执行。
执行顺序： async 脚本的执行顺序是不确定的，而 defer 脚本会按照它们在文档中出现的顺序执行。
对 DOMContentLoaded 的影响： async 脚本可能会在 DOMContentLoaded 之前或之后执行，而 defer 脚本保证在 DOMContentLoaded 事件之前执行。在选择使用 async 或 defer 时，需要根据脚本的特定需求和页面加载的性能考虑来决定。通常，如果脚本之间没有依赖关系，并且你希望它们尽快执行，可以使用 async。如果脚本需要按照顺序执行，或者它们依赖于 DOM 的加载，那么应该使用 defer。

如何判断使用 `async` 或 `defer`

小编为大家整理了以下几个步骤来分析脚本是否需要使用 async 或 defer 属性：

脚本依赖性：
- 如果脚本依赖于其他脚本或必须在特定脚本之后运行，那么它不应该使用 async。
- 如果脚本不依赖于其他脚本，可以考虑使用 async。
DOM 依赖性：
- 如果脚本需要访问或修改 DOM，并且需要在 DOM 完全加载后执行，那么应该使用 defer。
- 如果脚本不依赖于 DOM，可以使用 async。
脚本执行时机：
- 如果脚本对页面性能至关重要，需要尽可能早地执行，可以使用 async。
- 如果脚本需要在页面解析完成后立即执行，但不一定需要在所有资源加载完毕后，那么 defer 是更好的选择。
脚本内容：
- 如果脚本是模块化的，并且可以独立于页面其他部分运行，那么 async 可能是合适的。
- 如果脚本包含初始化代码，需要在页面生命周期中的特定时刻执行，那么 defer 可能更合适。以下是一些具体的判断条件：

使用 async 的条件：
- 脚本不依赖于其他脚本。
- 脚本不需要等待 DOMContentLoaded 事件。
- 脚本可以独立运行，不会影响其他脚本或 DOM 的状态。
使用 defer 的条件：
- 脚本依赖于 DOM 的完全加载。
- 脚本需要在文档解析后、DOMContentLoaded 事件触发前执行。
- 脚本需要按照它们在文档中出现的顺序执行。通过以上分析，小编希望大家能够根据脚本的具体需求和页面的加载流程来决定是否使用 async 或 defer。正确的选择可以显著提高页面的加载性能和用户体验。