Passive Listener verwenden, um die Scrollleistung zu verbessern

Ereignis-Listener für Tipp- und Mausradbewegungen sind nützlich, um Nutzerinteraktionen zu verfolgen und benutzerdefinierte Scrollfunktionen zu erstellen. Sie können aber auch das Scrollen der Seite verzögern. Derzeit können Browser nicht erkennen, ob ein Event-Listener das Scrollen verhindert. Daher wird immer erst auf die Ausführung des Listeners gewartet, bevor er auf der Seite gescrollt wird. Passive Event-Listener lösen dieses Problem, da Sie angeben können, dass ein Event-Listener das Scrollen nie verhindern wird.

Browserkompatibilität

Die meisten Browser unterstützen passive Event-Listener. Siehe Browserkompatibilität.

So schlägt die Prüfung des passiven Event-Listeners von Lighthouse fehl

Lighthouse kennzeichnet Event-Listener, die das Scrollen der Seite verzögern können:

Bei der Lighthouse-Prüfung wird festgestellt, dass die Seite keine passiven Event-Listener verwendet, um die Scrollleistung zu verbessern

Lighthouse verwendet das folgende Verfahren, um Event-Listener zu identifizieren, die sich auf die Scrollleistung auswirken können:

  1. Alle Event-Listener auf der Seite erfassen.
  2. Filtert Hörer heraus, die sich nicht auf Berührungen und nicht mit Rad bewegen.
  3. Filtern Sie Listener heraus, die preventDefault() aufrufen.
  4. Filtern Sie Listener heraus, die von einem anderen Host als die Seite stammen.

Lighthouse filtert Listener von verschiedenen Hosts heraus, da Sie wahrscheinlich keine Kontrolle über diese Skripts haben. Möglicherweise beeinträchtigen Drittanbieter-Skripts die Scrollleistung deiner Seite. Diese sind jedoch nicht im Lighthouse-Bericht aufgeführt.

Event-Listener passiv machen, um die Scrollleistung zu verbessern

Fügen Sie jedem Event-Listener, der von Lighthouse identifiziert wurde, das Flag passive hinzu.

Wenn Sie nur Browser mit passiver Event-Listener-Unterstützung unterstützen, fügen Sie einfach das Flag hinzu. Beispiel:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Wenn Sie ältere Browser unterstützen, die keine passiven Event-Listener unterstützen, müssen Sie die Funktionserkennung oder einen Polyfill verwenden. Weitere Informationen finden Sie im Abschnitt Feature Detection des WICG-Erklärungsdokuments zu Passiven Ereignis-Listenern.

Ressourcen