async和defer的区别?

### HTML `script` 标签中 `defer` 与 `async` 属性的区别及用法 #### 基本定义 在 JavaScript 中，`<script>` 标签用于引入外部 JavaScript 文件或包含嵌入式 JavaScript 代码。为了优化页面加载性能并控制脚本的执行时机，HTML 提供了两种特殊的属性——`defer` 和 `async`。 #### `defer` 属性 当 `<script>` 标签带有 `defer` 属性时，浏览器会继续解析和渲染后续的文档内容，而不会阻塞 DOM 构建过程[^3]。脚本会在整个 HTML 文档解析完成后立即按顺序执行，这意味着如果页面中有多个带有 `defer` 属性的脚本，则它们会按照其在 HTML 中出现的顺序依次执行[^5]。 以下是使用 `defer` 的示例代码： ```html <script src="script1.js" defer></script> <script src="script2.js" defer></script> ``` #### `async` 属性 对于具有 `async` 属性的 `<script>` 标签，浏览器同样不会因为下载该脚本文件而停止解析其他部分的内容[^4]。然而，一旦脚本被成功获取回来之后就会立刻被执行，而不等待任何其他的资源或者操作完成。需要注意的是，这种行为可能导致不同脚本之间的执行次序变得不可预测，具体取决于各个请求返回的速度差异。 下面是一个简单的例子展示了如何应用 `async` 属性： ```html <script src="library.js" async></script> <script src="app.js"></script> <!-- 这里可能还未等到 library.js 加载完毕 --> ``` #### 主要对比 | 特性 | `normal (no attribute)` | `defer` | `async` | |-----------------|-------------------------------|----------------------------------|---------------------------------| | **下载阶段** | 阻挡DOM构建 | 并行下载 | 并行下载 | | **执行阶段** | 按照遇到的位置暂停解析直到运行完当前脚本 | 在DOMContentLoaded事件触发前依序执行 | 尽早尽可能快地单独执行 | 总结来说，在实际开发过程中可以根据需求选择合适的策略来提升网页的整体表现力。例如，如果你希望某些非关键性的第三方统计工具尽快发挥作用但又不影响主要业务逻辑的话，那么就可以采用 `async` 方式；而对于那些需要确保特定先后关系才能正常运作的部分则更适合运用 `defer` 技术[^1]。 ### 结论 通过上述分析可以看出，虽然两者都能实现异步加载效果从而改善首屏呈现速度等方面的优势，但是由于各自独特的特性决定了适用场景也有所不同。因此理解清楚两者的本质区别是非常重要的。