PerformanceElementTiming: intersectionRect 屬性

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

PerformanceElementTiming 介面的只讀屬性 intersectionRect 返回元素在視口內的矩形區域。

值

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

對於顯示影像，這是影像在視口內的顯示矩形。對於文字，這是節點在視口內的顯示矩形。這是包含屬於該元素的*所有*文字節點聯合的最小矩形。

示例

記錄 `intersectionRect`

在此示例中，透過新增 elementtiming 屬性來觀察一個 <img> 元素。註冊一個 PerformanceObserver 來獲取型別為 "element" 的所有效能條目，並使用 buffered 標誌來訪問觀察者建立之前的資料。呼叫 entry.intersectionRect 將返回一個 DOMRectReadOnly 物件，其中包含影像的顯示矩形。

html

<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.intersectionRect);
    }
  });
});
observer.observe({ type: "element", buffered: true });