script 标签中 defer 和 async 属性的区别
script 标签中的 defer Vs. async
在 HTML 中，script 标签可以使用 defer 和 async 属性来控制外部 JavaScript 脚本加载和执行的方式。defer 和 async 都可以提高页面的加载性能，主要区别整理如下。
| 区别点 | defer | async |
|---|---|---|
| 加载顺序 | 按顺序加载 | 异步加载，不保证加载顺序 |
| 执行顺序 | 按文档中出现的顺序执行 | 加载完立即执行，不保证执行顺序 |
| 执行时机 | HTML 文档完全解析后执行， 但在 DOMContentLoaded 事件之前 | 可能在 HTML 文档解析完成之前执行 |
| 阻塞行为 | 不会阻塞 HTML 的解析，浏览器解析 HTML 文档，脚本在后台异步加载 | 不会阻塞 HTML 的解析，浏览器解析 HTML 文档，脚本在后台异步加载 |
| 适用场景 | 需要保证执行顺序，并在文档解析完成后再执行的脚本。如依赖于 DOM 的脚本。 | 不依赖其他脚本、不依赖 DOM 的独立脚本。如分析工具或广告脚本。 |
注意：如果不使用
defer或async属性，浏览器在遇到<script>标签时会阻塞 HTML 解析，直到脚本加载和执行完毕后才继续解析。使用defer或async后，脚本的记载是异步的，由网络进程实现，不会阻塞HTML 解析；脚本的执行是同步的，会占用渲染进程，defer 脚本的执行不会阻塞解析，但 async 脚本可能会阻塞 HTML 解析。