PerformanceResourceTiming

描述

該介面的屬性使用高解析度時間戳建立了一個資源載入時間線，用於網路事件，例如重定向開始和結束時間、抓取開始、DNS 查詢開始和結束時間、響應開始和結束時間等等。此外，該介面還透過其他屬性擴充套件了 PerformanceEntry，這些屬性提供了有關所獲取資源大小以及發起抓取資源的型別的資料。

典型資源計時指標

此介面的屬性允許您計算某些資源計時指標。常見的用例包括

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

例項屬性

繼承自 PerformanceEntry

此介面透過以下方式限定和約束，擴充套件了以下 PerformanceEntry 屬性，用於資源效能條目型別

PerformanceEntry.duration 只讀

返回一個 時間戳，它是 responseEnd 和 startTime 屬性之間的差值。

PerformanceEntry.entryType 只讀

返回 "resource"。

PerformanceEntry.name 只讀

返回資源的 URL。

PerformanceEntry.startTime 只讀

返回資源抓取開始時間的 時間戳。此值等同於 PerformanceResourceTiming.fetchStart。

時間戳

該介面支援以下時間戳屬性，您可以在圖中看到這些屬性，並按照它們在獲取資源時記錄的順序進行列表。按字母順序排列的列表顯示在左側導航中。

PerformanceResourceTiming.redirectStart 只讀

一個 DOMHighResTimeStamp，表示啟動重定向的抓取的開始時間。

PerformanceResourceTiming.redirectEnd 只讀

一個 DOMHighResTimeStamp，緊接著收到最後一個重定向響應的最後一個位元組之後。

PerformanceResourceTiming.workerStart 只讀

返回一個 DOMHighResTimeStamp，緊接著在排程 FetchEvent 之前（如果 Service Worker 執行緒已在執行），或者緊接著在啟動 Service Worker 執行緒之前（如果它尚未執行）。如果資源未被 Service Worker 攔截，則該屬性始終返回 0。

PerformanceResourceTiming.fetchStart 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器開始抓取資源之前。

PerformanceResourceTiming.domainLookupStart 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器開始解析資源的域名之前。

PerformanceResourceTiming.domainLookupEnd 只讀

一個 DOMHighResTimeStamp，表示瀏覽器完成資源的域名解析之後。

PerformanceResourceTiming.connectStart 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器開始建立與伺服器的連線以檢索資源之前。

PerformanceResourceTiming.secureConnectionStart 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器開始握手過程以保護當前連線之前。

PerformanceResourceTiming.connectEnd 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器完成與伺服器的連線建立以檢索資源之後。

PerformanceResourceTiming.requestStart 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器開始從伺服器請求資源之前。

PerformanceResourceTiming.firstInterimResponseStart 實驗性 只讀

一個 DOMHighResTimeStamp，表示臨時響應時間（例如，100 Continue 或 103 Early Hints）。

PerformanceResourceTiming.responseStart 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器從伺服器接收到響應的第一個位元組之後（這可能是一個臨時響應）。

PerformanceResourceTiming.finalResponseHeadersStart 實驗性 只讀

一個 DOMHighResTimeStamp，表示在任何臨時響應時間之後，最終的頭部響應時間（例如，200 Success）。

PerformanceResourceTiming.responseEnd 只讀

一個 DOMHighResTimeStamp，緊接著在瀏覽器接收到資源的最後一個位元組之後，或緊接著在傳輸連線關閉之前，以先發生者為準。

附加資源資訊

此外，此介面公開了以下包含更多資源資訊的屬性

PerformanceResourceTiming.contentType 只讀 實驗性

一個字串，表示所獲取資源 MIME 型別的最小化和標準化版本。

PerformanceResourceTiming.decodedBodySize 只讀

一個數字，表示從抓取（HTTP 或快取）訊息體接收到的位元組大小（以八位位元組為單位），在移除任何應用的 content encoding 之後。

PerformanceResourceTiming.deliveryType 實驗性 只讀

指示資源是如何交付的 — 例如來自快取或來自導航預取。

PerformanceResourceTiming.encodedBodySize 只讀

一個數字，表示從抓取（HTTP 或快取）有效載荷體接收到的位元組大小（以八位位元組為單位），在移除任何應用的 content encoding 之前。

PerformanceResourceTiming.initiatorType 只讀

一個字串，表示啟動效能條目的 Web 平臺功能。

PerformanceResourceTiming.nextHopProtocol 只讀

一個字串，表示用於獲取資源的網路協議，由 ALPN 協議 ID (RFC7301) 標識。

PerformanceResourceTiming.renderBlockingStatus 只讀

一個字串，表示渲染阻塞狀態。可以是 "blocking" 或 "non-blocking"。

PerformanceResourceTiming.responseStatus 只讀

一個數字，表示獲取資源時返回的 HTTP 響應狀態碼。

PerformanceResourceTiming.transferSize 只讀

一個數字，表示所獲取資源的位元組大小（以八位位元組為單位）。該大小包括響應頭欄位和響應有效載荷體。

PerformanceResourceTiming.serverTiming 只讀

一個 PerformanceServerTiming 條目陣列，包含伺服器計時指標。

例項方法

PerformanceResourceTiming.toJSON()

返回 PerformanceResourceTiming 物件的 JSON 表示。

示例

記錄資源計時資訊

使用 PerformanceObserver 的示例，它會在瀏覽器效能時間線中記錄新的 resource 效能條目時通知。使用 buffered 選項可以訪問觀察者建立之前的條目。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

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

使用 Performance.getEntriesByType() 的示例，它只顯示在呼叫此方法時瀏覽器效能時間線中存在的 resource 效能條目

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});

安全要求

跨域計時資訊

當資源是跨域請求時，許多資源計時屬性限制為返回 0 或空字串。為了公開跨域計時資訊，需要設定 Timing-Allow-Origin HTTP 響應頭。

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

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

規範

瀏覽器相容性

另見

• 資源計時（概述）