Desempenho

Há muitas modificações que podemos incluir em transições ou animações, mas algumas delas podem ser mais custosas ou trabalhosas para serem renderizadas pelo navegador, afetando assim o desempenho de uma página. Então sempre que possível essas modificações devem ser evitadas.

Esse é um assunto complexo de entender, é preciso saber o que acontece internamente em um navegador para compreender como otimizar o desempenho dessas modificações. Mas basicamente há algumas recomendações que podemos seguir.

Uma das recomendações é que se evite criar modificações que afetam a geometria do layout, como a altura ou largura de um elemento, por exemplo, pois é como se estivéssemos obrigando que o layout seja renderizado novamente a cada frame, e isso pode ser muito custoso. Conforme essas alterações custosas sejam renderizadas, os problemas de desempenho podem ser realmente visíveis, e notando isso, a experiência do usuário pode ser negativamente impactada.

Algumas propriedades como transforms ou opacity não alteram o layout composto pelos elementos da página, elas afetam somente o próprio elemento como um todo, e isso acaba por ser mais simples para o navegador, pois ele só precisa se preocupar em gerar o bitmap do próprio elemento e carrega-lo para a GPU, então o navegador pode aproveitar a GPU para desenhar o mesmo bitmap em uma posição, rotação ou escala diferente, compondo assim uma animação visivelmente melhor.

Podemos usar também a propriedade will-change para que o navegador saiba quais propriedades serão mudadas. Essa propriedade pode fazer com que o próprio nevagador faça algumas otimizações necessrias. No entanto, usar demais o will-change, pode fazer com que o navegador gaste recursos, resultando assim em mais perdas em desempenho.

.box {
  will-change: opacity;
}