JS—script标签加载：1分钟掌握async与defer

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
• 二–DOMContentLoaded事件
• 三–async与defer

二. DOMContentLoaded事件

  概念： DOMContentLoaded是浏览器提供的一个关键事件，它标致着HTML文档解析完成且DOM树构建完毕(无需等待样式表和外部资源加载完毕)。
核心特征

三. async与defer

  async与defer都是用于优化脚本加载行为的html属性。

1. 共同点： 都是异步下载脚本，不阻塞html解析
2. 核心对比

3. 详细说明

• 普通脚本(无属性)
  行为： 阻塞HTML的解析，下载并执行完成之后接着解析HTML。
  缺点： 脚本比较大的时候，HTML的页面加载延迟。
• async脚本
  流程： 异步下载—>下载完成之后立即执行
  风险： 若脚本需要操作DOM，当脚本执行的时候，DOM可能还未创建，需要自行监听DOMContentLoaded事件
  示例： 适合不依赖其他脚本独立执行的代码(统计脚本，广告脚本等等)
• defer脚本
  流程： 异步下载—>下载完成之后，等待HTML解析完成按文档顺序执行，DOMContentLoaded事件之前执行
  优势： 不阻塞解析，并且保证顺序执行，适合依赖脚或DOM操作
  示例： 引入库（如 jQuery）及其插件时，确保插件在库之后执行。

4. 特殊情况

• async和defer共存的情况下，async优先级更高，defer会被忽略
• 动态添加脚本，默认行为类似async，可设置async=false，模拟defer

5. 执行顺序示例

<script defer src="defer1.js"></script>  <!-- 先执行 -->
<script async src="async1.js"></script>  <!-- 可能最先或最后执行 -->
<script defer src="defer2.js"></script>  <!-- 在 defer1 后执行 -->
//从上往下解析，解析到defer1.js，异步下载
//解析到async1.js，异步下载
//解析到defer2.js，异步下载
//当defer1.js下载完成，等着html解析完成之后执行
//当defer2.js下载完成之后，等defer1.js执行完后之后，执行
//async1只要下载完了之后就执行，可能在defer1.js的前面，可能在defer1.js的后面，也可能在defer2.js的前面，也可能在它的后面，都要看网络情况。async1.js下载的快慢决定的。

6. 如何选择？

• 用 async： 脚本独立、无依赖、不操作 DOM 或能处理延迟执行。
• 用 defer： 需操作 DOM、有依赖关系或要求按顺序执行。
• 普通脚本： 建议仅在小型脚本或需同步执行时使用（如文档底部）。

通过合理使用 async 和 defer，可显著提升页面加载性能，同时确保脚本逻辑正确性。