Os listeners de eventos de toque e rolagem são úteis para rastrear interações do usuário e criar experiências de rolagem personalizadas, mas também podem atrasar a rolagem da página. Atualmente, os navegadores não podem saber se um listener de eventos impedirá a rolagem. Por isso, eles sempre aguardam o listener terminar de ser executado antes de rolar a página. Os listeners de eventos passivos resolvem esse problema permitindo que você indique que um listener de eventos nunca vai impedir a rolagem.
Compatibilidade com navegadores
A maioria dos navegadores oferece suporte a listeners de eventos passivos. Consulte Compatibilidade do navegador
Como a auditoria de listener de eventos passivos do Lighthouse falha
O Lighthouse sinaliza listeners de eventos que podem atrasar a rolagem da página:
![A auditoria do Lighthouse mostra que a página não usa listeners de eventos passivos para melhorar o desempenho de rolagem](https://developer.chrome.com/static/docs/lighthouse/best-practices/uses-passive-event-listeners/image/lighthouse-audit-shows-pa-710b643918a3.png?authuser=19&hl=pt-br)
O Lighthouse usa o seguinte processo para identificar listeners de eventos que podem afetar o desempenho de rolagem:
- Colete todos os listeners de eventos na página.
- Filtre listeners sem toque e sem roda.
- Filtre os listeners que chamam
preventDefault()
. - Filtre os listeners que são de um host diferente da página.
O Lighthouse filtra listeners de diferentes hosts porque você provavelmente não tem controle sobre esses scripts. Pode haver scripts de terceiros que prejudiquem o desempenho de rolagem da sua página, mas eles não são listados no relatório do Lighthouse.
Como tornar os listeners de eventos passivos para melhorar o desempenho de rolagem
Adicione uma sinalização passive
a cada listener de eventos identificado pelo Lighthouse.
Se você só oferecer suporte a navegadores que oferecem suporte a listeners de eventos passivos, basta adicionar a flag. Exemplo:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Se você oferecer suporte a navegadores mais antigos que não oferecem suporte a listeners de eventos passivos, será necessário usar a detecção de recursos ou um polyfill. Para mais informações, consulte a seção Detecção de recursos do documento de explicação sobre Listeners de eventos passivos (links em inglês) do WICG.