Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Fundo
  • Como o Lighthouse detecta animações não compostas
  • Como garantir que as animações sejam compostas
  • Recursos

Evite animações não compostas

Aug 12, 2020
Available in: Español, 日本語, 한국어, Русский, 中文, English
Appears in: Auditorias de desempenho
Nesta página
  • Fundo
  • Como o Lighthouse detecta animações não compostas
  • Como garantir que as animações sejam compostas
  • Recursos

Animações não compostas podem parecer irregulares (ou seja, não suaves) em telefones de baixo custo ou quando tarefas de alto desempenho estiverem sendo executadas no thread principal. As animações Janky podem aumentar o Cumulative Layout Shift (CLS) da sua página. Reduzir o CLS melhorará sua pontuação de desempenho do Lighthouse.

Fundo #

Os algoritmos do navegador para converter HTML, CSS e JavaScript em pixels são conhecidos coletivamente como pipeline de renderização.

O pipeline de renderização consiste nas seguintes etapas sequenciais: JavaScript, Estilo, Layout, Pintura, Composto.
O pipeline de renderização.

Tudo bem se você não entender o que significa cada etapa do pipeline de renderização. O principal a ser entendido agora é que, em cada etapa do pipeline de renderização, o navegador usa o resultado da operação anterior para criar novos dados. Por exemplo, se o seu código faz algo que acione o Layout, as etapas de pintura e composição precisam ser executadas novamente. Uma animação não composta é qualquer animação que acione uma das etapas anteriores no pipeline de renderização (Estilo, Layout ou Pintura). As animações não compostas têm pior desempenho porque forçam o navegador a trabalhar mais.

Confira os seguintes recursos para aprender mais sobre o pipeline de renderização:

  • Visão interna dos navegadores da web modernos (parte 3)
  • Simplifique a complexidade da pintura e reduza as áreas de pintura
  • Atenha-se às propriedades somente do compositor e gerencie a contagem de camadas

Como o Lighthouse detecta animações não compostas #

Quando uma animação não pode ser composta, o Chrome relata os motivos da falha para o rastreamento do DevTools, que é o que o Lighthouse lê. O Lighthouse lista os nós DOM que têm animações que não foram compostas junto com o(s) motivo(s) da falha para cada animação.

Como garantir que as animações sejam compostas #

Consulte Atenha-se às propriedades somente do compositor e gerencie a contagem de camadas e animações de alto desempenho .

Recursos #

  • Código-fonte para a auditoria de evitar animações não compostas
  • Atenha-se às propriedades somente do compositor e gerencie a contagem de camadas
  • Animações de alto desempenho
  • Simplifique a complexidade da pintura e reduza as áreas de pintura
  • Visão interna dos navegadores da web modernos (parte 3)
Last updated: Aug 12, 2020 — 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.