DOMContentLoaded与load的区别触发时机(转)

Posted liontone

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOMContentLoaded与load的区别触发时机(转)相关的知识,希望对你有一定的参考价值。

一、DOMContentLoaded 与 load 事件

关于 DOMContentLoaded 和 load 事件,MDN对他们是这样描述的:DOMContentLoaded 文档地址load 文档地址

DOMContentLoaded 意思就是:当初始的 html 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。

load 意思就是:当一个资源及其依赖资源已完成加载时,将触发 load 事件。

区别小结
简而言之,二者触发时间的区别在于:DOMContentLoaded 在 HTML 文档本解析之后触发,而 load 是在 HTML 所有相关资源被加载完成后触发。
为了感受这两个事件,可以使用 Chrome 打开一个任意网页。打开控制台的 Network 面板。

 
技术图片
 
可以看到图上有两条线:一条蓝线,代表 DOMContentLoaded 事件,触发时间为 1.50s;一条红线,代表 load 事件,触发时间为 5.54s。
如果想要更直观地感受二者的区别,还可以 点击这里 查看效果。

 

二、HTML 解析过程与 DOMContentLoaded 触发时机

我们已经知道 DOMContentLoaded 的触发时间为:当 HTML 文档被加载和解析完成。那么我们还需要理解 HTML 的解析过程。

  1.  

     

    在既没有 CSS 也没有 JS 的情况下,HTML 文档的解析过程为:
     
    技术图片
     

    DOMContentLoaded 事件的触发时机为:HTML 解析为 DOM 之后。

  2.  

     

    有 CSS 无 JS 的情况下,HTML 文档解析过程为:
     
    技术图片
     

    这里与 1. 不同的地方在于,渲染树的生成是基于 DOM 和 CSSOM 的。但是触发 DOMContentLoaded 的时间依然是在 HTML 解析为 DOM 后,无论此时 CSS 解析为 CSSOM 的过程是否完成。

  3. 当有 JS 时,HTML 文档解析过程为:
     
    技术图片
     

    有一个问题:关于首屏时间?(https://www.cnblogs.com/caizhenbo/p/6679478.html)
    “计算这个网页从空白到出现内容所发费的时间”。那怎么计算这段时间?这段时间其实就是 HTML 文档加载和解析的时间。也就是 DOMContentLoaded 事件触发之前所经历的时间。


作者:人总要靠自己_趁年轻去努力
链接:https://www.jianshu.com/p/c3384c315d40
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以上是关于DOMContentLoaded与load的区别触发时机(转)的主要内容,如果未能解决你的问题,请参考以下文章

DOMContentLoaded与load的区别

DOMContentLoaded与load的区别

[转]DOMContentLoaded与load的区别

事件DOMContentLoaded和load的区别

事件DOMContentLoaded和load的区别

Load 和 DOMContentLoaded 区别