DOMContentLoaded 和 Load与Finish

DOMContentLoaded 和 Load


DOMContentLoaded 和 Load 分别对应 页面 DOMContentLoaded 和 Load 事件触发的时间点,即:

DOMContentLoaded:DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签</html> 。

Load:页面加载完毕。 DOM树构建完成后,继续加载html/css 中的图片资源等外部资源,加载完成后视为页面加载完毕。

DOMContentLoaded 会比 Load 时间小,两者时间差大致等于外部资源加载的时间。

Finish


Finish 时间与DOMContentLoaded 和 Load 并无直接关系。

Finish 时间是页面上所有 http 请求发送到响应完成的时间,HTTP1.0/1.1 协议限定,单个域名的请求并发量是 6 个,即Finish是所有请求(不只是XHR请求,还包括DOC,img,js,css等资源的请求)在并发量为6的限制下完成的时间。

Finish 的时间比 Load 大,意味着页面有相当部分的请求量,

Finish 的时间比 Load 小,意味着页面请求量很少,如果页面是只有一个 html文档请求的静态页面,Finish时间基本就等于HTML文档请求的时间。(如下图)


Finish小于load

页面发送请求和页面解析文档结构,分属两个不同的线程,

所以 Finish 时间与DOMContentLoaded 和 Load 并无直接关系。

参考:https://segmentfault.com/q/1010000011840948

突然发现空的html文件Load小于DOMContentLoaded

多次测试发现和chrome版本有关系, 我是83.0.4103.97只有这个版本有问题,同事的81与84都没问题;


渲染流程

Navigation Timing API-Chrome文档 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。