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 impedirà lo scorrimento. in modo che attendano sempre che il listener termini l'esecuzione prima di scorrere la pagina. I listener di eventi passivi risolvono questo problema consentendoti di indicare in modo che un listener di eventi non impedisca mai lo scorrimento.
Compatibilità del browser
La maggior parte dei browser supporta listener di eventi passivi. Consulta Compatibilità del browser
Come funziona il controllo del listener di eventi passivo di Lighthouse
Lighthouse segnala i listener di eventi che potrebbero ritardare lo scorrimento della pagina:
Lighthouse utilizza il processo seguente per identificare i listener di eventi che potrebbero influire sulle prestazioni dello scorrimento:
- Raccogliere tutti gli ascoltatori di eventi nella pagina.
- Escludi gli ascoltatori non touch e non ruota.
- Filtra gli ascoltatori che chiamano
preventDefault(). - Filtra gli ascoltatori provenienti da un host diverso rispetto alla pagina.
Lighthouse filtra i listener di host diversi perché probabilmente non hai il controllo su questi script. Potrebbero essere presenti script di terze parti che stanno danneggiando le prestazioni di scorrimento della pagina, ma 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 ascoltatore di eventi identificato da Lighthouse.
Se supporti solo i browser che supportano i listener di eventi passivi, basta aggiungere il flag. Ad esempio:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Se supporti browser meno recenti che non supportano i listener di eventi passivi, dovrai usare il rilevamento delle funzionalità o un polyfill. Consulta le Rilevamento delle funzionalità sezione dei listener di eventi passivi del WICG documento esplicativo per avere ulteriori informazioni.