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 |
浏览器兼容性
加载中…