布局偏移属性

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

LayoutShiftAttribution 接口提供了有关已偏移元素的调试信息。

通过调用 LayoutShift.sources，将在数组中返回 LayoutShiftAttribution 的实例。

实例属性

LayoutShiftAttribution.node 只读

返回已偏移的元素（如果已被移除则为 null）。

LayoutShiftAttribution.previousRect 只读

返回一个 DOMRectReadOnly 对象，表示元素在偏移之前的位置。

LayoutShiftAttribution.currentRect 只读

返回一个 DOMRectReadOnly 对象，表示元素在偏移之后的位置。

实例方法

LayoutShiftAttribution.toJSON()

返回 LayoutShiftAttribution 对象的 JSON 表示形式。

示例

以下示例查找布局偏移分数最高的元素，并返回该条目中偏移前尺寸最大的元素（previousRect）。有关此内容的更多详细信息，请参见 在现场调试 Web 指标。

js
function getCLSDebugTarget(entries) {
  const largestEntry = entries.reduce((a, b) =>
    a && a.value > b.value ? a : b,
  );
  if (largestEntry?.sources?.length) {
    const largestSource = largestEntry.sources.reduce((a, b) => {
      const area = (el) => el.previousRect.width * el.previousRect.height;
      return a.node && area(a) > area(b) ? a : b;
    });
    if (largestSource) {
      return largestSource.node;
    }
  }
}

规范

规范
布局不稳定性
# sec-layout-shift-attribution

浏览器兼容性

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

另请参阅