23

De acordo com a especificação W3C, a propriedade will-change tem como objetivo informar ao navegador quais são as propriedades do CSS que serão modificadas para que o mesmo possa fazer otimizações sobre os elementos em questão. Por exemplo, se eu desejar alterar a opacidade de um link, posso fazer o seguinte:

.element { transition: opacity .2s; opacity: 1; }
.element:hover { will-change: opacity; }
.element:active { opacity: .3; }
<a href="#" class="element">Stack Overflow em Português</a>
<br>
<sub>Pressione o link acima para ver o efeito em ação</sub>

Ou seja, quando o mouse estiver sobre o elemento, eu adiciono a propriedade will-change definindo a propriedade opacity, informando ao navegador que tal propriedade poderá sofrer alterações em breve e então ele pode efetuar otimizações sobre o elemento modificado.

A questão é que a própria especificação descreve o uso desta propriedade como delicada e eu particularmente nunca vi algum lugar utilizando-a, então pergunto:

  • Como funciona a propriedade will-change?
  • Que tipo de otimização o navegador consegue fazer quando a propriedade é utilizada?
  • Quando o uso desta propriedade é necessário?

1 Resposta 1

14
+50

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.

4
  • Você consegue dissertar melhor sobre o que acontece no navegador para que essa otimização seja possível? O que seria exatamente esse "manter na memória por mais tempo"?
    – Woss
    Commented 13/06/2017 às 18:07
  • @AndersonCarlosWoss Como eu citei acima, essa otimização se torna possível a partir do momento em o navegador deixa "pré-carregado", o trabalho pesado que ele faria, no momento da alteração de um propriedade CSS, esperando somente o momento de exibi-las. Assim é possível ganhar velocidade de processamento. Sobre "manter na memória", fiz um adendo no texto para maior entendimento. Commented 13/06/2017 às 18:43
  • Em geral, essas otimizações não envolvem transferir o processamento para a GPU em vez da CPU?
    – bfavaretto
    Commented 13/06/2017 às 18:45
  • @bfavaretto O processo de renderização envolve é claro GPU e CPU. Seguindo o raciocínio de que a propriedade will-change "pré-carrega" as alterações, mas não as exibe, o ganho principal seria na parte de CPU. Veja, não necessariamente estamos transferindo responsabilidade de processamento de um componente para outro, e sim ganhando tempo, já adiantando o processamento da CPU, deixando somente a GPU para o momento da exibição. Commented 13/06/2017 às 18:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .