开发调试|chrome控制台Timing内各字段解析

1,121 阅读2分钟

chrome Timing

在实际开发中,每当我们遇到页面渲染缓慢的情况我们就需要排查其中的问题。

而在这之中有一种情况是,同步请求,接口返回数据缓慢导致出现问题

排查接口请求

在我们判断接口请求的耗时时,会用到chrome的Timing,如下图:

timing.png

在图中展示的就是Timing的内容

Queueing 字段

请求文件顺序的队列

stalled 字段

浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商,以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接的时间

DNS Lookup 字段

时间执行DNS查找。每个新域pagerequires DNS查找一个完整的往返。 DNS查询的时间,当本地DNS缓存没有的时候,这个时间可能是有一段长度的,但是比如你一旦在host中设置了DNS,或者第二次访问,由于浏览器的DNS缓存还在,这个时间就为0了。

Initial connection 字段

建立TCP连接的时间,就相当于客户端从发请求开始到TCP握手结束这一段,包括DNS查询+Proxy时间+TCP握手时间。

SSL 字段

完成SSL握手所花费的时间。

Request sent 字段

请求第一个字节发出前到最后一个字节发出后的时间,也就是上传时间

Waiting(TTFB) 字段

请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte),发送请求完毕到接收请求开始的时间;这个时间段就代表服务器处理和返回数据网络延时时间了。服务器优化的目的就是要让这个时间段尽可能短。

Content Download 字段

收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间