【2021-07-12】浅谈script标签中的async和defer

[superDCH]

defer是“渲染完再执行”，async是“下载完就执行”。如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

总结

(1)没有defer或async属性，浏览器会立即下载并执行相应的脚本，并且在下载和执行时页面的处理会停止。(停止渲染,开始下载和执行)
(2)有了defer属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，等到文档解析完成后脚本才会执行。(下载和渲染同步进行,渲染完开始执行)
(3)有了async属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，下载完成后立即执行，执行过程中页面处理会停止。(下载和渲染同步进行,下载完停止渲染,开始执行)
(4)如果同时指定了两个属性，则会遵从async属性而忽略defer属性。

参考: https://blog.csdn.net/weixin_42561383/article/details/86564715