0
| 上一月 | 一 | 下一月 | ||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
在 HTML 中，<script> 标签有两个属性可以控制脚本的加载和执行方式：async 和 defer。它们都用于优化页面加载性能，但工作方式有所不同。
1230博客
<script src="script.js"></script>
<script defer src="script.js"></script>
<script async src="script.js"></script>
| 特性 | 普通 script | defer | async |
|---|---|---|---|
| 下载是否阻塞 HTML | 是 | 否 | 否 |
| 执行是否阻塞 HTML | 是 | 否（在解析后执行） | 是（下载完立即执行） |
| 执行顺序保证 | 是 | 是 | 否 |
| 适合场景 | 少量关键脚本 | 依赖 DOM 的脚本 | 独立第三方脚本 |
defer，确保 DOM 完全解析后再执行async，如分析工具、广告等不影响页面功能的脚本<!DOCTYPE html>
<html>
<head>
<!-- 分析工具 - 使用 async -->
<script async src="analytics.js"></script>
<!-- 主应用脚本 - 使用 defer -->
<script defer src="app.js"></script>
<!-- 库文件 - 使用 defer -->
<script defer src="library.js"></script>
</head>
<body>
<!-- 页面内容 -->
<!-- 关键脚本放在 body 底部 -->
<script src="critical.js"></script>
</body>
</html>
理解 async 和 defer 的区别对于优化页面加载性能非常重要，特别是在现代网页开发中。
热门推荐：
0
