Use ouvintes passivos para melhorar o desempenho de rolagem
Ouvintes de eventos de toque e de roda do mouse são úteis para rastrear as interações do usuário e criar experiências de rolagem personalizadas, mas eles também podem atrasar a rolagem da página. Atualmente, os navegadores não têm como saber se um ouvinte de evento impedirá a rolagem, então eles sempre esperam que o ouvinte termine a execução antes de rolar a página. Ouvintes de eventos passivos resolvem esse problema permitindo que você indique que um ouvinte de eventos nunca impedirá a rolagem.
Compatibilidade dos navegadores #
A maioria dos navegadores oferece suporte a ouvintes de eventos passivos. Veja Compatibilidade de navegadores
Como falha a auditoria do ouvinte de evento passivo do Lighthouse #
O Lighthouse sinaliza ouvintes de eventos que podem atrasar a rolagem da página:
O Lighthouse usa o seguinte processo para identificar ouvintes de eventos que podem afetar o desempenho da rolagem:
- Coleta todos os ouvintes de eventos na página.
- Filtra os ouvintes que não são de toque ou roda.
- Filtra os ouvintes que chamam
preventDefault(). - Filtra os ouvintes de um host que não é o da página.
O Lighthouse filtra os ouvintes de hosts diferentes porque provavelmente você não tem controle sobre esses scripts. Pode haver scripts de terceiros que estão prejudicando o desempenho de rolagem da sua página, mas eles não aparecem listados no seu relatório Lighthouse.
Como deixar passivos os ouvintes de eventos para melhorar o desempenho da rolagem #
Adicione uma flag passive a cada ouvinte de evento que o Lighthouse identificou.
Se você só oferece suporte a navegadores que suportam ouvintes de evento passivos, basta adicionar a flag. Por exemplo:
document.addEventListener('touchstart', onTouchStart, {passive: true});Se você oferece suporte a navegadores mais antigos que não suportam ouvintes de eventos passivos, será necessário usar a detecção do recurso ou um polyfill. Consulte a seção Feature Detection da documentação do WICG sobre Ouvintes de evento passivos para mais informações.
Recursos #
- Código-fonte da auditoria Não usa ouvintes passivos para melhorar o desempenho da rolagem
- Melhorando o desempenho da rolagem com ouvintes de eventos passivos
- Explicação sobre ouvintes de evento passivos
- EventTarget.addEventListener()