Animações CSS3 vs Animações jQuery

Comprovaremos in situ como uma simples animação afeta o rendimento do navegador quanto ao uso da memória se refere. Uma vez acabado o artigo tiraremos uma conclusão com um ganhador.

Por __Mith__- Tradução CRV


Publicado em: 28/12/12
Valorize este artigo:
 
Originalmente Flash nos pavimentou o caminho à hora de caracterizar com mais que texto ou imagens as páginas web. Permitiu aos desenvolvedores incluir animações e outros ricos efeitos, guiando-nos para uma experiência de usuário mais colorida e variada. No entanto, Flash estava cheio de falhas, como os problemas de segurança, longo tempo de carregamento nas redes medíocres, etc. Então vieram as bibliotecas JavaScript como jQuery, Prototype e MooTools, que deslocaram muitos dos problemas de Flash correndo nativamente no navegador, ademais de fazer com que fosse mais simples para o desenvolvedor médio usar Javascript à hora de criar efeitos e animações. Já se passaram alguns anos e temos conosco as habilidades de CSS3 para criar animações, que oferecem vantagens adicionais, como o incremento potencial de velocidade, devido a que são renderizadas diretamente pelo navegador.

Porém, qual é realmente a melhor solução para nós à hora de usar animações? Neste artigo daremos uma olhada em como são criadas as animações em jQuery e em CSS3, e em como se desempenha cada um.
 

Introdução à animação em jQuery

A biblioteca jQuery reduz muito a complexidade para o desenvolvedor. Por exemplo, aqui temos um caso no que criaremos um simples <div>, que será animado posteriormente ao se clicar um botão:

1. Incluímos a biblioteca jQuery na página, por exemplo assim:

// Recomenda-se que você use um CDN para invocar a biblioteca jQuery. Aqui há um link para o CDN de Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js?ver=1.8.1"></script>

2. Criamos o elemento <div>, e lhe damos um estilo básico:

<div></div>
div {
margin-left:10px;
margin-bottom:10px;
background-color:red;
opacity:1;
float:left;
width:100px;
height:1px;
}

3. Criamos o botão que ao ser pressionado acionará a função que anime o <div>

<button id="inicio">Começar Animação</button>

4. Escrevemos um pouco de código jQuery para selecionar o elemento <div> e aplicar os efeitos uma vez que o botão tenha sido acionado. Uma vez feito, a altura do <div> se incrementará a 25px e a opacidade se reduzirá de 1 a 0.5 em um período de 2.000 milissegundos (2 segundos) :

$("#inicio").click(function(){
$("div").animate({
opacity: 0.5,
height:"25px",
} , 2000);
});

É muito bonito ver o fácil que é animar um elemento com jQuery usando nada mais que umas poucas linhas de código, e o melhor sobre jQuery é que seu código funcionará igual de bem em todos os navegadores, incluindo versões tão vetustas como IE6!
 

Introdução à animação em CSS3

Para criar uma animação em CSS3 necessitamos especificar duas diferentes construções em nosso CSS. Antes que nada, necessitamos especificar que forma tomará a animação usando a regra @keyframes, a qual se assemelha a isto:

@keyframes minha-animacao {
0% {height:0px; opacity:1; }
100% {height:25px; opacity:0.5; }
}

"minha-animacao" é o nome pelo qual nossa animação será identificada, e as linhas diferentes são diferentes keyframes (fotogramas chave). Em cada caso, as propriedades que há entre chaves indicam as propriedades de animação que se terão em conta em cada fase de ela, e as porcentagens ditam a duração de cada fase —n este caso particular nossa animação é muito simples, assim que unicamente definimos o começo ( 0% ) e o final ( 100% ) da animação. Para aplicar a animação a um elemento da página você necessita referi-la a ele usando a propriedade "animation":

div {
margin-left:10px;
margin-bottom:10px;
background-color:red;
opacity:0.5;
float:left;
width:100px;
height:25px;
animation: minha-animacao 2s;
}

É funcionalmente idêntico ao exemplo que vimos antes de jQuery: o <div> se anima em um período de 2 segundos, com sua altura incrementando-se a 25px e sua opacidade reduzindo-se de 1 a 0.5. Parece simples, não? Infelizmente, o suporte dos navegadores não é tão bom no caso das animações CSS3 — as versões de IE abaixo da 10 não suportam esta propriedade-, e embora a grande maioria dos outros grandes navegadores o façam, e a especificação de animação já seja estável neles, a maioria deles não eliminaram os requerimentos de prefixos particulares de cada navegador, fazendo que para que se de suporte à propriedade haja que incluí-los, sendo estes -webkit-, -moz-, -ms- e -o-. Por exemplo, para o navegador Opera seria assim:

@-o-keyframes minha-animacao {
0% {height:0px; opacity:1; }
100% {height:25px; opacity:0.5; }
}

y

div {
...
-o-animation: minha-animacao 2s;
}

Isto faz com que a base do código comece a ser desalentadora, embora se o que você quiser seja reduzir todas as linhas de prefixos a uma só, você pode usar a solução do preprocessador. Aqui há um par deles:

  1. SASS — Um processador CSS que permite incluir variáveis, funções e outras características conseguindo que seu CSS seja más rápido e eficiente em alguns casos. Usar SASS não deveria afetar o rendimento de seu site.
  2. Prefixfree — Uma biblioteca JavaScript que simplesmente acrescenta os prefixos corretos a seu CSS quando o navegador o acessa , em tempo de execução. Isto significa a execução de mais JavaScript na máquina do cliente, o que poderia acrescentar um pouco de carregamento no rendimento, mas relativamente pequeno. O inconveniente é que o desenho da web ficará aos quadrados se o usuário tiver desativado Javascript.
