> Manuales > Manual de CSS 3

Comprobaremos in situ cómo una simple animación afecta al rendimiento del navegador en cuanto al uso de la memoria se refiere. Una vez acabado el artículo extraeremos una conclusión con un ganador.

 
Originalmente Flash nos pavimentó el camino a la hora de caracterizar con más que texto o imágenes las páginas web. Permitió a los desarrolladores incluir animaciones y otros ricos efectos, guiándonos hacia una experiencia de usuario más colorida y variada. Sin embargo, Flash estaba plagado de fallos, como los problemas de seguridad, largos tiempos de carga en redes mediocres, etc. Entonces vinieron las librerías JavaScript como jQuery, Prototype y MooTools, las cuales desplazaron muchos de los problemas de Flash corriendo nativamente en el navegador, además de hacer que fuera más sencillo para el desarrollador medio usar Javascript a la hora de crear efectos y animaciones. Han pasado ya unos cuantos años y tenemos con nosotros las habilidades de CSS3 para crear animaciones, las cuales ofrecen ventajas adicionales, como el incremento potencial de velocidad, debido a que son renderizadas directamente por el navegador.

Pero, ¿cuál es realmente la mejor solución para nosotros a la hora de usar animaciones? En este artículo echaremos un vistazo a cómo se crean las animaciones en jQuery y en CSS3, y a cómo se desempeña cada uno.

Introducción a la animación en jQuery

La librería jQuery reduce mucho la complejidad para el desarrollador. Por ejemplo, aquí tenemos un caso en el que crearemos un simple <div>, el cual será animado posteriormente al hacer clic en un botón:

1. Incluimos la librería jQuery en la página, por ejemplo así:

// Se recomienda que uses un CDN para invocar la librería jQuery. Aquí hay un enlace al CDN de Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js?ver=1.8.1"></script>

2. Creamos el elemento <div>, y le damos un estilo básico:

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

3. Creamos el botón que al ser pulsado accionará la función que anime el <div>

<button id="inicio">Comenzar Animación</button>

4. Escribimos un poco de código jQuery para seleccionar el elemento <div> y aplicar los efectos una vez que el botón haya sido accionado. Una vez hecho, la altura del <div> se incrementará a 25px y la opacidad se reducirá de 1 a 0.5 en un periodo de 2.000 milisegundos (2 segundos) :

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

Es muy bonito ver lo fácil que es animar un elemento con jQuery usando nada más que unas pocas líneas de código, y lo mejor sobre jQuery es que tu código funcionará igual de bien en todos los navegadores, ¡incluyendo versiones tan vetustas como IE6!

Introducción a la animación en CSS3

Para crear una animación en CSS3 necesitamos especificar dos diferentes construcciones en nuestro CSS. Antes que nada, necesitamos especificar qué forma tomará la animación usando la regla @keyframes, la cual se asemeja a ésto:

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

"mi-animacion" es el nombre por el cual nuestra animación será identificada, y las líneas diferentes son diferentes keyframes (fotogramas clave). En cada caso, las propiedades que hay entre llaves indican las propiedades de animación que se tendrán en cuenta en cada fase de ésta, y los porcentajes dictan la duración de cada fase —en este caso particular nuestra animación es muy simple, así que únicamente definimos el comienzo ( 0% ) y el final ( 100% ) de la animación. Para aplicar la animación a un elemento de la página necesitas referirla a éste usando la propiedad "animation":

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

Es funcionalmente idéntico al ejemplo que hemos visto antes de jQuery: el <div> se anima en un periodo de 2 segundos, con su altura incrementándose a 25px y su opacidad reduciéndose de 1 a 0.5. Suena sencillo, ¿eh? Desafortunadamente, el soporte de los navegadores no es tan bueno en el caso de las animaciones CSS3 — las versiones de IE por debajo de la 10 no soportan esta propiedad-, y aunque la gran mayoría de los otros grandes navegadores sí lo hacen, y la especificación de animación es ya estable en ellos, la mayoría de ellos no han eliminado los requerimientos de prefijos particulares de cada navegador, haciendo que para que se de soporte a la propiedad haya que incluirlos, siendo éstos -webkit-, -moz-, -ms- y -o-. Por ejemplo, para el navegador Opera sería así:

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

y

div {
...
-o-animation: mi-animacion 2s;
}

Esto hace que la base del código comience a ser desalentadora, aunque si lo que quieres es reducir todas las líneas de prefijos a una sola, puedes usar la solución del preprocesador. Aquí hay un par de ellos:

  1. SASS — Un procesador CSS que te permite incluir variables, funciones y otras características logrando que tu CSS sea más rápido y eficiente en algunos casos. Usar SASS no debería afectar al rendimiento de tu sitio.
  2. Prefixfree — Una librería JavaScript que simplemente añade los prefijos correctos a tu CSS cuando el navegador accede a él, en tiempo de ejecución. Esto significa la ejecución de más JavaScript en la máquina del cliente, lo cual podría añadir un poco de carga en el rendimiento, pero relativamente pequeño. La pega es que el diseño de la web se quedará a cuadros si el usuario tiene desactivado Javascript.
