Desempenho: Propriedades Transformáveis vs. com Repintura

Os navegadores renderizam em três etapas: Disposição (tamanho + posição) → Pintura (píxeis) → Composição (mesclagem de camadas da GPU). Animar propriedades que acionam etapas anteriores é dispendioso.

Alterar estas propriedades força o navegador a recalcular a disposição de potencialmente toda a página. Evite animá-las:

• width, height
• margin, padding
• top, left
• font-size
• display

Estas propriedades ignoram a disposição, mas repintam os píxeis. O custo é moderado:

• background-color
• color
• box-shadow
• border

Estas propriedades ignoram tanto a disposição quanto a pintura — o navegador só precisa compor camadas rasterizadas previamente. O custo é muito baixo e há aceleração pela GPU:

• transform
• opacity

Para obter animações suaves a 60 quadros por segundo, anime apenas transform e opacity. Use transform: translate() em vez de top/left e opacity em vez de transições graduais com display.

will-change informa ao navegador que deve promover um elemento para sua própria camada da GPU antes do início da animação, evitando um "clarão de promoção" durante a animação.

Defina will-change: auto ou remova completamente a propriedade quando as animações terminarem. Manter elementos demais promovidos desperdiça memória da GPU.

Use a guia Desempenho do Chrome DevTools para registrar e analisar a temporização dos quadros. A guia Renderização pode exibir a intermitência de pintura (sobreposição verde), mostrando quais elementos são repintados em cada quadro.

A otimização mais impactante é substituir animações posicionais por transformações:

As transições de cor de fundo acionam a repintura, mas não a disposição. Elas são aceitáveis para elementos pequenos. Para fundos grandes, considere usar um pseudoelemento com uma transição de opacidade:

A propriedade contain informa ao navegador que um elemento e sua subárvore são independentes. Isso limita o escopo da invalidação da disposição, melhorando o desempenho da repintura.

Quais duas propriedades CSS podem ser animadas na etapa de composição sem acionar a disposição ou a pintura?

Animar propriedades de disposição (largura, superior, margem) aciona recálculos dispendiosos. Propriedades de pintura (cor, fundo) são mais baratas. Apenas transform e opacity são animadas na etapa de composição da GPU sem acionar a disposição ou a pintura. Dê sempre preferência a elas para obter animações suaves e eficientes.