PerformanceElementTiming：intersectionRect 属性

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细检查 浏览器兼容性表。

intersectionRect 是 PerformanceElementTiming 接口的只读属性，它返回元素在视窗内的矩形。

值

一个 DOMRectReadOnly，表示元素在视窗内的矩形。

对于显示图像，这是图像在视窗内的显示矩形。对于文本，这是节点在视窗内的显示矩形。它是包含属于元素的所有文本节点联合的最小矩形。

示例

记录 intersectionRect

在本示例中，一个 <img> 元素通过添加 elementtiming 属性被观察到。注册一个 PerformanceObserver 来获取所有类型为 "element" 的性能条目，并使用 buffered 标志访问观察者创建之前的數據。调用 entry.intersectionRect 将返回一个 DOMRectReadOnly 对象，其中包含图像的显示矩形。

html
<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />
js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.intersectionRect);
    }
  });
});
observer.observe({ type: "element", buffered: true });

规范

规范
元素计时 API
# ref-for-dom-performanceelementtiming-intersectionrect

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。