Utilizzare listener passivi per migliorare le prestazioni dello scorrimento

I listener di eventi touch e wheel sono utili per monitorare le interazioni degli utenti e creare esperienze di scorrimento personalizzate, ma possono anche ritardare lo scorrimento delle pagine. Attualmente, i browser non possono sapere se un listener di eventi impedisce lo scorrimento, quindi attendono sempre che il listener termini l'esecuzione prima di far scorrere la pagina. I listener di eventi passivi risolvono questo problema consentendoti di indicare che un listener di eventi non impedirà mai lo scorrimento.

Compatibilità del browser

La maggior parte dei browser supporta i listener di eventi passivi. Vedi Compatibilità del browser

Come il controllo del listener di eventi passivo di Lighthouse non riesce

Lighthouse segnala i listener di eventi che potrebbero ritardare lo scorrimento della pagina:

Il controllo Lighthouse mostra che la pagina non usa listener di eventi passivi per migliorare le prestazioni dello scorrimento

Lighthouse utilizza la seguente procedura per identificare i listener di eventi che potrebbero influire sulle prestazioni dello scorrimento:

  1. Raccogli tutti i listener di eventi presenti nella pagina.
  2. Filtra i listener non touch e non-wheel.
  3. Filtra i listener che chiamano preventDefault().
  4. Filtra i listener che provengono da un host diverso da quello della pagina.

Lighthouse esclude i listener di host diversi perché probabilmente non hai il controllo di questi script. Potrebbero esserci script di terze parti che compromettono le prestazioni di scorrimento della pagina, ma questi script non sono elencati nel report Lighthouse.

Come rendere passivi i listener di eventi per migliorare le prestazioni dello scorrimento

Aggiungi un flag passive a ogni listener di eventi identificato da Lighthouse.

Se supporti solo i browser che supportano listener di eventi passivi, è sufficiente aggiungere il flag. Ad esempio:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Se supporti browser precedenti che non supportano i listener di eventi passivi, dovrai utilizzare il rilevamento delle funzionalità o un polyfill. Per ulteriori informazioni, consulta la sezione Rilevamento delle funzionalità del documento esplicativo sui Listener di eventi passivi di WICG.

Risorse