Considerações Inciais
A propriedade CSS will-change
, foi criada com a principal intenção de viabilizar os navegadores realizarem otimizações com antecedência, antes do elemento ser efetivamente modificado.
Como funciona a propriedade will-change?
Para utilizar a propriedade CSS will-change
, devemos informar como seu valor o nome da propriedade que se espera que haja uma animação ou mudança. Os valores podem ser:
/* Valores chave */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Exemplo de <custom-ident> */
will-change: opacity; /* Exemplo de <custom-ident> */
will-change: left, top; /* Exemplo de dois <animateable-feature> */
/* Valores globais */
will-change: inherit;
will-change: initial;
will-change: unset;
auto
Essa palavra chave não expressa nenhuma intenção em particular; o user agent deve aplicar qualquer otimização como normalmente ocorre.
O pode ser um dos seguintes valores:
scroll-position
Indica que o autor espera que haja uma animação ou mudança na posição do scroll do elemento no futuro.
contents
Indica que o autor espera que haja uma animação ou mudança no conteúdo do elemento no futuro.
<custom-ident>
Indica que o autor espera que haja uma animação ou mudança na propriedade com o nome dado no elemento no futuro. Isso não pode ser um dos seguintes valores: unset
, initial
, inherit
, will-change
, auto
, scroll-position
, ou contents
. A especificação não define o comportamento de um valor em particular, mas é comum pro transform
ser uma camada de composição. O Chrome atualmente toma duas ações, dadas as propriedades particulares do CSS: estabelece uma nova camada de composição ou um novo stacking context.
Exemplo:
.slide:hover {
will-change: opacity;
}
No exemplo acima ao passar o mouse por cima do elemento com a classe slide, o navegador irá realizar otimizações, pois o autor do código indicou que a seguir irá ocorrer uma mudança na propriedade opacity.
Que tipo de otimização o navegador consegue fazer quando a propriedade é utilizada?
As otimizações realizadas pelos navegadores através da propriedade will-change
são todas focadas em performance. Elas podem aumentar a capacidade de resposta de uma página, fazendo o trabalho potencialmente caro, antes do tempo em que eles realmente serão necessários. Traduzindo, o navegador deixa "pré-carregado", o trabalho pesado que ele faria, no momento da alteração de uma propriedade CSS, esperando somente o momento de exibi-las. Assim é possível ganhar velocidade de processamento.
Vale aqui fazer uma ressalva. Usar essa propriedade pode ser complicado! O navegador já tenta ao máximo otimizar tudo, então você não deve aplicar will-change
em muitos elementos. Quando utilizado em excesso pode retardar o carregamento da página em alguns casos ou consumir uma grande quantidade de recursos. Vamos a um exemplo de utilização ruim do will-change
:
.separador {
will-change: transform;
}
Nesse caso qualquer elemento em que a classe separador for aplicada, imediatamente o navegador irá entender que a propriedade indicada no will-change
irá ser alterada em breve, o que irá fazer com que o navegador mantenha a otimização em memória por muito mais tempo que o necessário. Por manter na memória entendemos que, o navegador prepara as otimizações e as armazenam em tempo de execução na memória, afim de esperar o momento certo de exibi-las.
Quando o uso desta propriedade é necessário?
Tendo em vista que o objetivo da propriedade will-change
é ganho de performance, o uso da mesma deve ser feito quando o tempo de resposta de uma página não estiver satisfatório, devido a problemas de renderização.
Fica a dica chave: Se sua página está performando bem, não adicione a propriedade will-change
nos elementos apenas para trazer mais velocidade. will-change
é entendido como algo para ser usado como último recurso, com o intuito de tentar solucionar problemas de performance. Ele não deve ser usado para antecipar esses possíveis problemas. O uso excessivo do will-change
poderá resultar em excessivo uso de memória e causar uma renderização mais complexa enquanto o browser tenta se preparar para uma possível mudança. Isso levará a um pior desempenho.
Conclusão
Para que fique bem claro, utilize will-change
somente se você já está com um problema de performance nas mãos, caso contrário você pode acabar arrumando um.