chrome调试工具Network一些参数

1,283 阅读4分钟

今天简单说一下chrome开发者工具(DevTools)的Network,就只是几个模块简介一下。前端开发,对这个应该都特别熟悉。

Network网络面板,展示页面中所有请求的列表,可以查看各个请求的详细信息,请求的信息,响应的信息,还有各种时间线等。

图片1.png

本来想用画图工具把每一个都标示一下,奈何有点菜,就直接介绍几个重要的,其他可以自己点一点看一看。

控制器: Preserve log:跳转页面或者刷新页面还保留之前发起的请求详情。可以用来追踪一些接口。 Disable cache:在调试一些加载时间或者性能的时候需要用到,禁止从缓存中加载。 No throttling:用来设置网络带宽,模拟一些网络场景,还可以自定义。

过滤器: 过滤你想看的内容和详情,点击右上角的设置图标,有平时用不到的四个过滤。Show overview是控制时间线的展示,Capture screenshots是控制抓图信息的展示。

网页截图信息: 看见页面加载过程的显示内容,如果追求性能和体验的极致,那就需要通过这个去分析。

时间线: 用来展示各个请求所用的时间,可以非常详细的知道页面的加载过程和时间。相当于图形统计,一般没用,主要还是看详细列表。

详细列表: 这个是使用最多的,可以查看每个请求从发起到完成的所有状态。

下载信息: requests是请求数量,transferred是通过网络加载的资源大小,resources是页面加载所有资源大小,finish是所有请求发起到响应完成的时间,一般来说是比Load大。如果只有一个html静态,一般是差不多。DOMContentLoaded在MDN上面的解释是当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。Load在MDN上面的解释是当整个页面及所有依赖资源如样式表和图片都已完成加载时,将触发load事件。

DOMContentLoaded和Load这边要提一下,现在很多都会通过页面渲染流程来说DOMContentLoaded的执行时机,也确实没错,只不过要明确一个概念,DOMContentLoaded只需要HTML文档被完全加载和解析完成后就会触发。为了这个专门另外分享了一篇文章,可以看看。

最后看看最重要的详细列表:

图片2.png

有很多参数,也可以右键自定义要显示的参数,一些不理解的可以显示看看内容就很容易理解了。name、status、size、time、waterfall、connection ID(tcp连接id)这几个重要一点,其他的可以随便看看。还可以排序。

点击具体的请求可以看见详细信息,应该也不用说,主要是看请求响应的详情。

看看时间线:

图片3.png

queueing:排队,浏览器给每个域名都限制了连接最大的数量,超过了就要排队等待。

stalled:停滞,发起连接之前,有些原因使得连接过程被推迟,主要就是TCP的连接检测阶段。

Proxy Negotiation:代理协商阶段,本来找到了一个,现在又找不到了,所以图片没有,使用了代理服务器会出现这个,它表示代理服务器连接协商所用的时间。

DNS Lookup:域名解析,也就是dns解析域名和ip的映射。

Initial connection:初始化连接,和服务器建立连接的阶段,这包括了建立 TCP 连接所花费的时间。

SSL:使用https才有,额外的 SSL 握手时间,这个过程主要是用来协商一些加密信息的。

Request sent:数据发送,通常这个阶段非常快,因为只需要把浏览器缓冲区的数据发送出去就结束了,并不需要判断服务器是否接收到了,所以这个时间通常不到 1 毫秒。

Waiting (TTFB):通常称为“第一字节时间”,TTFB 是反映服务端响应速度的重要指标,从发送请求到收到响应之间的空隙,对服务器来说,TTFB 时间越短,就说明服务器响应越快。

Content Download:接收到第一个字节之后,进入陆续接收完整数据的阶段,这意味着从第一字节时间到接收到全部响应数据所用的时间。如果时间很长,那就是文件太大。

coding个人笔记 公众号