Use ouvintes passivos para melhorar o desempenho de rolagem

Published on Updated on

Translated to: English, 中文, Pусский

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:

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

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.

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.