O que escolher para animar elementos de páginas da web? JavaScript ou CSS? Esta questão será um dia forçada a perguntar a todos os desenvolvedores da web. E talvez - e nem uma vez.Programadores JavaScript criaram muitas bibliotecas para animação do navegador. E parece que todo mundo ao redor estava inclinado a usar essas bibliotecas como uma solução pronta para animação. Mas vamos devagar. Está correto? Devo animar elementos da página da web usando JavaScript? Talvez você possa confiar em mecanismos CSS padrão e, assim, obter animações de alta qualidade e desempenho.
Como você está lendo isso, posso assumir que você está familiarizado com a animação JavaScript. Portanto, proponho explorar o tópico da animação CSS em suas várias manifestações, e também - proponho falar sobre o desempenho de tal animação.Informação geral
As animações CSS são baseadas em algumas propriedades do elemento. Entre eles, destacam-se:- Uma propriedade
positionque, em particular, pode receber os valores absolutee relative. - Propriedade
transform. - Propriedade
opacity. - Propriedades
left, right, top, bottom.
Para começar, dê uma olhada em alguns projetos piloto que usam várias propriedades CSS para animar elementos.Aqui está um projeto no qual um elemento com um identificador animatecuja propriedade é positiondefinida como um valor é animado absolute. As propriedades do elemento tope estão sujeitas a alterações left.Página do Projeto PilotoAbaixo está o código que implementa esta animação.#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
top: 200px;
left: 130px;
}
}
Aqui está um projeto no qual a mesma animação é implementada usando a propriedade CSS transform.Essa animação é representada pelo seguinte código:#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
transform: translate(100px, 100px);
}
}
Vamos usar esses projetos para tirar conclusões sobre o desempenho das animações CSS e sobre que tipo de recursos do sistema são usados para implementá-las.Se você apenas olhar as páginas dos projetos, poderá decidir o que é implementado neles da mesma maneira, embora usando abordagens diferentes. No entanto, se você medir o desempenho desses projetos usando as ferramentas de desenvolvedor do Chrome, eles serão diferentes.Como o navegador exibe a página?
Antes de nos aprofundarmos na pesquisa de desempenho, precisamos entender como o navegador exibe a página e quais ações são executadas se ocorrerem alterações na página.É assim que o processo de saída da página é.Saída da páginaConsidere os eventos refletidos nesta figura.Recalculate Style - Cálculo de estilos a serem aplicados aos elementos.Layout - Criação de layouts de elementos e sua colocação na página.Paintpreenchendo os pixels das camadas criadas, ou seja, criando imagens raster para cada camada. A GPU utilizará essas imagens para exibir a página.Composite Layer- Layout de camadas e exibi-las na tela. O resultado será a página finalizada.
Um evento Composite Layeré exatamente o momento em que a CPU está se comunicando com a GPU para criar uma animação. Usando propriedades CSS como transforme opacity, podemos transferir a carga de animação da CPU para a GPU.Animação e GPU
Uma GPU é essencialmente um computador especializado usado para trabalhar com imagens. Ele pode processar eficientemente grandes quantidades de informações gráficas.Como resultado, quando um evento ocorre Composite Layer, uma camada adicional é criada. Esse é o mecanismo pelo qual você pode evitar renderizar novamente o elemento animado e outros elementos da interface.Observando a figura a seguir, você pode pensar que os elementos animados estão localizados na mesma camada.Elementos animados ( original )Mas se você observar as camadas como se estivessem localizadas no espaço tridimensional, acontece que quando a animação é implementada usando a propriedade transform , uma camada adicional é criada para o círculo vermelho. Isso possibilita produzir animações suaves de alto desempenho.Uma camada adicional ( original ) foi criada para o objetoanimado.A GPU mantém a árvore de renderização de objetos na memória e, sem nova renderização, pode colocar a camada correspondente em cima de outras camadas. No caso de animar um objeto usando propriedadestopeleft, a mesma camada, devido a alterações nas propriedades, é renderizada repetidamente. Se você se interessar pelo comportamento dessas propriedades CSS, as partes superior e esquerda afetam o layout da página, o que leva à necessidade de renderizar novamente a página e reorganizar as camadas.Animação usando propriedades convertidas e usando propriedades superior e esquerdaEsta figura permite ver uma diferença séria entre animação implementada usando propriedadestranslatee propriedadestopeleft.No caso de animações criadas comtopeleft, o círculo é renderizado em cada posição até atingir a posição extrema. Depois disso, ele começa a se mover para a posição inicial.A seguir, é exibida aPerformancebarra de ferramentas do desenvolvedordoChrome com detalhes sobre o processo de animação.Animação usando a propriedade translate ( original )Animação usando as propriedades superior e esquerda ( original )Se você observar as informações detalhadas sobre as tarefas individuais apresentadas no painelPerformance, podemos concluir que diferentes ações são executadas na estrutura dessas tarefas. Portanto, no caso da animação superior / esquerda, a tarefa executa o recálculo de estilos, o layout das camadas, atualizando a árvore de camadas, criando um layout e a renderização. No caso de animação de conversão, a única tarefa que a GPU resolve é mover a camada sem gerar nada para o DOM.Como resultado, devido ao uso de poderosos recursos da GPU, usando a animação de conversão, o thread principal é liberado. Isso melhora o desempenho do aplicativo. O uso da animação superior / esquerda leva a uma grande carga adicional no thread principal.A carga no fluxo principal criada pela animação de conversão (esquerda) e a animação superior / esquerda (direita) (o original )A figura acima demonstra claramente a carga que cai no fluxo principal ao executar a animação superior / esquerda. Isso é o resultado de alterações constantes que precisam ser processadas para executar essa animação.Sumário
Como resultado, podemos concluir que, usando animações CSS, vale a pena prestar atenção exatamente em quais recursos do sistema estão envolvidos em sua execução. Se possível, vale a pena usar aqueles que são executados pela GPU.E que tipo de animação você usa em seus projetos?