Animaciones ¿Css3 o jQuery? 29.11.12
¿Qué es mejor: Css3 o jQuery para hacer animaciones? Análisis y datos sobre procesos, tiempo y memoria usada por ambos. El ganador es...
Animaciones ¿Css3 o jQuery?
Y estaban las páginas tristes y quietas. Todo era texto e imágenes estáticas con suerte, y sin ella con multitud de gifs. Y los hacedores y visitantes pedían algo más que rompiese la monotonía.
Y en un principio, en la era primera, les fue dado flash. Y se vio que no era bueno pese a todos los discípulos que poco menos que lo veneraban.
Y le llegó la hora y el relevo a javascript. Y florecieron las librerías como jQuery, Prototype y MooTools para poder animar elementos. Y todos se convirtieron: vieron que eran fáciles de usar, se ejecutan de forma nativa en el navegador y no tienen los problemas de seguridad y dependencia del flash.
Y así fue hasta el advenimiento y extensión de Css3. Y aquí surgen las dudas, disparidad de opiniones y gustos. ¿Qué usar, jQuery o Css3 en animaciones sencillas?
Animaciones: Css3 o jQuery
Lo que sigue es un extracto (que no traducción completa como otras veces) del artículo (ing) de Siddharth Rao publicado en dev.opera.com sobre qué es mejor usar en una animación sencilla, si Css3 o Jquery
Para obtener datos, que es de lo que se trata, comencemos por tener un div con los siguientes estilos:
div {
margin-left:10px;
margin-bottom:10px;
background-color:red;
opacity:1;
float:left;
width:100px;
height:1px;
}
Y a continuación un botón para modificar la altura a 25px y la opacidad a .5 durante 2 segundos al pulsarlo.
Para ello crea la función siguiente y, como es lógico, enlaza la librería jQuery
$("#start").click(function(){
$("div").animate({
opacity: 0.5,
height:"25px",
} , 2000);
});
Y por otro lado, para para Css3 crea la animación utilizando la regla correspondiente para tener los keyframes y la aplica a nuestro div:
@keyframes my-animation {
0% {height:0px; opacity:1; }
100% {height:25px; opacity:0.5; }
}
div {
/* declaraciones anteriores */
animation: my-animation 2s;
}
Constataciones iniciales
Mientras que jQuery es soportado por hasta ie6, las animation y @keyframes solo lo son por navegadores actuales y recomendable, cuando no obligado, el uso de prefijos privativos.
Así mismo, a simple vista, el código necesario es menor en jQuery (si no tenemos en cuenta la librería enlazada).
Lo que hace que de entrada jQuery parta con ventaja. Aunque siempre se puede minimizar los contras de Css utilizando algún preprocesador (Sass, Less...) y para librarse de los prefijos alguna herramienta como Prefixfree de Lea Verou.
El rendimiento
Para evaluar el rendimiento de las dos animaciones (Css3 y jQuery) crea 300 div´s con las propiedades anteriores.
El número tan elevado facilitará el estudio
Animation Css
La página de la animación con css la pasa por el analizador Dragonfly para Opera y las herramientas de Desarrollo de Chrome 21.
Los resultados obtenidos son:
- 100 Número de acciones realizadas para terminar la animación.
- 2,9 segundos Tiempo necesario para terminar la ejecución de la animación.
- 1,5 MB Memoria consumida al final de la animación. Ver imagen
Estas cifras posíblemente mejorasen sacando la animación vía @keyframe y dejándola sólo como transición.
Animaciones jQuery
La página de las animaciones con jQuery analizada con las mismas herramientas que la de Css.
Los resultados:
- 2119 Número de acciones realizadas para terminar la animación.
- 5 segundos Tiempo necesario para terminar la ejecución de la animación. Ver imagen
- 6 MB Memoria consumida al final de la animación. Ver imagen
Sin olvidar que navegadores distintos en equipos diferentes corriendo en SO variados darán seguramente otros valores, sí es de reseñar la diferencia en los resultados obtenidos: peores en la animación realizada con jQuery.
Y el ganador es... CSS
Claramente, CSS3 gana de largo. La gran diferencia en el rendimiento se debe a que el procesador Css del navegador está escrito en C++ y el código nativo se ejecuta muy rápido, mientras que jQuery (JavaScript) es un lenguaje interpretado y el navegador no puede predecir qué va a ocurrir, en el sentido de que no puede saber qué evento ocurrirá a continuación del que se está desarrollando.
Aunque los resultados anteriores indicarían que se debería utilizar CSS3 para las animaciones, hay que tener en cuenta las ventajas y desventajas mencionadas antes. No olvides que aún hay usuarios que utilizan Internet Explorer 7 y 8, así que si son visitantes de tu página la elección sería jQuery.
Ahora que si las animaciones son sólo a efectos estéticos y no inciden en la estructura o accesibilidad de los contenidos, quizás debas tener presente la mejora progresiva y hacer las animaciones con Css3.
Autoría y Créditos:
Recuerda que todo lo anterior es un extracto (que no traducción completa como otras veces) del artículo (ing) de Siddharth Rao publicado en dev.opera.com
Más pruebas en la misma línea
Quizás aún tengas tus dudas. Así que mejor ver si otros autores han hecho pruebas similares y ver sus resultados.
En este artículo de Rich Bradshaw hace una prueba muy similar enfrentando a Css y jQuery.
Frente a los 2.6s y 40 eventos que necesita Css para completar toda la transición, en jQuery son miles los eventos y el tiempo necesario se multiplica.
No dejes de pasar también por esta prueba para ver todos los detalles.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
El mayor rendimiento de las animaciones con CSS se puede conseguir con Javascript, ya que en los navegadores modernos nos permiten acceder a su método via requestAnimationFrame.
ResponderEliminarCreo que jQuery no lo usa porque el control del tiempo es relativo, pero ver cómo se anima un <canvas> con requestAnimationFrame es espectacular:
http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html
Hey Emilio.
ResponderEliminarLa cuestión es que canvas no es "una animación", creo, desde el atrevimiento que me da mi supina ignorancia en esa materia.
Gracias como siempre por tu opinión.
Canvas es un elemento donde puedes dibujar, con animación o sin ella. Como bien dices no es estrictamente una animación de un elemento, pero también se puede usar con una animación normal:
ResponderEliminarhttp://www.html5rocks.com/en/tutorials/speed/animations/post.html