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:

1. Coleta todos os ouvintes de eventos na página.
2. Filtra os ouvintes que não são de toque ou roda.
3. Filtra os ouvintes que chamam preventDefault().
4. 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()