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, bevor Sie diese produktiv verwenden.

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

Instanzen von LayoutShiftAttribution werden in einem Array zurückgegeben, wenn LayoutShift.sources aufgerufen wird.

Instanz-Eigenschaften

LayoutShiftAttribution.node Nur lesbar Experimentell: Gibt das Element zurück, das sich verschoben hat (null, wenn es entfernt wurde).
LayoutShiftAttribution.previousRect Nur lesbar Experimentell: Gibt ein DOMRectReadOnly Objekt zurück, das die Position des Elements vor der Verschiebung repräsentiert.
LayoutShiftAttribution.currentRect Nur lesbar Experimentell: Gibt ein DOMRectReadOnly Objekt zurück, das die Position des Elements nach der Verschiebung repräsentiert.

Instanz-Methoden

LayoutShiftAttribution.toJSON() Experimentell: Gibt eine JSON-Darstellung des LayoutShiftAttribution Objekts zurück.

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 siehe Debuggen 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

Specification
Layout Instability # sec-layout-shift-attribution

Browser-Kompatibilität

BCD tables only load in the browser