一、脑补
在Chrome--->Network----> Timing中可以查看一个请求在各个阶段所花费的时间。
Timing中各个字段的意思发:
**1、Queueing:**从增加到等待处理队列到实际开始处理的时间间隔------浏览器也有线程机制,所有的请求不能同时发送,也需要队列排队处理请求。
**2、Stalled:**浏览器从请求队列获取到要发出的请求到请求可以发出的等待时间(通常为代理协商以及等待可复用的TCP连接释放)
**3、DNS Lookup:**DNS执行查找的一个完整的往返时间(将域名解析为IP)。当本地DNS缓存没有的时候需要消耗这段时间,否则基本都为0;
4、Initial connection:建立TCP连接的时间(即DNS查询+Proxy时间+TCP握手时间等)
5、Request sent:请求第一个字节发出前到最后一个字节发出后的时间(即上传时间);
6、Waiting(Time To First Byte,TTFB):请求发出到收到响应的第一个字节所花费的时间;
7、Content Download:收到响应的第一个字节到接受完最后一个字节的时间(即下载时间);
二、客户端/服务端时间同步倒计时
javascript
let now = new Date().getTime();
// 伪代码 -- 获取响应时间,相当于success里的new date().getTime();
let end = getResponseTime();
// 伪代码 -- 获取服务器响应时提供的服务器时间,success后从body里面获取的数据,由后端塞进去的;
var serverTime = getServerTime();
// 获取TTFBTime,具体怎么获取去网上搜,这里不说了,说下去太多,本文只提供思路;
var TTFBtime = getTTFBTime();
// 得到当前服务器时间,该时间一般偏快于服务器时间0~10ms左右,具体原因从第一节"脑补"中就可以得知;
var currServerTime = serverTime + (end - now) - TTFBTime;
* 还可以考虑NTP时间同步,可以继续探索
三、扩展与思考---接口优化/请求时长优化
根据上面脑补后,咱们知道"发送请求完毕"到"开始接收请求"的时间就代表服务器处理业务的时间和和返回数据的网络延时时间。
那么,咱们做接口优化方面就可以根据这个点来作为依据,从而做到更精准的优化效果。