在 HTML 中,script 标签可以使用 deferasync 属性来控制外部 JavaScript 脚本加载和执行的方式deferasync 都可以提高页面的加载性能,主要区别整理如下。

区别点 defer async
加载顺序 按顺序加载 异步加载,不保证加载顺序
执行顺序 按文档中出现的顺序执行 加载完立即执行,不保证执行顺序
执行时机 HTML 文档完全解析后执行
但在 DOMContentLoaded 事件之前
可能在 HTML 文档解析完成之前执行
阻塞行为 不会阻塞 HTML 的解析,浏览器解析 HTML 文档,脚本在后台异步加载 不会阻塞 HTML 的解析,浏览器解析 HTML 文档,脚本在后台异步加载
适用场景 需要保证执行顺序,并在文档解析完成后再执行的脚本。如依赖于 DOM 的脚本。 不依赖其他脚本不依赖 DOM 的独立脚本。如分析工具或广告脚本。

注意:如果不使用 deferasync 属性,浏览器在遇到 <script> 标签时会阻塞 HTML 解析,直到脚本加载和执行完毕后才继续解析。使用 deferasync 后,脚本的记载是异步的,由网络进程实现,不会阻塞HTML 解析;脚本的执行是同步的,会占用渲染进程,defer 脚本的执行不会阻塞解析,但 async 脚本可能会阻塞 HTML 解析。