Passieve eventlisteners

Silktide laadt je pagina's in een echte browser en zoekt naar scripts die luisteren naar touch- en muiswielgebeurtenissen op een manier die het scrollen kan vertragen. Door deze eventlisteners als passief te markeren, kan de browser meteen scrollen.

Wanneer een script luistert naar touch- of wheel-gebeurtenissen, moet de browser wachten tot dat script is uitgevoerd voordat hij gaat scrollen, voor het geval het script het scrollen annuleert. Op drukke pagina's kan dit ervoor zorgen dat het scrollen hapert of vertraagt — een van de meest opvallende vormen van jank, vooral op telefoons.

Waarom dit belangrijk is

Scrollen is het meest voorkomende wat bezoekers op een pagina doen, en mensen merken het meteen als het niet soepel verloopt. Een pagina die onder de vinger aarzelt of schokt, voelt kapot aan, zelfs als alles erop werkt. Die indruk is het sterkst op mobiele apparaten, waar mensen voortdurend met touch scrollen.

Hoe je dit oplost

Markeer touch- en wheel-eventlisteners als passief. Daarmee beloof je de browser dat ze het scrollen nooit zullen annuleren:

// Blokkeert het scrollen totdat de handler is uitgevoerd
document.addEventListener('touchstart', onTouchStart);

// Passief: de browser scrollt meteen
document.addEventListener('touchstart', onTouchStart, { passive: true });

Voeg { passive: true } toe aan je eigen touchstart-, touchmove-, wheel- en mousewheel-eventlisteners, tenzij een eventlistener daadwerkelijk preventDefault() aanroept om het scrollen te stoppen.
Controleer voor gemelde eventlisteners in scripts van derden of er een bijgewerkte versie van de bibliotheek beschikbaar is, of leg het probleem voor aan de leverancier — zie code van derden.

Alle moderne browsers ondersteunen passieve eventlisteners; alleen zeer oude browsers hebben feature detection nodig.

Hoe Silktide dit controleert

Laad de pagina in een echte browser en zoek naar eventlisteners voor touch- en wheel-gebeurtenissen die niet als passief zijn gemarkeerd en het scrollen kunnen vertragen.
Rapporteer het script met elke dergelijke eventlistener, inclusief de regel waarop deze is geregistreerd.

Problemen oplossen

Mijn eventlistener moet het scrollen annuleren

Een eventlistener die daadwerkelijk preventDefault() aanroept om het scrollen te stoppen, kan niet passief zijn — als je deze als passief markeert, negeert de browser de aanroep van preventDefault(). Als een gemelde eventlistener het scrollen echt moet annuleren, is het correct om deze niet-passief te laten. Je kunt overwegen het gebied waarop de eventlistener is toegepast te beperken, zodat deze het scrollen elders op de pagina niet beïnvloedt.