LayoutShiftAttribution

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.node Schreibgeschützt

Gibt das Element zurück, das sich verschoben hat (null, wenn es entfernt wurde).

LayoutShiftAttribution.previousRect Schreibgeschützt

Gibt ein DOMRectReadOnly-Objekt zurück, das die Position des Elements vor der Verschiebung repräsentiert.

LayoutShiftAttribution.currentRect Schreibgeschützt

Gibt ein DOMRectReadOnly-Objekt zurück, das die Position des Elements nach der Verschiebung repräsentiert.

Instanzmethoden

LayoutShiftAttribution.toJSON()

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

Browser-Kompatibilität

Siehe auch

• Debug layout shifts
• Debug Web Vitals in the field