LayoutShift: Eigenschaft value
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die value-Eigenschaft, die schreibgeschützt in der LayoutShift-Schnittstelle ist, gibt den Layout-Shift-Score zurück. Dieser wird berechnet als Produkt aus dem Einflussbruchteil (Bruchteil des Viewports, der verschoben wurde) und dem Distanzbruchteil (verschobene Distanz als Bruchteil des Viewports).
Wert
Eine Zahl zwischen 0.0 und 1.0, die den Layout-Shift-Score angibt.
Der Score wird berechnet als das Produkt aus dem Einflussbruchteil (Bruchteil des Viewports, der verschoben wurde) und dem Distanzbruchteil (verschobene Distanz als Bruchteil des Viewports).
layout shift score = impact fraction * distance fraction
Für weitere Details, siehe Layout shift score auf web.dev.
Beispiele
Protokollierung des Layout-Shift-Scores eines 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
| Spezifikation |
|---|
| Layout Instability API # dom-layoutshift-value |