性能信息收集（分析、代码、DEMO三合一）

Myth丶恋晨 2022-05-31 23:27 188阅读 0赞

### 知识储备 ###

1.  浏览器加载：[浏览器~加载，解析，渲染][Link 1]
2.  获取各种时间：[Performance API][]

### DEMO 页面 ###

[http://www.jianwangsan.cn/job/\#/performance][http_www.jianwangsan.cn_job_performance]

### github代码 ###

[performance-timing][]

### 浏览器加载过程 ###

这里指网页，而不是任何资源。

时间线参考下图：

![这里写图片描述][SouthEast]

1.  【redirect】：什么时候会触发重定向呢？很简单，`http://example.com/` 就写成 `http://example.com`（缺少斜杠）就会触发重定向；
2.  【App cache】：该阶段缓存检查（参照下面表格说明），简单来说，`浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前`。注意：`domainLookupStart - fetchStart` 这段时间，包括检查缓存的时间，但还包括【App cache】阶段和【DNS】阶段之间的空隙时间；
3.  【DNS】：用户访问 url，DNS服务器根据域名找IP，然后去向目标服务器发起http请求，并被响应的时间：（`domainLookupStart - domainLookupEnd`）
4.  【TCP】：该阶段是和服务器建立链接的时间，`connectEnd - connectStart`（该阶段和【DNS】阶段的结尾中间有空隙）；
5.  【Request】：该阶段指发起请求，到接收到返回信息的第一个字节的消耗时间，`performance.timing.responseStart - performance.timing.requestStart`（该阶段和【TCP】结束的阶段有空隙）；
6.  【Response】：该阶段指从接收到返回信息的第一个字节，到接收完毕的时间，`performance.timing.responseEnd - performance.timing.responseStart`；
7.  【Processing】：该阶段的三个状态（状态改变会触发 `document.onreadystatechange` 这个回调函数，参照[这一篇问答][Link 2]）
    
    7.1. **loading** 指 document 仍在加载；
    
    7.2. **interactive** 指文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载（jQuery 的 `$.ready()`）；
    
    7.3. **complete** 指文档和所有子资源已完成加载。状态表示 load 事件即将被触发（window.onload）
8.  【onload】：这个阶段两个状态：
    
    8.1. 在执行 `window.onload` 这个函数时，`performance.timing.loadEventStart` 已经存在，但是 `performance.timing.loadEventEnd` 还是 0；  
    8.2. 执行完 `window.onload` ，`performance.timing.loadEventEnd` 就有值了

几个解释：

1.  `performance.timing.responseEnd - performance.timing.requestStart`： 这个指 html 文件从发起请求，到加载完毕需要的时间，而不是指所有资源加载完的时间；
2.  `navigationStart`： 这是一切的开始；

### 一些关键信息 ###

### API ###

> api： performance.timing

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationStart</td> 
   <td>准备加载新页面的起始时间</td> 
  </tr> 
  <tr> 
   <td>redirectStart</td> 
   <td>如果发生了HTTP重定向，并且从导航开始，中间的每次重定向，都和当前文档同域的话，就返回开始重定向的timing.fetchStart的值。其他情况，则返回0</td> 
  </tr> 
  <tr> 
   <td>redirectEnd</td> 
   <td>如果发生了HTTP重定向，并且从导航开始，中间的每次重定向，都和当前文档同域的话，就返回最后一次重定向，接收到最后一个字节数据后的那个时间.其他情况则返回0</td> 
  </tr> 
  <tr> 
   <td>fetchStart</td> 
   <td>如果一个新的资源获取被发起，则 fetchStart必须返回用户代理开始检查其相关缓存的那个时间，其他情况则返回开始获取该资源的时间</td> 
  </tr> 
  <tr> 
   <td>domainLookupStart</td> 
   <td>返回用户代理对当前文档所属域进行DNS查询开始的时间。如果此请求没有DNS查询过程，如长连接，资源cache,甚至是本地资源等。 那么就返回 fetchStart的值</td> 
  </tr> 
  <tr> 
   <td>domainLookupEnd</td> 
   <td>返回用户代理对结束对当前文档所属域进行DNS查询的时间。如果此请求没有DNS查询过程，如长连接，资源cache，甚至是本地资源等。那么就返回 fetchStart的值</td> 
  </tr> 
  <tr> 
   <td>connectStart</td> 
   <td>返回用户代理向服务器服务器请求文档，开始建立连接的那个时间，如果此连接是一个长连接，又或者直接从缓存中获取资源（即没有与服务器建立连接）。则返回domainLookupEnd的值</td> 
  </tr> 
  <tr> 
   <td>(secureConnectionStart)</td> 
   <td>可选特性。用户代理如果没有对应的东东，就要把这个设置为undefined。如果有这个东东，并且是HTTPS协议，那么就要返回开始SSL握手的那个时间。 如果不是HTTPS， 那么就返回0</td> 
  </tr> 
  <tr> 
   <td>connectEnd</td> 
   <td>返回用户代理向服务器服务器请求文档，建立连接成功后的那个时间，如果此连接是一个长连接，又或者直接从缓存中获取资源（即没有与服务器建立连接）。则返回domainLookupEnd的值</td> 
  </tr> 
  <tr> 
   <td>requestStart</td> 
   <td>返回从服务器、缓存、本地资源等，开始请求文档的时间</td> 
  </tr> 
  <tr> 
   <td>responseStart</td> 
   <td>返回用户代理从服务器、缓存、本地资源中，接收到第一个字节数据的时间</td> 
  </tr> 
  <tr> 
   <td>responseEnd</td> 
   <td>返回用户代理接收到最后一个字符的时间，和当前连接被关闭的时间中，更早的那个。同样，文档可能来自服务器、缓存、或本地资源</td> 
  </tr> 
  <tr> 
   <td>domLoading</td> 
   <td>返回用户代理把其文档的 “current document readiness” 设置为 “loading”的时候</td> 
  </tr> 
  <tr> 
   <td>domInteractive</td> 
   <td>返回用户代理把其文档的 “current document readiness” 设置为 “interactive”的时候.</td> 
  </tr> 
  <tr> 
   <td>domContentLoadedEventStart</td> 
   <td>返回文档发生 DOMContentLoaded事件的时间</td> 
  </tr> 
  <tr> 
   <td>domContentLoadedEventEnd</td> 
   <td>文档的DOMContentLoaded 事件的结束时间</td> 
  </tr> 
  <tr> 
   <td>domComplete</td> 
   <td>返回用户代理把其文档的 “current document readiness” 设置为 “complete”的时候</td> 
  </tr> 
  <tr> 
   <td>loadEventStart</td> 
   <td>文档触发load事件的时间。如果load事件没有触发，那么该接口就返回0</td> 
  </tr> 
  <tr> 
   <td>loadEventEnd</td> 
   <td>文档触发load事件结束后的时间。如果load事件没有触发，那么该接口就返回0</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://www.jianshu.com/p/e141d1543143
[Performance API]: http://javascript.ruanyifeng.com/bom/performance.html
[http_www.jianwangsan.cn_job_performance]: http://www.jianwangsan.cn/job/#/performance
[performance-timing]: https://github.com/qq20004604/performance-timing
[SouthEast]: /images/20220601/03430a1baadf4cf182bab89989624e79.png
[Link 2]: https://segmentfault.com/q/1010000000667904