Utilizzare listener passivi per migliorare le prestazioni dello scorrimento

I listener di eventi tattili e della rotellina sono utili per monitorare le interazioni degli utenti e creare esperienze di scorrimento personalizzate, ma possono anche ritardare lo scorrimento della pagina. Al momento, i browser non possono sapere se un listener di eventi impedirà lo scorrimento, quindi attendono sempre il completamento dell'esecuzione del listener prima di 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

Motivo per cui il controllo del listener di eventi passivo di Lighthouse non va a buon fine

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

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

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

  1. Raccogli tutti i listener di eventi sulla pagina.
  2. Filtra gli ascoltatori che non utilizzano il tocco e la rotella.
  3. Filtra gli ascoltatori che chiamano preventDefault().
  4. Filtra gli ascoltatori che provengono da un host diverso dalla pagina.

Lighthouse filtra gli ascoltatori 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 non sono elencati nel report Lighthouse.

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

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

Se supporti solo i browser che supportano i listener di eventi passivi, aggiungi semplicemente il flag. Ad esempio:

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

Se supporti browser meno recenti che non supportano i listener di eventi passivi, dovrai utilizzare il rilevamento delle funzionalità o un polyfill. Per saperne di più, consulta la sezione Rilevamento delle funzionalità del documento esplicativo Listener di eventi passivi del WICG.

Risorse