Touch- und Rad-Ereignis-Listener sind nützlich, um Nutzerinteraktionen zu erfassen und benutzerdefinierte Scroll-Vorgänge zu erstellen. Sie können aber auch das Scrollen auf der Seite verzögern. Derzeit können Browser nicht erkennen, ob ein Ereignis-Listener das Scrollen verhindert. Daher warten sie immer, bis der Listener ausgeführt wurde, bevor sie die Seite scrollen. Passive Event-Listener lösen dieses Problem, da Sie damit angeben können, dass ein Event-Listener das Scrollen niemals verhindert.
Browserkompatibilität
Die meisten Browser unterstützen passive Event-Listener. Browserkompatibilität
So schlägt die Lighthouse-Prüfung für passive Event-Listener fehl
Lighthouse kennzeichnet Event-Listener, die das Scrollen auf der Seite verzögern können:
Lighthouse verwendet das folgende Verfahren, um Event-Listener zu identifizieren, die sich auf die Scrollleistung auswirken können:
- Alle Ereignis-Listener auf der Seite erfassen.
- Listener für Berührungen und das Drehen des Rads herausfiltern.
- Listener herausfiltern, die
preventDefault()anrufen - Hören Sie nur auf Listener, die vom selben Host wie die Seite stammen.
Lighthouse filtert Listener von verschiedenen Hosts heraus, da Sie diese Skripts wahrscheinlich nicht verwalten. Möglicherweise gibt es Drittanbieterskripts, die die Scrollleistung Ihrer Seite beeinträchtigen, aber nicht in Ihrem Lighthouse-Bericht aufgeführt sind.
Event-Listener passiv machen, um die Scrollleistung zu verbessern
Fügen Sie jedem von Lighthouse identifizierten Event-Listener ein passive-Flag hinzu.
Wenn Sie nur Browser unterstützen, die passive Event-Listener 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 ein Polyfill verwenden. Weitere Informationen finden Sie im Abschnitt Feature Detection des WICG-Dokuments Passive event listeners.