LayoutShift: value-Eigenschaft

Die eigenschaft value (nur lesbar) des LayoutShift-Interfaces gibt den Layout-Shift-Score zurück, der als das Produkt aus dem Impact-Fraction (der Anteil des Viewports, der verschoben wurde) und der Distance-Fraction (die Bewegung als Anteil am Viewport) berechnet wird.

Wert

Eine Zahl zwischen 0,0 und 1,0, die den Layout-Shift-Score anzeigt.

Er wird als das Produkt aus dem Impact-Fraction (der Anteil des Viewports, der verschoben wurde) und der Distance-Fraction (die Bewegung als Anteil am Viewport) berechnet.

layout shift score = impact fraction * distance fraction

Für weitere Details siehe Layout Shift Score auf web.dev.

Beispiele

Protokollierung des Layout-Shift-Scores des Eintrags

Das folgende Beispiel zeigt, wie die value-Eigenschaft verwendet wird, um den Layout-Shift-Score zu 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("Entry's layout shift score:", entry.value);
 }
 }
});
observer.observe({ type: "layout-shift", buffered: true });

Spezifikationen

Browser-Kompatibilität