阻塞dom解析和不阻塞dom解析的资源 (DOMContentLoaded)和(window onload)

转载:https://blog.csdn.net/liuanpingfirst/article/details/85276720

下面的图很清晰地解释了dom解析与不同js的加载的不同:

 

绿色表示dom解析,灰色表示阻塞,紫色表示js加载(下载),红色表示js执行

 

会阻塞dom解析的资源有:

1.内联css

2.内联js

3.普通外联js  ,加载情况如下

dom解析一旦遇到普通外联js,就会停下来下载,下载完成后执行,执行后再继续dom解析,灰色代表阻塞时间

4.外联defer js 

外联defer js与普通js不同的是defer js的下载不阻塞dom解析,但是它的执行会阻塞dom,虽然说是html已经解析完了,但dom的解析完成取决于html和阻塞js的完成,defer js,内联js,普通外联js这三种就属于阻塞js。所以说defer js是会阻塞dom解析的

5.js之前的外联css

dom解析遇到script标签时,会查找之前是否有外联css,如果有就加载,这是因为这种情况下的js有可能会用到这个外联css的样式(比如说那个计算最终样式的getComputedStyle),所以这时dom解析也会被外联css阻塞

不会阻塞dom解析的资源有:

1.

async js(半阻塞),为什么说是半阻塞,下面会解释

 

async js的下载是不阻塞的,上面的绿色和紫色就是同步的,但是执行确实会阻塞dom解析,想像一下这种情况:

async js下载完,但html没有解析完,所以html会去执行下载好的js,这个时候就阻塞了dom解析,上面的灰色就是阻塞时间。

但是如果html和阻塞的其他资源都解析完了,这个时候async js还没有下载完,那么async js就不会阻塞dom解析,其实你想想:

html和阻塞的其他资源都解析完了也就意味着dom解析完成,这个时候就算async js执行也不会阻塞dom解析了,因为人家dom解析已经完成了。

 

2.script标签之后的外联css

在上面讲阻塞的时候,讲到js之前的外联css会阻塞dom解析,所以现在讲script标签之后的外联css是不会阻塞dom解析的,只要外联css后面没有script标签就不会阻塞dom解析

3.image

下面的多张图片加载就表明图片加载是异步的,不阻塞dom解析

4.iframe

 

DOMContentLoaded和window.onload的触发时机不同在哪?

DOMContentLoaded:当dom解析完成后就会触发,这是跟上面阻塞dom解析的资源请求息息相关的,当这些阻塞dom解析的资源全部加载完,就会触发DOMContentLoad

window.onload:当阻塞资源与非阻塞资源全部加载完才会触发。

这也就意味着window.onload的触发时机是比DOMContentLoad更晚的,想尽早操作dom就可以使用DOMContentLoaded

如何使用DOMContentLoaded

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页