在现代网页开发中，JavaScript 脚本的加载方式对页面性能有着至关重要的影响。默认情况下，浏览器会立即加载并执行 <script> 标签中的脚本，这可能会阻塞页面的渲染过程，导致用户体验不佳。为了解决这一问题，HTML5 引入了 defer 和 async 属性来实现 JavaScript 文件的异步加载。
本文将详细介绍 defer 和 async 属性的区别、应用场景以及如何选择适合你的项目需求的最佳实践。
📌 一、默认行为：同步加载
当 <script> 标签没有 defer 或 async 属性时，浏览器会立即下载并执行该脚本文件。这意味着：
- 阻塞后续文档的加载：浏览器必须等待脚本下载和执行完成之后才能继续解析 HTML 文档。
- 影响页面渲染速度 ：尤其是对于位于
<head>中的大体积 JS 文件，会导致"白屏时间"增加。
示例：
html
<script src="app.js"></script>在这种情况下，浏览器会在读取到该标签时立即开始下载 app.js 并执行它，而暂停其他资源（如图片、样式表）的加载和 HTML 解析。
📌 二、defer 属性详解
✅ 定义：
defer 属性告诉浏览器当前脚本可以延迟执行 ，即等到整个文档完全解析完毕后（DOMContentLoaded 事件触发之前），再按顺序执行所有带有 defer 属性的脚本。
✅ 特点：
- 不阻塞 HTML 解析：脚本会在后台异步下载，但不会中断 HTML 解析过程。
- 按顺序执行 ：多个带有
defer属性的脚本会按照它们在文档中出现的顺序依次执行。 - 确保 DOM 完整性：脚本执行前，DOM 已经构建完成，因此可以直接操作 DOM 元素。
✅ 应用场景：
适用于需要依赖完整 DOM 结构的脚本，比如初始化页面组件或绑定事件处理器。
示例：
html
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>在这个例子中，即使 script1.js 和 script2.js 同时开始下载，它们也会严格按照顺序执行，并且都在 DOMContentLoaded 事件之前完成执行。
📌 三、async 属性详解
✅ 定义：
async 属性表示脚本是异步加载的，一旦下载完成就会立刻执行，无论此时文档是否已经完全解析完毕。
✅ 特点：
- 非阻塞性：脚本下载时不阻塞 HTML 解析，下载完成后立即执行。
- 无序执行 ：多个带有
async属性的脚本并不保证执行顺序，谁先下载完谁先执行。 - 不可预测性：由于脚本可能在任意时刻执行，无法确保 DOM 是否已准备好。
✅ 应用场景：
适合那些不需要依赖 DOM 结构即可独立运行的脚本，例如统计分析代码、广告插件等。
示例：
html
<script src="analytics.js" async></script>
<script src="ads.js" async></script>这里，analytics.js 和 ads.js 可能以任意顺序下载和执行，具体取决于网络条件和文件大小。
📊 四、对比总结
| 对比维度 | 默认（无属性） | defer |
async |
|---|---|---|---|
| 是否阻塞 HTML 解析 | ✅ 是 | ❌ 否 | ❌ 否 |
| 执行顺序 | N/A | 按文档顺序 | 无序 |
| DOM 状态 | 不保证 | 已构建完成 | 不保证 |
| 典型使用场景 | 关键脚本 | 初始化逻辑 | 独立模块 |
📈 五、实际应用中的最佳实践
1. 优先考虑 defer
- 如果你的脚本需要操作 DOM 或者依赖于页面结构，请使用
defer。这样可以确保脚本在 DOM 构建完成后才执行，避免潜在的错误。
2. 合理使用 async
- 对于那些不需要等待 DOM 加载完毕就能执行的脚本（如第三方统计工具、广告代码），可以使用
async提高效率。
3. 避免混合使用
- 尽量不要在同一页面中同时使用
defer和async，除非你非常清楚它们的工作原理，并且有明确的需求。
4. 考虑脚本加载顺序
- 使用
defer可以确保脚本按预期顺序执行，这对于依赖关系复杂的项目尤为重要。
📊 六、总结
defer 和 async 都是为了提高网页加载性能而设计的特性，通过允许 JavaScript 文件异步加载而不阻塞页面渲染，它们显著提升了用户体验。然而，理解它们之间的区别及其适用场景，可以帮助开发者更有效地组织和管理前端资源，从而构建出更加高效、流畅的 Web 应用。