Os listeners de eventos de toque e roda são úteis para acompanhar as 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 sabem se um listener de evento vai impedir a rolagem. Por isso, eles sempre esperam que o listener termine a execução 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 com navegadores.
Como a auditoria do 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 da rolagem:
- Colete todos os listeners de eventos na página.
- Remover dos filtros detectores non-touch e non-wheel.
- Filtre listeners que chamam
preventDefault(). - Filtrar listeners de um host diferente do 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 flag passive a todos os listeners de evento que o Lighthouse identificou.
Se você só oferece suporte a navegadores com suporte a listener de evento passivo, basta adicionar a flag. Exemplo:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Se você estiver oferecendo suporte a navegadores mais antigos que não têm 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.