LayoutShift

Beschreibung

Eine Layout-Verschiebung tritt auf, wenn ein im Viewport sichtbares Element zwischen zwei Frames seine Position ändert. Solche Elemente gelten als instabil, da ihre visuelle Position nicht stabil bleibt.

Die Layout Instability API bietet eine Möglichkeit, diese Layout-Verschiebungen zu messen und darüber zu berichten. Alle Werkzeuge zur Fehlersuche bei Layout-Verschiebungen, einschließlich der Entwicklertools des Browsers, verwenden diese API. Sie können die API auch verwenden, um Layout-Verschiebungen zu beobachten und zu untersuchen, indem Sie die Informationen in der Konsole protokollieren oder die Daten an einen Serverendpunkt beziehungsweise an ein Webanalyse-System senden.

Performance-Tools können diese API verwenden, um einen CLS-Wert zu berechnen.

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry, indem sie deren Rückgabewerte wie folgt festlegt:

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 "layout-shift" 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

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

LayoutShift.hadRecentInput

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

LayoutShift.lastInputTime

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

LayoutShift.sources

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

Instanzmethoden

LayoutShift.toJSON()

Gibt ein einfaches, JSON-serialisierbares Objekt zurück, das das LayoutShift-Objekt repräsentiert. Die Methode wird von JSON.stringify() automatisch 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