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:
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.