Passive hendelseslyttere

Silktide laster inn sidene dine i en ekte nettleser og ser etter skript som lytter etter berørings- og musehjulhendelser på en måte som kan forsinke rulling. Når disse lytterne merkes som passive, kan nettleseren begynne å rulle umiddelbart.

Når et skript lytter etter berørings- eller musehjulhendelser, må nettleseren vente på at skriptet kjører før den begynner å rulle, i tilfelle skriptet avbryter rullingen. På travle sider fører dette til at rullingen hakker eller blir treg – en av de mest merkbare formene for hakking, særlig på telefoner.

Hvorfor dette er viktig

Rulling er det vanligste besøkende gjør på en side, og folk legger umiddelbart merke til når den ikke er jevn. En side som nøler eller hakker under fingeren, virker ødelagt selv når alt på siden fungerer, og dette inntrykket merkes tydeligst på mobilen, der berøringsrulling skjer hele tiden.

Slik løser du det

Merk berørings- og musehjullyttere som passive. Da lover du nettleseren at de aldri vil avbryte rullingen:

// Blokkerer rulling til behandleren er kjørt
document.addEventListener('touchstart', onTouchStart);

// Passiv: nettleseren ruller umiddelbart
document.addEventListener('touchstart', onTouchStart, { passive: true });

Legg til { passive: true } i dine egne touchstart-, touchmove-, wheel- og mousewheel-lyttere, med mindre en lytter faktisk kaller preventDefault() for å stoppe rullingen.
For rapporterte lyttere i tredjepartsskript bør du se etter en oppdatert versjon av biblioteket eller ta det opp med leverandøren – se tredjepartskode.

Alle moderne nettlesere støtter passive lyttere. Det er bare svært gamle nettlesere som trenger funksjonsdeteksjon.

Slik tester Silktide dette

Last inn siden i en ekte nettleser, og finn hendelseslyttere for berørings- og musehjulhendelser som ikke er merket som passive, og som kan forsinke rullingen.
Rapporter skriptet som inneholder hver slik lytter, med linjen der den er registrert.

Feilsøking

Lytteren min må avbryte rullingen

En lytter som faktisk kaller preventDefault() for å stoppe rullingen, kan ikke være passiv – hvis du merker den som passiv, vil nettleseren ignorere kallet til preventDefault(). Hvis en rapportert lytter virkelig må avbryte rullingen, er det riktig å la den være ikke-passiv. Vurder å begrense hvor den er koblet til, slik at den ikke påvirker rullingen andre steder på siden.