PerformanceElementTiming: renderTime 屬性

值

一個 DOMHighResTimeStamp，表示元素的渲染時間。

對於影像，這將是影像渲染時間戳。它被定義為影像完全載入後發生的下一次繪製。如果計時允許檢查失敗（根據 Timing-allow-origin 標頭定義），則返回 0。

對於文字節點，這將是文字渲染時間戳。它被定義為元素變為文字繪製的時間。

示例

記錄 renderTime

在此示例中，透過新增 elementtiming 屬性來觀察一個 <img> 元素。已註冊一個 PerformanceObserver 來獲取所有型別為 "element" 的效能條目，並使用 buffered 標誌來訪問觀察者建立之前的資料。呼叫 entry.renderTime 會返回影像元素的渲染時間。

<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.renderTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });

跨域影像渲染時間

出於安全原因，如果資源是跨域請求，renderTime 屬性的值最初為 0。相反，應使用 loadTime 屬性作為回退。

瀏覽器現在可能會在這些情況下公開略微粗略的渲染時間。請檢查瀏覽器支援。

為了公開更準確的跨域渲染時間資訊，需要設定 Timing-Allow-Origin HTTP 響應標頭。

例如，要允許 https://mdn.club.tw 查看準確的 renderTime，跨域資源應傳送

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

或者，您可以使用 startTime，它會在 renderTime 不為 0 時返回該條目的 renderTime 值，否則返回此條目的 loadTime 值。但是，建議設定 Timing-Allow-Origin 標頭，以使指標更準確。

如果使用 startTime，可以透過檢查 renderTime 是否被使用來標記任何不準確之處

const isRenderTime = Boolean(entry.renderTime);

規範

瀏覽器相容性