你知道Chrome Network ,Size 和 Time 为什么有两行参数吗?

6,814 阅读2分钟

Hello,骚年们,当大家欢脱的Debug接口的时候,有没有在意过Chrome NetworkSizeTime两项是两行呢?如下图箭头所示:

借这篇文章我们来分析一下它的含义,我们聚焦/api/v1/myaddress/all这个接口

关于Size列

Size有两行:

  • 第一行表示的是数据的传输时的大小,例如上图中的44.3KB
  • 第二行表示的是数据实际的大小441KB

解释:

因为这个接口返回数据量比较大,所以后端采取了gzip压缩,从响应头的Content-Encoding我们也能看出

在服务器端采取gzip压缩算法将将原有441KB压缩至44.3KB,传输大小缩短10倍,大大的提高了接口传输的效率。

需要注意的点:

gzip压缩只会压缩响应体内容, 所以适用于返回数据量大的时候,如果数据量太小的话,有可能会导致数据传输时的大小比实际大小要大(例如加入一些额外的响应头)

一般例如SpringMVC等Web框架可以指定数据大小到多少时使用gzip压缩


关于Time列

Time有两行:

  • 第一行表示从客户端发送请求到服务端返回所有数据所花费的总时间,对于上图来说就是598ms
  • 第二行表示的是从客户端发送请求到服务器端返回第一个字节所表示的时间,对于上图来说就是118ms 我们把鼠标放到最右边那个蓝条会有时间的详细说明,如下

下图是这些时间含义的解释

解释:

第一行的时间就代表了上图列的所有项目:例如解析dns建立连接等待服务器返回数据传输数据

第二行的时间是 总时间 - 数据传输的时间

总结

从上面的分析中我们看到 从客户端请求到服务器处理结束准备返回数据花了118ms算蛮久了),但是在进行传输数据的时候花费了480ms

每个用户网络带宽不一样,对于网慢的用户来说,这个体验可能更差,所以在编写代码的时候,返回的数据量要尽量精简。

个人觉得理解Chrome Network的参数有助于我们对接口的性能有一个比较直观的感觉~