Listener di eventi passivi

Silktide carica le tue pagine in un browser reale e cerca gli script che ascoltano gli eventi touch e della rotellina del mouse in un modo che può ritardare lo scorrimento. Contrassegnare questi listener come passivi consente al browser di scorrere immediatamente.

Quando uno script ascolta gli eventi touch o della rotellina, il browser deve attendere l'esecuzione dello script prima di iniziare a scorrere, nel caso in cui lo script annulli lo scorrimento. Nelle pagine molto impegnative questo causa scatti o rallentamenti durante lo scorrimento: è uno dei tipi di jank più percepibili, soprattutto sui telefoni.

Perché è importante

Lo scorrimento è l'azione più comune che i visitatori compiono su una pagina e le persone notano immediatamente quando non è fluido. Una pagina che esita o trema sotto il dito sembra non funzionare anche quando tutto ciò che contiene funziona, e questa impressione è ancora più forte sui dispositivi mobili, dove lo scorrimento touch è costante.

Come risolvere il problema

Contrassegna i listener touch e della rotellina come passivi: in questo modo comunichi al browser che non annulleranno mai lo scorrimento:

// Blocca lo scorrimento finché non viene eseguito il gestore
document.addEventListener('touchstart', onTouchStart);

// Passivo: il browser scorre immediatamente
document.addEventListener('touchstart', onTouchStart, { passive: true });

Aggiungi { passive: true } ai tuoi listener touchstart, touchmove, wheel e mousewheel, a meno che un listener non chiami effettivamente preventDefault() per impedire lo scorrimento.
Per i listener segnalati all'interno di script di terze parti, verifica se esiste una versione aggiornata della libreria oppure segnala il problema al fornitore: consulta codice di terze parti.

Tutti i browser moderni supportano i listener passivi; solo i browser molto vecchi necessitano del rilevamento delle funzionalità.

Come esegue il controllo Silktide

Carica la pagina in un browser reale e trova i listener di eventi per gli eventi touch e della rotellina che non sono contrassegnati come passivi e potrebbero ritardare lo scorrimento.
Segnala lo script che contiene ciascun listener di questo tipo, indicando la riga in cui è registrato.

Risoluzione dei problemi

Il mio listener deve annullare lo scorrimento

Un listener che chiama effettivamente preventDefault() per impedire lo scorrimento non può essere passivo: contrassegnandolo come passivo, il browser ignora la chiamata a preventDefault(). Se un listener segnalato deve davvero annullare lo scorrimento, lasciarlo non passivo è corretto; valuta la possibilità di limitarne l'ambito in modo che non influisca sullo scorrimento nel resto della pagina.