【HTML】script标签的async和defer

script 上的 async 和 defer 属性用于控制外联脚本的执行时机。

DOMContentLoaded 事件会在初始的 html 文档被完全加载和解析完成后触发，可以用来检测 html 页面是否加载完毕。

默认情况（无 async 和 defer）

默认情况下浏览器解析 html 时遇到 script 标签后，异步加载 script 文件，并且继续解析 html。script 文件加载完毕后按照 html 中 script 标签的顺序依次执行。

会延迟 DOMContentLoaded 事件触发。

defer

设置 defer 后，script 标签会在页面解析完毕且所有 defer 脚本下载完毕后按顺序执行。

会延迟 DOMContentLoaded 事件触发

async

设置 async 后，会在下载完脚本文件后立即执行。

不会延迟 DOMContentLoaded 事件。

参考

script 标签中的 defer 和 async