【Javascript高级】如何获取浏览器请求数据的整个过程花费的所有时间详细信息(性能分析量化)

浏览器请求数据的整个过程花费的所有时间都包括哪些部分？

我们可以在Chrome Network Timing中可以查看一个请求在各个阶段所花费的时间：

1、Queueing

请求文件顺序的的排序
什么东西？
浏览器有线程限制的，发请求也不能所有的请求同时发送，所以，队列喽。
从添加到待处理队列
到实际开始处理的时间间隔标示

2、Stalled

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

3、DNS Lookup

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

4、Initial connection

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

5、Request sent

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

6、Waiting(TTFB)

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

7、Content Download

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

window.performance.timing中的相关属性语义？

各字段的含义如下：
$startTime$：有些浏览器实现为navigationStart，代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为：unload当前文档（即baidu.com）->请求下一文档（即google.com）。navigationStart的值便是触发unload当前文档的时间节点。
如果当前文档为空，则navigationStart的值等于fetchStart。
$redirectStart和redirectEnd$：如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点；
unloadEventStart和unloadEventEnd：如果前一个文档和请求的文档是同一个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0；
$fetchStart$是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存；
domainLookupStart和domainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于fetchStart；
$connectStart和conn$