LayoutShiftAttribution
LayoutShiftAttribution 接口提供了有关已发生布局移位的元素的调试信息。
通过调用 LayoutShift.sources 返回的数组中包含 LayoutShiftAttribution 的实例。
实例属性
LayoutShiftAttribution.node只读 实验性-
返回已发生移位的元素（如果已被移除则为 null）。
LayoutShiftAttribution.previousRect只读 实验性-
返回一个
DOMRectReadOnly对象，表示移位前元素的位置。 LayoutShiftAttribution.currentRect只读 实验性-
返回一个
DOMRectReadOnly对象，表示移位后元素的位置。
实例方法
LayoutShiftAttribution.toJSON()实验性-
返回
LayoutShiftAttribution对象的 JSON 表示形式。
示例
以下示例找到具有最高布局移位分数的元素，并返回该条目中移位前尺寸最大的元素（previousRect）。有关更多详细信息，请参阅 Debug Web Vitals in the field。
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;
}
}
}
规范
| 规范 |
|---|
| 布局不稳定 API # sec-layout-shift-attribution |
浏览器兼容性
加载中…