Network Resource Timing 个人请求慢在哪

前言

若是咱们发现本身页面加载慢，一般会打开DevTools的Network栏找到具体的慢的请求，那他到底慢在哪呢？

Timing包含的内容

1. Queuing
2. Stalled/Blocking
3. Proxy Negotiation
4. DNS Lookup
5. Initial Connection / Connecting
6. SSL
7. Request Sent / Sending
8. Waiting (TTFB)
9. Content Download / Downloading

一、Queuing

主要是资源加载的排队

• 不可优化部分

  • 请求被渲染引擎推迟，如脚本/样式会优先，图片推迟。
  • 生成磁盘缓存条目所用的时间（一般很是迅速）。

• 可优化部分

  • 请求已被暂停，以等待将要释放的不可用TCP套接字。

    浏览器线程池不是无限的，须要等待socket(TCP)释放。
    
    合并小文件减小请求。

  • 请求被暂停，HTTP 1上，浏览器仅容许每一个源拥有六个TCP链接。

    主要是对服务器的保护。
    
    能够把资源放到不一样的域名上，参考`域名发散`。

二、Stalled/Blocking

请求等待发送所用的时间。Queuing中的全部缘由加上代理协商所用的任什么时候间。

• 不可优化部分

  • Queuing中不可优化部分
  • 代理协商

• 可优化部分

  • Queuing中可优化部分
  • 相同的N次请求 缓存锁，通常资源加载不会加载相同的，但ajax有可能，加timestamp可解决。

注意1：

Stalled是 Queuing以后的下一个状态， Stalled开始时已经出队，他们太显著的差异（是否使用 proxy/ssl），他们之间没有 and/or/parent/child的关系，有建议将 queueing/stalled更名为 postponed/awaiting socket，具体能够看看 chromium issue。

注意2：

另外，同源连接复用可能引起这样的问题，因为以前存在可用连接，此时浏览器但愿重用以前的链接以节省资源，用以前的一个socket去发起链接，后收到服务器返回的连接已重置/不存在，再从本来可用连接中找可用连接，引起长时间等待，具体能够看看 chrome-stalled-problem-resolving-process

三、Proxy Negotiation

与代理服务器链接协商所用的时间。

主要是浏览器经过代理服务器去服务目标服务，如本地代理Fiddler，通常没法优化。

四、DNS Lookup

DNS查询所用的时间

• 可优化部分

  • 不要有太多的新域名（可能递归查询绕地球一圈），参考域名收敛。
  • 减小DNS解析路径（若是内部有不少DNS服务器解析）。

五、Initial Connection / Connecting

创建链接所用的时间，包括TCP 握手/重试和协商 SSL的时间。

六、SSL

完成SSL握手所用的时间。

• 可优化部分

  • 须要区分好什么资源须要https，什么须要http。

七、Request Sent / Sending

发出网络请求所用的时间。一般不到一毫秒。

八、Waiting (TTFB)

等待初始响应所用的时间，也称为至第一字节的时间。

• 可优化部分

  * 服务器响应速度
  
  * 服务器网络带宽

九、Content Download / Downloading

接收响应数据所用的时间。

• 可优化部分

  * 服务器网络带宽
  
  * 单个文件大小

其余

大佬们总说要写文章，第一次写文章，就搬运了一下都感受好难哦。

有不对的地方欢迎大佬们指出。

参考

Understanding Resource Timing
Chrome Cache Lock
Chromium Issues 476749
chrome-stalled-problem-resolving-process