LayoutShift: value-Eigenschaft
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 vor der Verwendung auf produktiven Webseiten.
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
| Specification |
|---|
| Layout Instability API # dom-layoutshift-value |
Browser-Kompatibilität
Loading…