Monitoramento de desempenho em animações CSS

(Virendra Singh) (22 de abril de 2020)

Animação usando JavaScript ? ou Animação usando CSS ?

Essa questão atinge todo desenvolvedor uma, ou provavelmente duas ou mais, em sua carreira técnica.

Com o tempo, os geeks de Javascript criaram várias bibliotecas para fazer animação no navegador, e todos parece convencido a usar essas bibliotecas como a solução pronta para uso. Mas, espere, essa é a solução certa? Devemos fazer animação usando JavaScript? Ou podemos contar com a implementação nativa de CSS para fazer animação de uma maneira melhor e com desempenho?

Já que você está lendo este blog, presumo que você esteja familiarizado com animações JavaScript. Então, vamos explorar “animação baseada em CSS” em detalhes e vários sabores de animação CSS, juntamente com suas implicações de desempenho.

A base da animação depende de algumas propriedades CSS que você frequentemente usará em animações baseadas em CSS pesadas implementações.

posição: (absoluta / relativa)

transformar

opacidade

esquerda, direita, superior, inferior e muitos mais.

Vamos começar observando os resultados de dois experimentos com diferentes propriedades CSS para animação.

(a) posição absoluta com esquerda e superior

(b) transform

Além disso, por que não tentamos tirar conclusões sobre o desempenho e o tempo de renderização com base nesses experimentos?

Observando esses dois exemplos, parece que semelhante funcionalidade foi imp limentado apesar de usar abordagens diferentes. No entanto, quando medimos as métricas de desempenho no chrome dev-tool, vemos uma diferença real em termos de desempenho para ambos os casos.

Antes de nos aprofundarmos para entender essas métricas de desempenho, precisamos entender como o navegador renderiza a IU e todas as ações que executa quando ocorre alguma atualização na IU.

Portanto, a criação da IU começa com:

1) Calcule os estilos que serão aplicados aos elementos (Recalcular Estilo)

2) Crie o layout dos elementos e posicione-os na tela (Layout)

3) Adicione os pixels em todos os layouts criados, é mais criar bitmap para cada camada. A GPU usa este bitmap para renderizar a camada na tela (Paint)

4) Por último, crie as camadas na tela, construindo uma pilha de camadas. A visão superior desta pilha será semelhante a uma página da web completa em que cada elemento tem sua própria posição (Camadas compostas)

A criação de camadas compostas é um lugar onde a CPU se comunica com a GPU, para lidar a animação. Usando propriedades como transform e opacity, podemos forçar o navegador a fazer animação usando GPU em vez de CPU.

Então, como a GPU nos ajuda a realizar uma animação suave?

GPU é outra máquina pequena para lidar com nossa animação e pode lidar com um grande número de cálculos de IU.

Portanto, quando a criação da camada composta é acionada, ela cria outra camada. Esta é outra maneira de nos ajudar a evitar a re-renderização do elemento que está ficando animado e outras partes dos elementos da IU.

Na imagem abaixo, as duas bolas vermelhas parecem estar na mesma camada. Mas, quando movemos essa camada em rotação 3D, descobrimos que a Transformar animação tem outra camada que foi criada para a bola vermelha, fornecendo animação suave.

GPU mantém esta árvore de objetos de renderização na memória e, sem renderizar novamente , pode colocar essa camada sobre as outras. Mas, no caso da animação no canto superior esquerdo, a mesma camada está sendo renderizada repetidamente devido a alterações nessas propriedades. Se verificarmos o comportamento dessas duas propriedades CSS, veremos que ambas as propriedades esquerda e principais impactar o layout, causando também uma operação de repintura e composição.

Traduzir vs Topo / Esquerda

A animação da bola acima tem uma diferença clara entre traduzir vs superior / esquerda .

No caso de superior / esquerda animação, a bola está sendo renderizada em cada posição até chegar ao destino final e, quando começa a se mover para a posição inicial novamente, começa a parte de renderização.

Observação: a cor roxa representa a criação do layout da bola vermelha e a cor verde é usada para arquivar os pixels.

As duas imagens acima são uma captura de tela de como translate se desempenha em relação ao superior / esquerda .

Ao destacar uma única tarefa de cada uma, começamos a entender que a atividade realizada pela tarefa é diferente em ambos os casos. No caso superior / esquerdo , a tarefa executava a criação do layout, pintura e recálculo do estilo. No caso de traduzir , uma única tarefa executada pelo A GPU move a camada composta sem renderizar nada no DOM.

Então, com o poder da GPU, estamos mantendo nosso thread principal livre. Isso nos ajuda a aumentar o desempenho do aplicativo e nosso principal tópico é o layout de renderização ocupado.

O gráfico de métrica de desempenho acima fornece mais evidências, explicando até que ponto nosso thread principal está ocupado com o recálculo de layout e estilo. Este gráfico reflete continuamente as mudanças que acontecem na IU.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *