LayoutShift
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.
Das LayoutShift
-Interface der Performance-API bietet Einblicke in die Layout-Stabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.
Beschreibung
Ein Layout-Shift tritt auf, wenn ein sichtbares Element im Ansichtsfenster seine Position zwischen zwei Frames ändert. Diese Elemente werden als instabil beschrieben, was auf eine mangelnde visuelle Stabilität hinweist.
Die Layout-Instabilitäts-API bietet eine Möglichkeit zur Messung und Berichterstattung dieser Layout-Shifts. Alle Werkzeuge zur Fehlersuche bei Layout-Shifts, einschließlich der Entwicklertools des Browsers, nutzen diese API. Die API kann auch verwendet werden, um Layout-Shifts zu beobachten und zu debuggen, indem Informationen in die Konsole geloggt, die Daten an einen Server-Endpunkt gesendet oder in die Webseitenanalytik einbezogen werden.
Leistungswerkzeuge können diese API verwenden, um einen CLS-Wert zu berechnen.
Instanz-Eigenschaften
Diese Schnittstelle erweitert die folgenden PerformanceEntry
-Eigenschaften, indem sie sie wie folgt qualifiziert:
PerformanceEntry.duration
Nur lesbar Experimentell-
Gibt immer
0
zurück (das Konzept der Dauer gilt nicht für Layout-Shifts). PerformanceEntry.entryType
Nur lesbar Experimentell-
Gibt immer
"layout-shift"
zurück. PerformanceEntry.name
Nur lesbar Experimentell-
Gibt immer
"layout-shift"
zurück. PerformanceEntry.startTime
Nur lesbar Experimentell-
Gibt einen
DOMHighResTimeStamp
zurück, der die Zeit repräsentiert, zu der der Layout-Shift begann.
Diese Schnittstelle unterstützt auch die folgenden Eigenschaften:
LayoutShift.value
Experimentell-
Gibt den Layout-Shift-Wert zurück, berechnet als Wirkungsbruchteil (Bruchteil des verschobenen Ansichtsfensters) multipliziert mit dem Distanzbruchteil (verschobene Entfernung als Bruchteil des Ansichtsfensters).
LayoutShift.hadRecentInput
Experimentell-
Gibt
true
zurück, wennlastInputTime
weniger als 500 Millisekunden in der Vergangenheit liegt. LayoutShift.lastInputTime
Experimentell-
Gibt die Zeit der jüngsten ausschließenden Eingabe zurück (Benutzereingabe, die diesen Eintrag als Beitrag zum CLS-Wert ausschließt) oder
0
, wenn keine ausschließende Eingabe erfolgt ist. LayoutShift.sources
Experimentell-
Gibt ein Array von
LayoutShiftAttribution
-Objekten mit Informationen zu den verschobenen Elementen zurück.
Instanz-Methoden
LayoutShift.toJSON()
Experimentell-
Konvertiert die Eigenschaften in JSON.
Beispiele
Logging von Layout-Shift-Werten
Das folgende Beispiel zeigt, wie Layout-Shifts erfasst und in die Konsole geloggt werden.
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
Specification |
---|
Layout Instability # sec-layout-shift |
Browser-Kompatibilität
BCD tables only load in the browser