当前位置: 首页 > Web前端 > HTML5

defer和async的区别

时间:2023-04-05 02:14:10 HTML5

浏览器遇到script脚本:没有defer或async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染script标签下的document元素之前,也就是说document元素被加载执行,不等待后续加载。具有异步性,加载和渲染后续文档元素的过程将与script.js的加载和执行并行(异步)执行。有defer,加载后续文档元素的过程会和script.js的加载并行(异步)进行,但是script.js的执行会在解析所有元素之后,在DOMContentLoaded事件触发之前。蓝线代表网络读取,红线代表执行时间,都是脚本;绿线代表HTML解析。这张图告诉我们以下几点:_defer_和_async_在网络读取(下载)上是一样的,都是异步的(相对于HTML解析)。两者的区别在于脚本的下载方式。显然_defer_是最接近我们对应用程序脚本加载和执行的要求的。关于_defer_,这张图没有提到的是,它是按照加载的顺序执行脚本的。这一点要好好利用_async_是乱序执行的高手。反正对于它来说,脚本的加载和执行是紧挨着的,所以不管你声明的顺序如何,只要加载了,就会立即执行。仔细想想,_async_对于应用程序脚本来说用处不大,因为它根本不考虑依赖关系(即使是最低阶执行),但它非常适合那些不能依赖或被任何脚本依赖的脚本,最典型的例子:GoogleAnalytics