LayoutShift: hadRecentInput-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, bevor Sie diese produktiv verwenden.
Die hadRecentInput
-Eigenschaft der LayoutShift
-Schnittstelle gibt true
zurück, wenn lastInputTime
weniger als 500 Millisekunden in der Vergangenheit liegt.
Layout-Verschiebungen sind nur ein Problem, wenn der Benutzer sie nicht erwartet. Layout-Verschiebungen, die durch Benutzerinteraktionen (z.B. ein Benutzer erweitert ein UI-Element) verursacht werden, werden häufig nicht in Layout-Verschiebungsmetriken berücksichtigt. Die hadRecentInput
-Eigenschaft ermöglicht es Ihnen, diese Verschiebungen auszuschließen.
Wert
Ein boolescher Wert, der true
zurückgibt, wenn lastInputTime
weniger als 500 Millisekunden in der Vergangenheit liegt; andernfalls false
.
Beispiele
Ignorieren von kürzlich erfolgten Benutzereingaben bei Layout-Verschiebungswerten
Das folgende Beispiel zeigt, wie die hadRecentInput
-Eigenschaft verwendet wird, um nur Layout-Verschiebungen ohne kürzliche Benutzereingaben zu zählen.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Count layout shifts without recent user input only
if (!entry.hadRecentInput) {
console.log("LayoutShift value:", entry.value);
if (entry.sources) {
for (const { node, currentRect, previousRect } of entry.sources)
console.log("LayoutShift source:", node, {
currentRect,
previousRect,
});
}
}
}
});
observer.observe({ type: "layout-shift", buffered: true });
Spezifikationen
Specification |
---|
Layout Instability # dom-layoutshift-hadrecentinput |
Browser-Kompatibilität
BCD tables only load in the browser