布局偏移

当视口中可见的任何元素在两个帧之间更改其位置时，就会发生布局偏移。这些元素被描述为**不稳定**，表示缺乏视觉稳定性。

布局不稳定性 API 提供了一种测量和报告这些布局偏移的方法。所有用于调试布局偏移的工具，包括浏览器开发者工具中的工具，都使用此 API。此 API 还可以用于通过将信息记录到控制台、将数据发送到服务器端点或发送到网页分析来观察和调试布局偏移。

性能工具可以使用此 API 计算CLS 分数。

此接口通过以下方式限定以下PerformanceEntry 属性进行扩展

PerformanceEntry.duration 只读 实验性

始终返回0（持续时间概念不适用于布局偏移）。

PerformanceEntry.entryType 只读 实验性

始终返回"layout-shift"。

PerformanceEntry.name 只读 实验性

始终返回"layout-shift"。

PerformanceEntry.startTime 只读 实验性

返回一个DOMHighResTimeStamp，表示布局偏移开始的时间。

此接口还支持以下属性

LayoutShift.value 实验性

返回计算出的布局偏移分数，该分数计算为影响分数（偏移的视口分数）乘以距离分数（移动的距离作为视口的比例）。

LayoutShift.hadRecentInput 实验性

如果lastInputTime 小于过去 500 毫秒，则返回true。

LayoutShift.lastInputTime 实验性

返回最近一次排除输入（会导致将此条目排除为 CLS 分数的贡献者的用户输入）的时间，如果未发生排除输入，则返回0。

LayoutShift.sources 实验性

返回一个LayoutShiftAttribution 对象数组，其中包含有关已偏移元素的信息。

LayoutShift.toJSON() 实验性

将属性转换为 JSON。

以下示例显示了如何捕获布局偏移并将它们记录到控制台。

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Count layout shifts without recent user input only
    if (!entry.hadRecentInput) {
      console.log("LayoutShift value:", entry.value);
      if (entry.sources) {
        for (const { node, currentRect, previousRect } of entry.sources)
          console.log("LayoutShift source:", node, {
            currentRect,
            previousRect,
          });
      }
    }
  }
});

observer.observe({ type: "layout-shift", buffered: true });

• LayoutShiftAttribution
• CLS