chrome开发者工具network选项卡最下面的状态栏数据说明

你这到底指的是哪里?

在这里插入图片描述

以下图数据为例,逐个说明

在这里插入图片描述

72 requests

是指本次总共监听到了72个请求

35.8 kB transferred

通过网络加载的资源有35.8 kB

2.1 MB resources

本次监听到的所有请求加载的所有资源经过解压之后的原始大小

Finish: 1.38 s

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

DOMContentLoaded: 334 ms

DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签, 用时: 344毫秒

Load: 536 ms

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

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

DOMContentLoaded与Loaded补充

在这里插入图片描述
DOMContentLoaded与Loaded分别对应络请求上的标志线, 他们文字的颜色与标志线的颜色对应

参考文章

DOMContentLoaded与load的区别
Chrome控制台network底部的Finish,DOMContentLoaded和Load
Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值