DieLayoutShiftAttribution Schnittstelle bietet Debugging-Informationen über Elemente, die sich verschoben haben.

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

Instanz-Eigenschaften

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.

Instanz-Methoden

LayoutShiftAttribution.toJSON()Experimentell

Gibt eine JSON-Darstellung desLayoutShiftAttribution Objekts zurück.

Beispiele

Das folgende Beispiel findet das Element mit dem höchsten Layout-Verschiebungswert und gibt das Element in diesem Eintrag mit der größten Größe vor der Verschiebung (previousRect) zurück. Für weitere Details sieheDebuggen Sie Web Vitals im Feld.

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;    }  }}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Layout-Verschiebungen debuggen
• Debuggen Sie Web Vitals im Feld