在 Chrome 调试工具 Network tab 下，每个请求都有一个 Waterfal diagrams(瀑布图)，点击具体接口，Timming(时序)位置会有具体描述。它记录了网络请求各个阶段的耗时，可以用于分析页面加载性能。

时序分解阶段明细（Timing breakdown phases explained）

下面是在Timing标签页中能看到的各个阶段的更多信息:（Here’s more information about each of the phases you may see in the Timing tab）

  1. 资源调度(Resource Scheduling)
  • Queueing(排队). The browser queues requests when:（浏览器在以下情况会排队请求）
    • There are higher priority requests.（有更高优先级的请求）
    • There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only. (当前请求的 origin/domain，已经有 6 个 TCP 连接打开，这是限制。仅应用于 HTTP/1.0 and HTTP/1.1)
    • The browser is briefly allocating space in the disk cache（浏览器正在磁盘缓存中短暂分配空间）
  1. Connecttion Start(连接开始)
  • Stalled(停滞/暂缓). The request could be stalled for any of the reasons described in Queueing. （处于排队中描述的任何原因，请求都有可能停滞/暂缓）
  • DNS Lookup(DNS查询). The browser is resolving the request’s IP address. （域名解析成IP。在浏览器和服务器进行通信之前, 必须经过DNS查询, 将域名转换成IP地址. 在这个阶段, 你可以处理的东西很少. 但幸运的是, 并非所有的请求都需要经过这一阶段.）
  • Initial connection(初始化连接). The browser is establishing a connection, including TCP handshakes/retries and negotiating an SSL.（浏览器正在创建一个连接，包括握手/重试）和 协商SSL。在浏览器发送请求之前, 必须建立TCP连接. 这个过程仅仅发生在瀑布图中的开头几行, 否则这就是性能问题.
  • SSL(SSL协商) SSL/TLS Negotiation 如果你的页面是通过SSL/TLS这类安全协议加载资源, 这段时间就是浏览器建立安全连接的过程.
  • Proxy negotiation(代理协商). The browser is negotiating the request with a proxy server. （浏览器正在与代理服务器协商请求）
  1. Request/Response(请求/响应)
  • Request sent(请求发送). The request is being sent. 请求开始发送
  • ServiceWorker Preparation(ServiceWorker准备). The browser is starting up the service worker. （浏览器正在启动 Service Worker）
  • Request to ServiceWorker(请求到ServiceWorker). The request is being sent to the service worker.（请求被发送到 service worker）
  • Waiting (TTFB) 等待. The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response.（浏览器正在等待响应的第一个字节。 TTFB代表到第一个字节的时间。 此时间包括一次往返延迟和服务器准备响应所花费的时间） TTFB 是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间. 我们用这个指标来判断你的web服务器是否性能不够, 或者说你是否需要使用CDN.
  • Content Download. The browser is receiving the response. （浏览器正在接收响应），这是浏览器用来下载资源所用的时间. 这段时间越长, 说明资源越大. 理想情况下, 你可以通过控制资源的大小来控制这段时间的长度.
  • Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.（浏览器正在通过HTTP / 2服务器推送接收此响应的数据）
  • Reading Push. The browser is reading the local data previously received.（浏览器正在读取先前接收的本地数据。）

参考资料及扩展：