码迷,mamicode.com
首页 > Web开发 > 详细

DevTool-Network

时间:2019-11-17 18:05:02      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:位置   size   竖线   net   一个   idt   表示   时间差   绿色   

 技术图片

如图所示,图中蓝线表示DOMContentLoaded事件触发时经过的时间,DOM树构建花费的时间。

图中红线表示onload事件触发时经过的时间,也是所有的资源(图片等)下载处理完成的时间。

技术图片

图中绿色的条表示等待服务器响应的时间;蓝色的条表示资源下载的时间。

由此可知,第一个蓝色条结束的位置,是HTML下载完成的位置。

由它到蓝色竖线之间的时间差是构建DOM树花费的时间。

也可知:图片不影响浏览器渲染;只影响onload事件。

 

DevTool-Network

标签:位置   size   竖线   net   一个   idt   表示   时间差   绿色   

原文地址:https://www.cnblogs.com/lyraLee/p/11877087.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!