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