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

下面的图很清晰地解释了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