Touch-and-wheel-gebeurtenislisteners zijn handig voor het volgen van gebruikersinteracties en het creëren van aangepaste scrollervaringen, maar ze kunnen ook het scrollen van pagina's vertragen. Momenteel kunnen browsers niet weten of een gebeurtenislistener scrollen zal voorkomen, dus wachten ze altijd tot de listener klaar is met uitvoeren voordat ze de pagina scrollen. Passieve gebeurtenislisteners lossen dit probleem op door aan te geven dat een gebeurtenislistener scrollen nooit zal voorkomen.
Browsercompatibiliteit
De meeste browsers ondersteunen passieve event listeners. Zie Browsercompatibiliteit
Hoe de passieve gebeurtenislisteneraudit van Lighthouse mislukt
Lighthouse markeert gebeurtenisluisteraars die het scrollen van de pagina kunnen vertragen:
Lighthouse gebruikt het volgende proces om gebeurtenisluisteraars te identificeren die de scrollprestaties kunnen beïnvloeden:
- Verzamel alle gebeurtenislisteners op de pagina.
- Filter non-touch en non-wheel listeners eruit.
- Filter luisteraars uit
preventDefault()aanroepen. - Filter luisteraars die afkomstig zijn van een andere host dan de pagina.
Lighthouse filtert luisteraars van verschillende hosts omdat u waarschijnlijk geen controle hebt over deze scripts. Mogelijk zijn er scripts van derden die de scrollprestaties van uw pagina negatief beïnvloeden, maar deze worden niet vermeld in uw Lighthouse-rapport.
Hoe u gebeurtenisluisteraars passief kunt maken om de scrollprestaties te verbeteren
Voeg een passive vlag toe aan elke gebeurtenislistener die Lighthouse heeft geïdentificeerd.
Als u alleen browsers ondersteunt die passieve event listeners ondersteunen, voegt u gewoon de vlag toe. Bijvoorbeeld:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Als u oudere browsers ondersteunt die geen passieve event listeners ondersteunen , moet u feature detection of een polyfill gebruiken. Zie de sectie Feature detection van het WICG Passive event listeners -uitlegdocument voor meer informatie.