Así que por el momento parece que jQuery es el camino a seguir, especialmente en términos de compatibilidad de navegadores. Si quieres un sitio que permanezca usable en los viejos navegadores que no soportan la animación, es aconsejable que el ajuste por defecto de las propiedades que son animadas se indiquen en el estado final de la animación. Por ejemplo recuerda que hemos ajustado la altura a 25px y la opacidad a 0.5, así que si la animación no está disponible el navegador ajusta los valores por defecto a los del estado final, es decir, que en un navegador antiguo los valores que se verían serían los de 25px y 0.5, no los iniciales.

Nota: para más detalles sobre las animaciones CSS, ojea este link de Chris Mills.

Guerra de animaciones: CSS3 vs jQuery

Para testar el rendimiento de las animaciones CSS3 frente a las animaciones jQuery, probemos la siguiente prueba. Usaremos el código que hemos enseñado arriba, pero en cada caso animaremos 300 <div>s simultáneamente. Así será fácil medir el tiempo que le lleva a cada animación el ser ejecutada.

Animaciones CSS3

El gráfico de ejecución para el test de animaciones CSS3 se muestra en la Imagen 1. Este gráfico fue creado usando a herramienta Opera Dragonfly, y el navegador usado fue Opera 12 en Mac OS X.


(Leyenda Imagen 1: el tiempo que lleva animar 300 <div>s con animación CSS).

Como se puede ver en la imagen, la animación se completa en unos 2.9 segundos.

Vamos a analizar ahora el uso de memoria. Este gráfico fue creado usando la opción de Memoria dentro de la pestaña Timeline en las Herramientas de Desarrollador de Chrome 21.


(Leyenda Imagen 2: la memoria usada al animar 300 <div>s con animación CSS.

La memoria usada durante la animación CSS3 es muy pequeña -alrededor de 1.5MB, con solo 100 acciones requeridas. Los datos finales del test son:

Ahora vamos a proceder realizando el mismo experimento con animaciones jQuery.

Animaciones jQuery

El gráfico de ejecución para el test de animación jQuery sale en la Imagen 3. El gráfico fue creado usando la herramientas de Opera Dragonfly, y el navegador usado fue Opera 12 en Mac OS X.


(Leyenda Imagen 3: El tiempo que tardan en animarse 300 <div>s con jQuery).

La operación completa lleva unos 5 segundos – ¿demasiado tiempo? La animación actual no lleva demasiado tiempo, pero tiene un tiempo extra con respecto a la animación cargada con JavaScript (nótese también que hay una pequeña fracción de tiempo entre que el botón se pulsa y la animación comienza, efectivamente, a proceder). También el número de acciones realizadas por el navegador es mayor, siendo más de 2.000, enorme cifra comparada con las únicamente 100 en la misma animación hecha con CSS3.

Incluso sin usar herramientas de desarrollo, notarás que una vez que el botón “Empezar Animación” es pulsado, hay un breve intervalo de tiempo antes de que la animación comience.

En cuanto al uso de memoria, fijémonos en la Imagen 4. El gráfico fue generado usando la misma opción de Memoria de las Herramientas de Desarrollo de Chrome 21 que en el caso anterior.


(Leyenda Imagen 4: La memoria usada animando 300 <div>s con jQuery).

Cuando se trata de memoria, la animación muestra un hambre brutal, devorando cerca de ¡6 MB! Los datos finales del test son:

Negativamente hay que informar que los tests de animaciones de arriba darán diferentes resultados en los diferentes navegadores, pero al menos se nos da una comparación razonable. Actualmente Chrome tiene el más veloz procesador de JavaScript y ejecuta las animaciones jQuery unos cuantos cientos de milisegundos más rápido que sus competidores. Sin embargo es una historia completamente diferente en cuanto a las animaciones CSS3. Opera 12 se lleva la palma creando suaves animaciones, liderando en cuanto a manipulaciones del DOM y procesado de CSS se refiere. Firefox 14 y Safari 6 hacen un buen trabajo en ambas áreas. La pesadilla del desarrollador, IE (siendo la última versión estable en el momento de escritura del artículo la 9) no soporta, directamente, animaciones CSS3, pero ejecuta las animaciones jQuery decentemente.

Y el ganador es...

¡CSS3! Claramente gana CSS3 a mucha distancia. La gigantesca diferencia en rendimiento es debida a que el procesador de 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 por adelantado su comportamiento, intentando adivinar qué evento ocurrirá después.

Aunque los resultados de arriba indican que tienes que usar animaciones CSS3, deberías tener en cuenta las ventajas y desventajas que hemos discutido anteriormente en el artículo. Necesitas priorizar que aún una importante cantidad de gente usa Internet Explorer 7 y 8, así que deberías usar jQuery si es absolutamente necesario que tus animaciones funciones igual de bien que en todos los navegadores antiguos.

Alternativamente, puede que quieras contemplar cómo tus animaciones funcionan defectuosamente en los navegadores sin soporte, en cuyo caso las animaciones CSS3 son la mejor opción.

Nótese que para animaciones simples, como la trivial mostrada en el ejemplo del test, probablemente podrías usar menos CSS si lo hicieras como transición en vez de como animación. Ya depende de la particular situación que vivas. Las transiciones son más rápidas pero dependen de los cambios de estado, mientras que las animaciones son más flexibles y poderosas. Elije la opción que más te convenga.

Siddharth Rao
Fuente

OldMith

Desarrollador Web. jQuery. Responsive Design. Wordpress. Friki por naturaleza.

Manual