Usar listeners passivos para melhorar o desempenho de rolagem

Os listeners de eventos de toque e de roda 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. No momento, os navegadores não sabem se um listener de eventos vai impedir a rolagem, então eles sempre aguardam a conclusão da execução do listener 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 é compatível com listeners de eventos passivos. Consulte Compatibilidade de 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:

A auditoria do Lighthouse mostra que a página não usa listeners de eventos passivos para melhorar o desempenho de rolagem

O Lighthouse usa o seguinte processo para identificar listeners de eventos que podem afetar o desempenho de rolagem:

  1. Colete todos os listeners de eventos na página.
  2. Filtre listeners que não são de toque nem de roda.
  3. Filtre os listeners que chamam preventDefault().
  4. Filtra listeners de um host diferente da página.

O Lighthouse filtra listeners de diferentes hosts porque provavelmente você não tem controle sobre esses scripts. Talvez haja scripts de terceiros prejudicando o desempenho de rolagem da sua página, mas eles não aparecem no relatório do Lighthouse.

Como tornar os listeners de eventos passivos para melhorar o desempenho de rolagem

Adicione uma flag passive a cada listener de evento identificado pelo Lighthouse.

Se você só oferecer suporte a navegadores com listeners de eventos passivos, basta adicionar a flag. Exemplo:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Se você estiver oferecendo suporte a navegadores mais antigos que não são compatíveis com listeners de eventos passivos, será necessário usar a detecção de recursos ou um polyfill. Consulte a seção Detecção de recursos do documento explicativo Listeners de eventos passivos do WICG para mais informações.

Recursos