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 # dom-layoutshift-value |
Browser-Kompatibilität
BCD tables only load in the browser