Layout, pintura e composição: o pipeline de renderização

Depois que a árvore de renderização é criada, o navegador executa três etapas: disposição (calculando os tamanhos e as posições dos elementos), pintura (preenchendo pixels com cores, textos e imagens) e composição (combinando as camadas pintadas e exibindo-as na tela).

A disposição calcula a geometria — largura, altura e posição x/y — de cada elemento. Alterar propriedades que afetam a geometria (width, margin, padding, font-size, position) dispara a disposição do elemento e potencialmente de toda a sua subárvore — é a etapa mais dispendiosa.

A pintura preenche os pixels de cada camada: fundos, bordas, textos e sombras. Alterar color, background-color, visibility ou border-radius dispara uma repintura sem refazer a disposição — é mais barato que a disposição, mas ainda pode ser dispendioso se uma área grande for repintada.

O compositor combina as camadas usando a GPU. As propriedades CSS que afetam apenas a composição — transform e opacity — podem ser animadas sem disparar a disposição ou a pintura. A GPU as processa a 60 fps com envolvimento mínimo da CPU.

csstriggers.com (atualmente documentação no navegador) documenta quais propriedades CSS disparam a disposição, a pintura e/ou a composição em cada mecanismo de navegador. Use-o para auditar propriedades de animação. Prefira transform/opacity para propriedades animadas.

A sobrecarga da disposição ocorre quando o JavaScript alterna entre ler propriedades de disposição (offsetWidth) e escrever propriedades de estilo em um ciclo. Cada escrita invalida a disposição; cada leitura força um refluxo síncrono. Agrupe todas as leituras antes de todas as escritas para evitar essa sobrecarga.

Apenas transform e opacity são processadas inteiramente pelo compositor quando o elemento está em sua própria camada. Animar qualquer outra propriedade — até mesmo left/top — dispara a disposição ou a pintura na linha de execução principal e pode causar travamentos.

Os navegadores promovem elementos para sua própria camada da GPU quando eles têm will-change: transform, uma animação CSS em transform/opacity, uma posição fixa com elementos vizinhos em composição ou uma transformação 3D. Cada camada usa memória da GPU — camadas demais causam pressão de memória.

Uma tempestade de pintura ocorre quando uma grande parte da página é repintada a cada quadro. Crie um perfil no Chrome DevTools → Renderização → Piscar de pintura para identificar as áreas repintadas. Isole os elementos frequentemente animados em suas próprias camadas para limitar a área de repintura.

Grave um perfil de desempenho no Chrome DevTools. O gráfico de chamas mostra eventos de layout, atualização da árvore de camadas, pintura e composição. Barras longas de layout ou pintura indicam gargalos. Procure manter os tempos de quadro abaixo de 16 ms para manter 60 quadros por segundo.

Anime com transform e opacity sempre que possível. Use clip-path em vez de width/height para animações de revelação — clip-path favorece o trabalho do compositor nos navegadores modernos. Evite animar box-shadow; use opacity com um pseudo-elemento que contenha uma sombra pré-renderizada.

Quais duas propriedades CSS podem ser animadas sem acionar o layout ou a pintura?

O pipeline de renderização — layout, pintura e composição — determina o desempenho das animações. O layout é o mais dispendioso, a pintura tem custo moderado e as propriedades exclusivas de composição (transform, opacity) são processadas pela GPU. Compreender esses acionadores permite criar animações suaves a 60 quadros por segundo, sem recalculos excessivos de layout ou tempestades de pintura.