chrome开发者工具Network

古城微笑少年丶 2022-02-16 15:13 458阅读 0赞

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文档请求的时间。（如下图）

20190422170936580.png

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

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

transferred

查看请求的总大小

requests

查看请求的总数量

发表评论

表情：
评论列表 （有 0 条评论，458人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Chrome 开发者工具介绍

    作为一个程序员我认为我们一定要对自己使用的工具很熟悉，这样才能在工作当中游刃有余，今天我要给大家讲的不是我们常常使用的编辑器，而是我们的Chrome浏览器控制台。 > Chr

    比眉伴天荒比眉伴天荒/ 0 赞/ 124 阅读

    相关 Chrome开发者工具-阅读列表

    Chrome的开发者工具是Chrome浏览器内置的编辑和调试利器，熟练使用chrome开发者工具是成为前端修炼的必由之路，来，来，来，一起提高。 1. [Chrome开发者

    墨蓝墨蓝/ 0 赞/ 365 阅读