LayoutShift

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry, indem sie sie wie folgt festlegt:

PerformanceEntry.duration Schreibgeschützt

Gibt immer 0 zurück (das Konzept der Dauer gilt nicht für Layoutverschiebungen).

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 Layoutverschiebung begann.

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

LayoutShift.value Schreibgeschützt

Gibt den Wert der Layoutverschiebung zurück. Er wird berechnet, indem der Anteil des betroffenen Viewports mit dem Anteil der zurückgelegten Strecke 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 Benutzereingabe, aufgrund derer dieser Eintrag nicht zum CLS-Wert beiträgt), oder 0, wenn keine solche Eingabe stattgefunden hat.

LayoutShift.sources Schreibgeschützt

Gibt ein Array von LayoutShiftAttribution-Objekten mit Informationen zu den verschobenen Elementen zurück.

Instanzmethoden

LayoutShift.toJSON()

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

Beschreibung

Eine Layoutverschiebung tritt auf, wenn ein im Viewport sichtbares Element zwischen zwei Frames seine Position ändert. Solche Elemente werden als instabil bezeichnet, was auf mangelnde visuelle Stabilität hinweist.

Die Layout Instability API ermöglicht es, diese Layoutverschiebungen zu messen und darüber zu berichten. Alle Werkzeuge zur Fehlersuche bei Layoutverschiebungen, einschließlich der Entwicklertools des Browsers, verwenden diese API. Sie können die API auch nutzen, um Layoutverschiebungen zu beobachten und zu untersuchen, indem Sie Informationen in der Konsole protokollieren, Daten an einen Server-Endpunkt senden oder sie für die Webseitenanalyse verwenden.

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

Beispiele

Werte von Layoutverschiebungen protokollieren

Das folgende Beispiel zeigt, wie Sie Layoutverschiebungen 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