了解资源加载时序

了解网络下载资源的阶段至关重要。这是修复加载问题的基础。

 1、了解资源时序的阶段。
 2、知道每个阶段提供给Resource Timing(资源时序)API。
 3、 在时间轴图表中识别性能问题的不同指示。如连续的透明条或大块绿色。

所有网络请求都被视为资源。当它们通过网络检索时，分为不同的生命周期。Network(网络)面板使用的Resource Timing API和提供给开发者的API是一样的。
注意: 当使用跨源资源的Resource Timing API时， 请确保所有资源都有CORS头信息。
Resource Timing API提供了关于每个单独资源接收时间的详细信息。 请求生命周期的主要阶段是：

• Redirect(重定向)
  立即开始startTime。
  如果发生重定向, redirectStart也会开始计时。
  如果重定向发生在此阶段结束时，那么redirectEnd将被采用。
• App Cache(应用程序缓存)
  如果浏览器有缓存，将采用fetchStart时间。
• DNS
  domainLookupStart 记录DNS请求开始的时间。
  domainLookupEnd 记录DNS请求结束的时间。
• TCP
  connectStart 记录开始连接到服务器的时间。
  如果用了TLS或SSL，secureConnectionStart记录开始连接时间。
  connectEnd 记录连接完毕时间。
• Request(请求)
  requestStart记录请求发送到服务器的时间。
• Response(响应)
  responseStart记录最开始的响应时间。

在DevTools中查看responseEnd记录响应结束时间。
Network(网络)面板中查看完整时序信息，您有三个选择。

   将鼠标悬停在时间轴列下的时间图表上。这将显示一个弹出窗口，显示完整的时序数据。
   点击任何Requests Table(请求列表)中的条目，并打开该条目的Timing(时序)标签页。
   使用Resource Timing API(资源时序API)从JavaScript中检索原始数据。

• Queuing(排队)
  如果一个请求排队，则表明：

  • 请求被渲染引擎推迟，因为它被认为比关键资源（如脚本/样式）的优先级低。这经常发生在 images（图像） 上。
  • 这个请求被搁置，在等待一个即将被释放的不可用的TCP socket。
  • 这个请求被搁置，因为浏览器限制。在HTTP 1协议中，每个源上只能有6个TCP连接
  • 正在生成磁盘缓存条目（通常非常快）。

• Stalled/Blocking (停止/阻塞)
  发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞。这个时间包括代理协商的时间。

• Proxy Negotiation (代理协商)
  与代理服务器连接协商花费的时间。

• DNS Lookup (DNS查找)
  执行DNS查找所用的时间。 页面上的每个新域都需要完整的往返(roundtrip)才能进行DNS查找。

• Initial Connection / Connecting (初始连接/连接)
  建立连接所需的时间， 包括TCP握手/重试和协商SSL。

• SSL
  完成SSL握手所用的时间。

• Request Sent / Sending (请求已发送/正在发送)
  发出网络请求所花费的时间。 通常是几分之一毫秒。

• Waiting (TTFB) (等待)
  等待初始响应所花费的时间，也称为Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还捕获到服务器发送数据的延迟时间。

• Content Download / Downloading (内容下载/下载)
  接收响应数据所花费的时间。(愚人码头注：从接收到第一个字节开始，到下载完最后一个字节结束)