Passive hændelseslyttere

Silktide indlæser dine sider i en rigtig browser og leder efter scripts, der lytter på berørings- og musehjulsbegivenheder på en måde, der kan forsinke rulning. Når disse lyttere markeres som passive, kan browseren rulle med det samme.

Når et script lytter på berørings- eller hjulbegivenheder, skal browseren vente på, at scriptet kører, før den ruller, hvis scriptet annullerer rulningen. På travle sider får det rulningen til at hakke eller forsinke – en af de mest mærkbare former for ujævnhed, især på telefoner.

Hvorfor dette er vigtigt

Rulning er det mest almindelige, besøgende gør på en side, og folk bemærker straks, når den ikke er jævn. En side, der tøver eller ryster under fingeren, føles ødelagt, selv når alt på den virker, og det indtryk er stærkest på mobil, hvor berøringsrulning er konstant.

Sådan løser du det

Markér berørings- og hjullyttere som passive, hvilket lover browseren, at de aldrig vil annullere rulning:

// Blokerer rulning, indtil håndteringen kører
document.addEventListener('touchstart', onTouchStart);

// Passiv: browseren ruller med det samme
document.addEventListener('touchstart', onTouchStart, { passive: true });

Tilføj { passive: true } til dine egne touchstart-, touchmove-, wheel- og mousewheel-lyttere, medmindre en lytter faktisk kalder preventDefault() for at stoppe rulning.
For rapporterede lyttere i tredjepartsscripts skal du kontrollere, om der findes en opdateret version af biblioteket, eller tage det op med leverandøren – se tredjepartskode.

Alle moderne browsere understøtter passive lyttere; kun meget gamle browsere har brug for funktionsdetektion.

Sådan tester Silktide dette

Indlæs siden i en rigtig browser, og find hændelseslyttere til berørings- og hjulbegivenheder, som ikke er markeret som passive og kan forsinke rulning.
Rapportér scriptet, der indeholder hver sådan lytter, sammen med den linje, hvor den registreres.

Fejlfinding

Min lytter skal annullere rulning

En lytter, der faktisk kalder preventDefault() for at stoppe rulning, kan ikke være passiv – hvis den markeres som passiv, ignorerer browseren kaldet til preventDefault(). Hvis en rapporteret lytter virkelig skal annullere rulning, er det korrekt at lade den være ikke-passiv; overvej at begrænse, hvor den er tilknyttet, så den ikke påvirker rulning andre steder på siden.