DasLayoutShiftAttribution-Interface liefert Debugging-Informationen zu Elementen, die sich verschoben haben.

Instanzen vonLayoutShiftAttribution werden in einem Array zurückgegeben, indemLayoutShift.sources aufgerufen wird.

Instanzeigenschaften

LayoutShiftAttribution.nodeSchreibgeschütztExperimentell

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

LayoutShiftAttribution.previousRectSchreibgeschütztExperimentell

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

LayoutShiftAttribution.currentRectSchreibgeschütztExperimentell

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

Instanzmethoden

LayoutShiftAttribution.toJSON()Experimentell

Gibt eine JSON-Darstellung desLayoutShiftAttribution-Objekts zurück.

Beispiele

Das folgende Beispiel beobachtet Layoutverschiebungen und identifiziert das Element mit dem größten Einfluss. Dassources-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 unterDebug 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