LayoutShift

Beschreibung

Eine Layout-Verschiebung tritt auf, wenn ein im Viewport sichtbares Element seine Position zwischen zwei Frames ändert. Solche Elemente gelten als instabil, da es ihnen an visueller Stabilität mangelt.

Die Layout Instability API ermöglicht es, diese Layout-Verschiebungen zu messen und zu erfassen. Alle Werkzeuge zum Debuggen von Layout-Verschiebungen, einschließlich der Entwicklertools des Browsers, verwenden diese API. Sie können die API auch nutzen, um Layout-Verschiebungen zu beobachten und zu debuggen: indem Sie Informationen in der Konsole protokollieren, Daten an einen Server-Endpunkt senden oder sie für die Webseitenanalyse verwenden.

Performance-Tools können mit dieser API einen CLS-Wert berechnen.

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry mit den jeweils angegebenen Rückgabewerten:

PerformanceEntry.duration Schreibgeschützt

Gibt immer 0 zurück (das Konzept einer Dauer ist auf Layout-Verschiebungen nicht anwendbar).

PerformanceEntry.entryType Schreibgeschützt

Gibt immer "layout-shift" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt immer eine leere Zeichenfolge zurück.

PerformanceEntry.startTime Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt angibt, zu dem die Layout-Verschiebung begann.

Diese Schnittstelle unterstützt außerdem die folgenden Eigenschaften:

LayoutShift.value Schreibgeschützt

Gibt den Wert der Layout-Verschiebung zurück. Er wird berechnet, indem der Anteil des von der Verschiebung betroffenen Viewports mit der Verschiebungsdistanz als Anteil am Viewport multipliziert wird.

LayoutShift.hadRecentInput Schreibgeschützt

Gibt true zurück, wenn lastInputTime weniger als 500 Millisekunden zurückliegt.

LayoutShift.lastInputTime Schreibgeschützt

Gibt den Zeitpunkt der letzten ausschließenden Eingabe zurück (einer Nutzereingabe, aufgrund derer dieser Eintrag nicht zum CLS-Wert beiträgt), oder 0, wenn keine solche Eingabe erfolgt ist.

LayoutShift.sources Schreibgeschützt

Gibt ein Array von LayoutShiftAttribution-Objekten mit Informationen über die verschobenen Elemente zurück.

Instanzmethoden

LayoutShift.toJSON()

Gibt ein JSON-serialisierbares einfaches Objekt zurück, das das LayoutShift-Objekt repräsentiert. Die Methode wird automatisch von JSON.stringify() aufgerufen.

Beispiele

Werte von Layout-Verschiebungen protokollieren

Das folgende Beispiel zeigt, wie Sie Layout-Verschiebungen erfassen und in der Konsole protokollieren.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Count layout shifts without recent user input only
    if (!entry.hadRecentInput) {
      console.log("LayoutShift value:", entry.value);
      if (entry.sources) {
        for (const { node, currentRect, previousRect } of entry.sources)
          console.log("LayoutShift source:", node, {
            currentRect,
            previousRect,
          });
      }
    }
  }
});

observer.observe({ type: "layout-shift", buffered: true });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• LayoutShiftAttribution
• CLS