LayoutShift: hadRecentInput 属性

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

LayoutShift 接口的只读属性 hadRecentInput 返回一个布尔值,如果 lastInputTime 的时间戳距离现在小于 500 毫秒,则返回 true

布局偏移只有在用户未预期到时才会成为问题,因此由用户交互(例如用户展开 UI 元素)引起的布局偏移通常不被计入布局偏移指标。hadRecentInput 属性允许你排除这些偏移。

如果 lastInputTime 的时间戳距离现在小于 500 毫秒,则返回 true,否则返回 false

示例

忽略最近用户输入对布局偏移得分的影响

以下示例显示了如何使用 hadRecentInput 属性仅统计没有近期用户输入的布局偏移。

js
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 });

规范

规范
布局不稳定 API
# dom-layoutshift-hadrecentinput

浏览器兼容性

另见