soy Kseso y esto EsCSS

Animaciones ¿Css3 o jQuery?

Animaciones ¿Css3 o jQuery?

·Por Kseso ✎ 3

Animation: Css3 vs jQueryY 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:

  1. 100 Número de acciones realizadas para terminar la animación.
  2. 2,9 segundos Tiempo necesario para terminar la ejecución de la animación.
  3. 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:

  1. 2119 Número de acciones realizadas para terminar la animación.
  2. 5 segundos Tiempo necesario para terminar la ejecución de la animación. Ver imagen
  3. 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.

avatar del Editor del blog

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 Don Kseso Kseso