Hello,骚年们,当大家欢脱的Debug
接口的时候,有没有在意过Chrome Network
里Size
和Time
两项是两行呢?如下图箭头所示:
/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
的参数有助于我们对接口的性能有一个比较直观的感觉~