PerformanceElementTiming

描述

Element Timing API 的目的是讓 Web 開發人員或分析工具能夠測量頁面上關鍵元素的渲染時間戳。

該 API 支援以下元素的計時資訊：

• <img> 元素；
• <svg> 內的 <image> 元素；
• <video> 元素的 海報影像；
• 具有有效 URL 值的 background-image 屬性的元素，並且資源實際可用；
• 文字節點組，例如 <p>。

作者透過在元素上新增 elementtiming 屬性來標記一個元素以供觀察。

PerformanceElementTiming 繼承自 PerformanceEntry。

例項屬性

此介面透過以下方式擴充套件了其父級 PerformanceEntry 的屬性，以用於事件計時效能條目型別：

PerformanceEntry.duration 只讀 實驗性

始終返回 0，因為 duration 不適用於此介面。

PerformanceEntry.entryType 只讀 實驗性

始終返回 "element"。

PerformanceEntry.name 只讀 實驗性

對於影像返回 "image-paint"，對於文字返回 "text-paint"。

PerformanceEntry.startTime 只讀 實驗性

如果此條目的 renderTime 不為 0，則返回其值，否則返回此條目的 loadTime 的值。

此介面還支援以下屬性：

PerformanceElementTiming.element 只讀 實驗性

一個 Element 物件，代表我們正在返回其資訊的元素。

PerformanceElementTiming.id 只讀 實驗性

一個字串，是元素的 id。

PerformanceElementTiming.identifier 只讀 實驗性

一個字串，是元素上 elementtiming 屬性的值。

PerformanceElementTiming.intersectionRect 只讀 實驗性

一個 DOMRectReadOnly 物件，表示元素在視口內的矩形區域。

PerformanceElementTiming.loadTime 只讀 實驗性

一個 DOMHighResTimeStamp，表示元素的載入時間。

PerformanceElementTiming.naturalHeight 只讀 實驗性

一個無符號 32 位整數（unsigned long），如果是應用於影像，則為影像的固有高度；如果是文字，則為 0。

PerformanceElementTiming.naturalWidth 只讀 實驗性

一個無符號 32 位整數（unsigned long），如果是應用於影像，則為影像的固有寬度；如果是文字，則為 0。

PerformanceElementTiming.renderTime 只讀 實驗性

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

PerformanceElementTiming.url 只讀 實驗性

一個字串，是影像資源請求的初始 URL；對於文字，則為 0。

例項方法

PerformanceElementTiming.toJSON() 實驗性

返回 PerformanceElementTiming 物件的 JSON 表示。

示例

觀察特定元素的渲染時間

在此示例中，透過新增 elementtiming 屬性來觀察兩個元素。註冊一個 PerformanceObserver 來獲取所有型別為 "element" 的效能條目，並使用 buffered 標誌來訪問建立觀察者之前的資料。

<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>

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

控制檯將輸出兩個條目。第一個包含影像的詳細資訊，第二個包含文字節點的詳細資訊。

規範

瀏覽器相容性

另見

• elementtiming HTML 屬性