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 解析。