Passive Event-Listener

Silktide lädt Ihre Seiten in einem echten Browser und sucht nach Skripten, die auf Touch- und Mausrad-Ereignisse in einer Weise lauschen, die das Scrollen verzögern kann. Das Markieren dieser Listener als passiv ermöglicht es dem Browser, sofort zu scrollen.

Wenn ein Skript auf Touch- oder Mausrad-Ereignisse hört, muss der Browser vor dem Scrollen warten, bis dieses Skript ausgeführt wurde, falls es das Scrollen abbricht. Auf stark ausgelasteten Seiten führt das zu Rucklern oder Verzögerungen beim Scrollen – eine der auffälligsten Arten von Jank, insbesondere auf Smartphones.

Warum das wichtig ist

Scrollen ist die häufigste Aktion, die Besucher auf einer Seite ausführen, und Menschen bemerken sofort, wenn es nicht flüssig ist. Eine Seite, die unter dem Finger zögert oder ruckelt, wirkt kaputt, selbst wenn darauf alles funktioniert – und dieser Eindruck ist auf Mobilgeräten am stärksten, wo ständig per Touch gescrollt wird.

So beheben Sie das

Markieren Sie Touch- und Mausrad-Listener als passiv – damit versprechen Sie dem Browser, dass sie das Scrollen niemals abbrechen:

\/\/ Blockiert das Scrollen, bis der Handler ausgeführt wird
document.addEventListener('touchstart', onTouchStart);

\/\/ Passiv: Der Browser scrollt sofort
document.addEventListener('touchstart', onTouchStart, { passive: true });

Fügen Sie { passive: true } zu Ihren eigenen touchstart-, touchmove-, wheel- und mousewheel-Listenern hinzu, es sei denn, ein Listener ruft tatsächlich preventDefault() auf, um das Scrollen zu verhindern.
Für gemeldete Listener in Skripten von Drittanbietern prüfen Sie, ob es eine aktualisierte Version der Bibliothek gibt, oder melden Sie es dem Anbieter – siehe Drittanbieter-Code.

Alle modernen Browser unterstützen passive Listener; nur sehr alte Browser benötigen Feature-Erkennung.

Wie Silktide dies testet

Silktide lädt die Seite in einem echten Browser und findet Event-Listener für Touch- und Mausrad-Ereignisse, die nicht als passiv markiert sind und das Scrollen verzögern könnten.
Silktide meldet das Skript, das jeden solchen Listener enthält, mit der Zeile, in der er registriert wird.

Fehlerbehebung

Mein Listener muss das Scrollen verhindern

Ein Listener, der tatsächlich preventDefault() aufruft, um das Scrollen zu verhindern, kann nicht passiv sein – wird er als passiv markiert, ignoriert der Browser den Aufruf von preventDefault(). Wenn ein gemeldeter Listener das Scrollen wirklich verhindern muss, ist es korrekt, ihn nicht passiv zu setzen; ziehen Sie in Betracht, seinen Anknüpfungspunkt zu verengen, damit er das Scrollen nicht an anderer Stelle der Seite beeinflusst.