will-change e promoção de camadas

will-change informa ao navegador que um elemento será animado, permitindo que ele prepare otimizações antecipadamente — como promover o elemento para sua própria camada de composição da GPU antes do início da animação.

Especifique qual propriedade mudará: will-change: transform, will-change: opacity, will-change: transform, opacity. Use will-change: auto para remover as indicações quando a animação terminar.

Aplique will-change somente aos elementos que realmente serão animados e apenas durante a animação. Adicioná-lo e removê-lo com JavaScript (por meio de uma classe) é mais eficiente do que deixá-lo permanentemente em elementos estáticos.

Cada camada promovida consome memória da GPU. Promover muitos elementos simultaneamente causa pressão sobre a memória, o que pode reduzir o desempenho — especialmente em dispositivos móveis com RAM limitada na GPU. Promova camadas com moderação e de forma deliberada.

Nunca aplique will-change a * nem a um grande número de elementos. O custo da otimização supera o benefício quando são criadas camadas demais. Analise primeiro; adicione will-change somente quando um problema específico de engasgo tiver sido confirmado.

Antes de will-change, os desenvolvedores usavam transform: translateZ(0) ou translate3d(0,0,0) para forçar a promoção para a GPU. will-change é a abordagem adequada e semântica. O truque de translateZ ainda funciona, mas é um detalhe de implementação, não uma expressão da intenção.

Camadas promovidas criam novos contextos de empilhamento. Isso afeta o comportamento de z-index — os filhos de um elemento promovido são empilhados em relação a esse elemento, não à raiz do documento. Tenha atenção às mudanças no contexto de empilhamento ao promover elementos.

Adicione will-change em mouseenter ou no início de uma animação e remova-o em mouseleave ou no fim da animação. Assim, o navegador tem tempo para se preparar sem consumir permanentemente memória da GPU com elementos inativos.

Chrome DevTools → o painel Camadas visualiza as camadas promovidas. Uma quantidade elevada de camadas (centenas) indica promoção excessiva. A seção Memória mostra o uso de memória da GPU. Mantenha a quantidade de camadas promovidas no mínimo e monitore-a em perfis de dispositivos de baixo custo.

CSS contain: layout paint restringe os cálculos de layout e pintura a uma subárvore, de forma semelhante ao isolamento. Isso melhora o desempenho de componentes autocontidos sem criar camadas da GPU — uma otimização menos dispendiosa que will-change para elementos não animados.

will-change tem suporte completo em todos os navegadores modernos. Os navegadores tratam essa propriedade como uma indicação, não como um comando — podem ignorá-la quando os recursos estão limitados. Não dependa dela como garantia; use-a apenas como orientação de desempenho.

will-change promove elementos para camadas de composição da GPU antes das animações, eliminando o custo da promoção no início da animação. Aplique-o de forma dinâmica e moderada — somente onde a análise de desempenho mostrar engasgos — para evitar o consumo excessivo de memória da GPU causado pela promoção exagerada.