Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Compatibilidade dos navegadores
  • Como falha a auditoria do ouvinte de evento passivo do Lighthouse
  • Como deixar passivos os ouvintes de eventos para melhorar o desempenho da rolagem
  • Recursos

Use ouvintes passivos para melhorar o desempenho de rolagem

May 2, 2019 — Atualizado Aug 28, 2019
Available in: Русский, 中文, English
Appears in: Auditorias de práticas recomendadas
Nesta página
  • Compatibilidade dos navegadores
  • Como falha a auditoria do ouvinte de evento passivo do Lighthouse
  • Como deixar passivos os ouvintes de eventos para melhorar o desempenho da rolagem
  • Recursos

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 #

  • 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()
Last updated: Aug 28, 2019 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.