will-change

Sumário

A propriedade will-change do CSS fornece um modo dos autores dizerem aos navegadores sobre que tipo de mudanças devem ser esperadas no elemento, então o navegador pode fazer as otimizações apropriadas  com antecedência, antes do elemento ser efetivamente modificado. Esses tipos de otimizações podem aumentar a capacidade de resposta de uma página, fazendo o trabalho potencialmente caro antes do tempo antes que eles são realmente necessários.

O uso adequado dessa propriedade pode ser um pouco complicado:

• Não aplique will-change em muitos elementos. O navegador já tenta ao máximo otimizar tudo. Algumas das otimizações mais fortes que podem utilizar o will-change acabam usando muitos recursos da máquina, e quando utilizados em demasia como neste caso, pode fazer a página para retardar o carregamento ou consumir uma grande quantidade de recursos.

• Use com moderação. O comportamento normal do navegador para otimizações é fazê-las e depois voltar ao normal. Mas adicionando will-change diretamente no estilo, implica que o elemento alvo está sempre alguns momentos antes da mudança, e o navegador irá manter as otimizações por muito mais tempo do que teria de outra forma. Então é uma boa prática colocar e retirar o  will-change usando script antes e depois da mudança ocorrer.

• Não aplicar will-change em elementos para realizar a otimização prematura. 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.

• Dê tempo suficiente para trabalhar. Essa propriedade Esta propriedade destina-se como um método para os autore dizerem ao agente do browser sobre como mudarão as properiedades antes disso acontecer. Então o navegador pode escolher como aplicar qualquer otimização requisitada na propriedade antes do tempo da ação acontecer. Isso é importante para dar ao navegador algum tempo para fazer as otimizações. Identifique um jeito de prever as mudanças, e use a proiedade will-change pra isso.

Sintaxe

/* 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;

Valores

auto

Essa palavra chave não expressa nenhuma intenção em particular; o user agent deve aplicar qualquer otimização como normalmente ocorre.

O <animateable-feature> 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, or 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.

Sintaxe formal

auto | <animateable-feature>#
where 
<animateable-feature> = scroll-position | contents | <custom-ident>

Exemplos

.sidebar {
  will-change: transform;
}

O exemplo acima adiciona a propriedade will-change diretamente no estilo, o que irá fazer cin que o navegadormantenha a otimização em memória por muito mais tempo que o necessário e nós já vimos que isso deve ser evitado. Abaixo outro examplo mostrando como aplicar o will-change através de script, o que provavelmente é o que você deve fazer na maioria dos casos.

var el = document.getElementById('element');

// Set will-change quando ocorre hover no elemento
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // As propriedades otimizáveis que vão mudar no bloco de animações
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

Entretanto pode ser apropriado incluir will-change no seu estilo css para uma aplicação que faz page flips quando uma tecla é pressionada como um álbum ou uma apresentação de slides, onde a página é grande e complexa. Isso irá dizer ao navegador para preparar a transição ã frente do tempo e aceitar transições entre as páginas assim que a tecla for pressionada.

.slide {
  will-change: transform;
}

Especificações

Compatibilidade de Navegadores

[1] From Firefox 31 to 35, will-change was available, but only if the user flipped the layout.css.will-change.enabled flag to true. The preference has been removed in Firefox 43.

Firefox aceita setar will-change: will-change acima da versão 42.0, que é inválido na espeficação. Isso foi arrumado no Firefox 43.0. See bug 1195884.