JS中的async和defer属性详解

最新推荐文章于 2025-11-17 10:44:19 发布

原创最新推荐文章于 2025-11-17 10:44:19 发布 · 361 阅读

CC 4.0 BY-SA版权

文章标签：

26 篇文章

订阅专栏

在HTML中，<script>标签的async和defer属性用于控制外部JavaScript文件的加载和执行行为，这对页面性能有重要影响。

属性	加载时机	执行时机	执行顺序保证
无属性	立即停止HTML解析加载	加载完成后立即执行	按文档顺序
`async`	异步加载	加载完成后立即执行	不保证顺序
`defer`	异步加载	HTML解析完成后，DOMContentLoaded前执行	按文档顺序

<script src="script.js"></script>

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

行为：
- 异步下载脚本（不阻塞HTML解析）
- 下载完成后立即执行（可能中断HTML解析）
- 多个async脚本的执行顺序不确定（先下载完的先执行）
适用场景：
- 完全独立的第三方脚本（如广告、分析工具）
- 不依赖DOM或其他脚本的代码
- 对执行顺序无要求的脚本

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

行为：
- 异步下载脚本（不阻塞HTML解析）
- 在所有HTML解析完成后，DOMContentLoaded事件前按文档顺序执行
- 保证多个defer脚本的执行顺序
适用场景：
- 需要操作DOM的脚本
- 有依赖关系的多个脚本
- 希望延迟执行但不阻塞页面渲染的情况

无属性:  [下载][执行]       (阻塞HTML解析)
async:  [下载]...[执行]    (下载不阻塞，执行可能阻塞)
defer:  [下载].........[执行] (都不阻塞，最后顺序执行)