Aanraak- en wielgebeurtenislisteners 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 verhindert, dus wachten ze altijd tot de luisteraar klaar is met uitvoeren voordat ze op de pagina scrollen. Passieve gebeurtenislisteners lossen dit probleem op door u te laten aangeven dat een gebeurtenislistener het scrollen nooit zal voorkomen.
Browsercompatibiliteit
De meeste browsers ondersteunen passieve gebeurtenislisteners. Zie Browsercompatibiliteit
Hoe de passieve gebeurtenislisteneraudit van Lighthouse mislukt
Lighthouse signaleert gebeurtenislisteners die het scrollen van pagina's kunnen vertragen:
Lighthouse gebruikt het volgende proces om gebeurtenislisteners te identificeren die de scrollprestaties kunnen beïnvloeden:
- Verzamel alle gebeurtenislisteners op de pagina.
- Filter niet-aanraak- en niet-wiel-luisteraars.
- Filter luisteraars uit
preventDefault()aanroepen. - Filter luisteraars uit die van een andere host zijn dan de pagina.
Lighthouse filtert luisteraars van verschillende hosts uit, omdat je waarschijnlijk geen controle hebt over deze scripts. Mogelijk zijn er scripts van derden die de scrollprestaties van uw pagina schaden, maar deze worden niet vermeld in uw Lighthouse-rapport.
Hoe u gebeurtenislisteners 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 gebeurtenislisteners ondersteunen, voegt u gewoon de vlag toe. Bijvoorbeeld:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Als u oudere browsers ondersteunt die geen passieve gebeurtenislisteners ondersteunen , moet u functiedetectie of een polyfill gebruiken. Zie de sectie Functiedetectie van het uitlegdocument WICG Passieve gebeurtenislisteners voor meer informatie.