Os listeners de eventos de toque e roda são úteis para rastrear as interações do usuário e criar experiências personalizadas de rolagem, mas também podem atrasar a rolagem da página. Atualmente, os navegadores não sabem se um listener de eventos impedirá a rolagem, portanto, eles sempre esperam que a execução do listener termine antes de rolar a página. Listeners de eventos passivos resolvem esse problema permitindo que você indique que um listener de eventos nunca impedirá a rolagem.
Compatibilidade com navegadores
A maioria dos navegadores oferece suporte a listeners de eventos passivos. Consulte Compatibilidade com navegadores.
Como a auditoria de listener de eventos passivo do Lighthouse falha
Farol 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 remove dos filtros detectores de hosts diferentes porque você provavelmente não tem controle sobre esses scripts. Pode haver scripts de terceiros que prejudiquem o desempenho de rolagem da página, mas eles não são listados no relatório do Lighthouse.
Como tornar os listeners de evento passivos para melhorar o desempenho de rolagem
Adicione uma sinalização passive a cada listener de eventos identificado pelo Lighthouse.
Se você oferecer suporte apenas a navegadores que têm suporte a listeners de eventos passivos, basta adicionar a sinalização. Exemplo:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Se você estiver oferecendo suporte a navegadores mais antigos que não oferecem suporte a listeners de eventos passivos, use a detecção de recursos ou um polyfill. Consulte a seção Detecção de recursos do documento explicativo sobre Detectores de eventos passivos do WICG para mais informações.