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.

js
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

BCD tables only load in the browser