LayoutShift - 根据页面上元素的移动来监测网页的稳定性

LayoutShift 是 Layout Instability API 的接口，可根据页面上元素的移动来监测网页的稳定性。

属性

LayoutShift.value

返回 impact fraction（影响分数）（偏移的视口的分数）乘以 distance fraction（距离分数）（以视口的分数移动的距离）的乘积。

LayoutShift.hadRecentInput

如果过去 500 毫秒内有用户输入，则返回 true。

LayoutShift.lastInputTime

返回最近用户输入的时间。

LayoutShift.sources

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

方法

LayoutShift.toJSON()

将属性转换为 JSON。

实例

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

请注意，在此示例中，仅当用户离开选项卡时才将数据发送到服务器。

// 捕获错误，因为某些浏览器在使用新的 `type` 选项时抛出该错误。
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  let cumulativeLayoutShiftScore = 0;

  const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 仅在没有最近用户输入的情况下计算布局偏移。
    if (!entry.hadRecentInput) {
      cumulativeLayoutShiftScore += entry.value;
    }
  }
  });

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

  document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 强制发送所有待处理的记录。
    observer.takeRecords();
    observer.disconnect();

    console.log('CLS:', cumulativeLayoutShiftScore);
  }
  });
} catch (e) {
  // 如果浏览器不支持此 API，则什么也不做。
}

规范

规范	状态	备注
Layout Instability API LayoutShift 的定义	编者的草案	初始定义。

桌面浏览器兼容性

暂无兼容数据