悠悠楠杉
网站页面
JS动态加载脚本：Defer与Async的区别
11/27
![]()
在现代前端开发中，JavaScript 已经成为构建交互式网页的核心技术。随着应用复杂度上升，如何高效地加载外部脚本，避免阻塞页面渲染，成为一个关键问题。其中，<script> 标签的 defer 和 async 属性是解决这一问题的重要手段。虽然两者都能实现异步加载，但它们的工作机制和适用场景却大不相同。
首先，我们来明确一个基本前提：浏览器在解析 HTML 文档时，一旦遇到没有特殊标记的 <script> 标签，就会暂停 HTML 的解析，立即下载并执行该脚本。这种同步行为会导致“阻塞渲染”，尤其是在网络较慢或脚本较大的情况下，用户会明显感觉到页面卡顿甚至白屏。为了解决这个问题，HTML5 引入了 defer 和 async 两个布尔属性。
Defer：延迟执行，保持顺序
当我们在 <script defer src="..."></script> 中使用 defer 属性时，浏览器会异步下载该脚本，但不会立即执行。它会等到整个 HTML 文档解析完成（即 DOMContentLoaded 事件触发前）才按顺序执行所有带有 defer 的脚本。
这意味着，多个 defer 脚本即使下载完成时间不同，也会严格按照它们在文档中出现的顺序执行。这个特性对于依赖关系明确的脚本非常有用。例如，你有一个基础工具库和一个依赖它的业务逻辑脚本，使用 defer 可以确保前者先于后者执行，而无需手动管理加载时机。
更重要的是，defer 脚本不会阻塞 DOM 构建。页面可以继续解析和渲染，用户体验更加流畅。因此，如果你的脚本需要操作 DOM 或依赖完整的页面结构，defer 是理想选择。
Async：异步执行，不保证顺序
相比之下，async 的行为更为激进。<script async src="..."></script> 表示该脚本将被异步下载，并在下载完成后立即执行，无论此时 HTML 是否解析完毕。
由于每个 async 脚本一旦下载完成就独立执行，它们之间不保证执行顺序。也就是说，后声明的脚本可能比先声明的更早执行，只要它下载得更快。这使得 async 更适合那些独立、无依赖的脚本，比如统计代码、广告脚本或第三方小工具。
然而，这也带来了风险：如果某个 async 脚本试图访问尚未创建的 DOM 元素，就会导致错误。因此，使用 async 时必须确保脚本具备自我保护机制，比如通过事件监听等待 DOM 就绪。
动态加载中的实际应用
除了静态写入 HTML，我们还可以通过 JavaScript 动态创建 <script> 标签来加载外部资源。这时，我们可以手动控制 async 和 defer 属性：
javascript
const script = document.createElement('script');
script.src = 'https://example.com/external.js';
script.async = true; // 或 script.defer = true;
document.head.appendChild(script);
默认情况下，动态插入的脚本自动具有 async 行为，除非你显式设置 script.defer = true。这意味着即使你不设置 async，它也不会阻塞页面。这一点常被开发者忽略，误以为动态脚本天然“安全”。
如果你希望动态加载多个有依赖关系的脚本并保持执行顺序，使用 defer 模式更为稳妥。或者，你也可以借助 Promise 和事件监听手动编排加载流程，但这会增加代码复杂度。
如何选择？
- 使用
defer：当你有多个相互依赖的脚本，且需要在 DOM 解析完成后执行。 - 使用
async：当脚本独立、无依赖，且尽早执行不影响功能，如埋点、广告等。 - 避免都不加：对于外部脚本，不加任何属性会阻塞渲染，应尽量避免。
在实际项目中，建议将核心业务逻辑脚本用 defer 加载，第三方工具用 async，并通过性能监控持续优化加载策略。合理运用这两个属性，不仅能提升首屏速度，还能增强用户体验的流畅性。