Assim, no momento, parece que jQuery é o caminho a seguir, especialmente em términos de compatibilidade de navegadores. Se você quiser um site que permaneça usável nos velhos navegadores que não suportam a animação, é aconselhável que o ajuste por padrão das propriedades que são animadas sejam indicadas no estado final da animação. Por exemplo, lembre que ajustamos a altura a 25px e a opacidade a 0.5, de modo que se a animação não está disponível o navegador ajusta os valores por padrão aos do estado final, ou seja, que em um navegador antigo os valores que se veriam seriam os de 25px e 0.5, não os iniciais.

Nota: para mais detalhes sobre as animações CSS, ou seja este link de Chris Mills.

 

Guerra de animações: CSS3 vs jQuery

Para testar o rendimento das animações CSS3 frente às animações jQuery, façamos o seguinte teste. Usaremos o código que ensinamos acima, mas em cada caso animaremos 300 <div>s simultaneamente. Assim será fácil medir o tempo que leva cada animação para ser executada.
 

Animações CSS3

O gráfico de execução para o test de animações CSS3 é mostrado na Imagem 1. Este gráfico foi criado usando a ferramenta Opera Dragonfly, e o navegador usado foi Opera 12 em Mac OS X.


(Legenda Imagem 1: o tempo que leva animar 300 <div>s com animação CSS).

Como se pode ver na imagem, a animação se completa em uns 2.9 segundos.

Vamos analisar agora o uso de memória. Este gráfico foi criado usando a opção de Memória dentro da aba Timeline nas Ferramentas de Desenvolvedor de Chrome 21.


(Legenda Imagem 2: a memória usada ao animar 300 <div>s com animação CSS.

A memória usada durante a animação CSS3 é muito pequena –em torno de 1.5MB, com só 100 ações requeridas. Os dados finais do test são:

  • Número de ações realizadas para acabar a animação: 100
  • Tempo tomado em executar a animação: 2.9 segundos
  • Memória consumida ao final da animação: 1.5 MB
Agora vamos proceder realizando o mesmo experimento com animações jQuery.
 

Animações jQuery

O gráfico de execução para o test de animação jQuery sai na Imagem 3. O gráfico foi criado usando as ferramentas de Opera Dragonflye o navegador usado foi Opera 12 em Mac OS X.


(Legenda Imagem 3: O tempo que demora em animar-se 300 <div>s com jQuery).

A operação completa leva uns 5 segundos – demasiado tempo? A animação atual não leva tempo demais, mas tem um tempo extra com respeito à animação carregada com JavaScript (note também que há uma pequena fração de tempo entre que se pressione o botão e que a animação comece, efetivamente, a transcorrer). Também o número de ações realizadas pelo navegador é maior, sendo mais de 2.000, enorme cifra comparada com as unicamente 100 na mesma animação feita com CSS3.

Inclusive sem usar ferramentas de desenvolvimento, você notará que uma vez que o botão “Começar Animação” é pressionado, há um breve intervalo de tempo antes de que a animação comece.

Quanto ao uso de memória, observemos a Imagem 4. O gráfico foi gerado usando a mesma opção de Memória das Ferramentas de Desenvolvimento de Chrome 21 que no caso anterior.


(Legenda Imagem 4: A memória usada animando 300 <div>s com jQuery).

Quando se trata de memória, a animação mostra uma fome brutal, devorando cerca de 6 MB! Os dados finais do test são:

  • Número de ações realizadas para executar a animação: 2119
  • Tempo que a animação demora em finalizar: 5 segundos
  • Memória consumida ao final da animação: 6 MB
Negativamente há que informar que os tests de animações acima darão diferentes resultados nos diferentes navegadores, mas pelo menos nos dá uma comparação razoável . Atualmente Chrome tem o processador mais veloz de JavaScript e executa as animações jQuery uns quantos centenas de milissegundos mais rápido que seus competidores. Entretanto é uma historia completamente diferente quanto às animações CSS3. Opera 12 leva a palma criando suaves animações, liderando quanto a manipulações do DOM e processado de CSS se refere. Firefox 14 e Safari 6 fazem um bom trabalho em ambas áreas. O pesadelo do desenvolvedor, IE (sendo a última versão estável, no momento de escritura do artigo, a 9) não suporta, diretamente, animações CSS3, mas executa as animações jQuery decentemente.
 

E o ganhador é...

CSS3! Claramente ganha CSS3 com muita distância. A gigantesca diferença em rendimento deve-se a que o processador de CSS do navegador está escrito em C++ e o código nativo se executa muito rápido, ao passo que jQuery (JavaScript) é uma linguagem interpretada e o navegador não pode prever antecipadamente seu comportamento, tentando adivinhar que evento ocorrerá depois.

Embora os resultados de cima indiquem que você tenha que usar animações CSS3, você deveria ter em conta as vantagens e desvantagens que discutimos anteriormente no artigo. Você necessita priorizar que uma importante quantidade de pessoas ainda usa Internet Explorer 7 e 8, assim que você deveria usar jQuery se é absolutamente necessário que suas animações funcionem igualmente bem em todos os navegadores antigos.

Alternativamente, você pode querer contemplar como suas animações funcionam defeituosamente nos navegadores sem suporte, em cujo caso as animações CSS3 são a melhor opção.

Observe que para animações simples, como a trivial mostrada no exemplo do test, você, provavelmente, poderia usar menos CSS se o fizesse como transição em vez de como animação. Dependerá da situação particular que você viva. As transições são mais rápidas mas dependem das mudanças de estado, enquanto que as animações são mais flexíveis e poderosas. Escolha a opção que mais lhe convenha.

Fonte
 





Manual: CSS 3


Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato