个人博客：haichenyi.com。感谢关注
一. 目录
- 一–目录
- 二–DOMContentLoaded事件
- 三–async与defer
二. DOMContentLoaded事件
概念： DOMContentLoaded是浏览器提供的一个关键事件，它标致着HTML文档解析完成且DOM树构建完毕(无需等待样式表和外部资源加载完毕)。
核心特征
| 特性 | 说明 |
|---|---|
| 触发时机 | HTML解析完成，DOM树就绪时触发，无需等待图片等外部资源加载 |
| 与load事件的区别 | load事件需要等待图片样式等外部资源加载完毕才触发，晚于DOMContentLoaded事件 |
| 适用场景 | 需要DOM构建完毕就需要做的处理，如初始化交互功能、绑定事件等等 |
三. async与defer
async与defer都是用于优化脚本加载行为的html属性。
- 共同点： 都是异步下载脚本，不阻塞html解析
- 核心对比
| 特性 | async | defer |
|---|---|---|
| 执行时机 | 下载完毕之后立即执行，可能中断HTML解析 | 下载完成之后，HTML解析完毕，DOMContentLoaded之前按顺序执行 |
| 执行顺序 | 无序(下载完成后立即执行) | 有序(按文档顺序执行) |
| 适用场景 | 独立脚本（如统计、广告），无依赖且无需操作 DOM | 依赖其他脚本或需操作 DOM 的脚本。 |
- 详细说明
- 普通脚本(无属性)
行为： 阻塞HTML的解析，下载并执行完成之后接着解析HTML。
缺点： 脚本比较大的时候，HTML的页面加载延迟。 - async脚本
流程： 异步下载—>下载完成之后立即执行
风险： 若脚本需要操作DOM，当脚本执行的时候，DOM可能还未创建，需要自行监听DOMContentLoaded事件
示例： 适合不依赖其他脚本独立执行的代码(统计脚本，广告脚本等等) - defer脚本
流程： 异步下载—>下载完成之后，等待HTML解析完成按文档顺序执行，DOMContentLoaded事件之前执行
优势： 不阻塞解析，并且保证顺序执行，适合依赖脚或DOM操作
示例： 引入库（如 jQuery）及其插件时，确保插件在库之后执行。
- 特殊情况
- async和defer共存的情况下，async优先级更高，defer会被忽略
- 动态添加脚本，默认行为类似async，可设置async=false，模拟defer
- 执行顺序示例
<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下载的快慢决定的。
- 如何选择？
- 用 async： 脚本独立、无依赖、不操作 DOM 或能处理延迟执行。
- 用 defer： 需操作 DOM、有依赖关系或要求按顺序执行。
- 普通脚本： 建议仅在小型脚本或需同步执行时使用（如文档底部）。
通过合理使用 async 和 defer，可显著提升页面加载性能，同时确保脚本逻辑正确性。
