資源計時

資源載入時間戳

圖 1. 資源載入時間戳（來源）。

應用程式可以獲取資源載入各個階段的時間戳。此 API 提供的時間戳是：

1. startTime：資源載入過程開始前的即時時間戳。
2. redirectStart：發起重定向的獲取操作的時間戳。
3. redirectEnd：在收到最後一個重定向響應的最後一個位元組後的即時時間戳。
4. workerStart：Service Worker 執行緒開始前的即時時間戳。
5. fetchStart：瀏覽器開始獲取資源前的即時時間戳。
6. domainLookupStart：瀏覽器開始為資源進行域名查詢前的即時時間戳。
7. domainLookupEnd：瀏覽器完成為資源進行域名查詢後的即時時間戳。
8. connectStart：使用者代理開始建立與伺服器連線以檢索資源前的即時時間戳。
9. secureConnectionStart：如果資源是透過安全連線載入的，則在瀏覽器開始握手過程以保護當前連線前的即時時間戳。
10. connectEnd：瀏覽器完成與伺服器建立連線以檢索資源後的即時時間戳。
11. requestStart：瀏覽器開始從伺服器、快取或本地資源請求資源的即時時間戳。
12. responseStart：瀏覽器從伺服器、快取或本地資源接收到響應的第一個位元組後的即時時間戳。
13. responseEnd：瀏覽器接收到資源的最後一個位元組後的即時時間戳，或者傳輸連線關閉前的即時時間戳，以較早者為準。

資源大小

PerformanceResourceTiming 介面有三個屬性可用於獲取資源的尺寸資料。transferSize 屬性返回獲取資源的大小（以位元組為單位），包括響應頭欄位和響應體內容。

encodedBodySize 屬性返回從獲取（HTTP 或快取）中接收到的內容體的大小（以位元組為單位），在移除任何應用的編碼之前。decodedBodySize 返回從獲取（HTTP 或快取）中接收到的訊息體的大小（以位元組為單位），在移除任何應用的編碼之後。

其他屬性

PerformanceResourceTiming 介面提供了額外的資源資訊。請參閱參考文件以獲取完整的屬性列表。

典型的資源時序指標

PerformanceResourceTiming 條目提供的資訊通常用於以下類別的計算：

• 測量 TCP 握手時間 (connectEnd - connectStart)
• 測量 DNS 查詢時間 (domainLookupEnd - domainLookupStart)
• 測量重定向時間 (redirectEnd - redirectStart)
• 測量請求時間 (responseStart - requestStart)
• 測量 TLS 協商時間 (requestStart - secureConnectionStart)
• 測量獲取時間（不含重定向）(responseEnd - fetchStart)
• 測量 ServiceWorker 處理時間 (fetchStart - workerStart)
• 檢查內容是否被壓縮 (decodedBodySize 應不等於 encodedBodySize)
• 檢查是否命中本地快取 (transferSize 應為 0)
• 檢查是否使用了現代快速協議 (nextHopProtocol 應為 HTTP/2 或 HTTP/3)
• 檢查資源是否是渲染阻塞的 (renderBlockingStatus)

PerformanceResourceTiming 參考頁面包含測量所有這些指標的示例程式碼。通常，測量這些指標的程式碼如下所示：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

跨域計時資訊

當啟用 CORS 時，許多時序屬性的值將返回零，除非伺服器的訪問策略允許共享這些值。這要求提供資源的伺服器傳送 Timing-Allow-Origin HTTP 響應頭，其值指定了允許訪問受限制時間戳值的來源或來源。

預設情況下，當從與網頁本身不同的來源載入資源時，返回值為 0 的屬性包括：redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, 和 responseStart。

例如，為了允許 https://mdn.club.tw 檢視資源時序資訊，跨域資源應傳送：

Timing-Allow-Origin: https://mdn.club.tw

管理資源緩衝區大小

如果您的網站或應用程式獲取的資源超過 250 個，並且您想記錄超過 250 個 PerformanceResourceTiming 條目，您需要增加資源時序緩衝區的大小。

要設定瀏覽器效能資源資料緩衝區的大小，請使用 Performance.setResourceTimingBufferSize() 方法，要清除瀏覽器效能資源資料緩衝區，請使用 Performance.clearResourceTimings() 方法。

要接收瀏覽器資源時序緩衝區已滿的通知，請監聽 resourcetimingbufferfull 事件。

以下呼叫允許瀏覽器效能時間線中最多容納 500 個 "resource" 效能條目。

performance.setResourceTimingBufferSize(500);

有關更多資訊，請參閱 管理緩衝區大小。

另見

• PerformanceResourceTiming
• Timing-Allow-Origin
• Performance.setResourceTimingBufferSize()
• Performance.clearResourceTimings()