LayoutShiftAttribution
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das LayoutShiftAttribution-Interface liefert Debugging-Informationen zu Elementen, die sich verschoben haben.
Instanzen von LayoutShiftAttribution werden in einem Array zurückgegeben, indem LayoutShift.sources aufgerufen wird.
Instanzeigenschaften
LayoutShiftAttribution.nodeSchreibgeschützt Experimentell-
Gibt das Element zurück, das sich verschoben hat (null, wenn es entfernt wurde).
LayoutShiftAttribution.previousRectSchreibgeschützt Experimentell-
Gibt ein
DOMRectReadOnly-Objekt zurück, das die Position des Elements vor der Verschiebung repräsentiert. LayoutShiftAttribution.currentRectSchreibgeschützt Experimentell-
Gibt ein
DOMRectReadOnly-Objekt zurück, das die Position des Elements nach der Verschiebung repräsentiert.
Instanzmethoden
LayoutShiftAttribution.toJSON()Experimentell-
Gibt eine JSON-Darstellung des
LayoutShiftAttribution-Objekts zurück.
Beispiele
Das folgende Beispiel beobachtet Layoutverschiebungen und identifiziert das Element mit dem größten Einfluss. Das sources-Array ist absteigend nach Einflussbereich sortiert, sodass das erste Element (sources[0]) das Element darstellt, das am meisten zur Layoutverschiebung beigetragen hat. Weitere Details dazu finden Sie unter Debug Web Vitals in the field.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.sources || entry.sources.length === 0) continue;
const mostImpactfulSource = entry.sources[0];
console.log("Layout shift score:", entry.value);
console.log("Most impactful element:", largestShiftSource.node);
console.log("Previous position:", largestShiftSource.previousRect);
console.log("Current position:", largestShiftSource.currentRect);
}
});
observer.observe({ type: "layout-shift", buffered: true });
Spezifikationen
| Specification |
|---|
| Layout Instability API # sec-layout-shift-attribution |