Tips de velocidad y rendimiento (CSS3 v/s jQuery)

[WHK]

Estoy en un proyecto WEB y pude comprobar que CSS3 redenderiza las animaciones de manera mucho mas fluida que jQuery utilizando menos CPU.

Por ejemplo un efecto de barrido hacia la izquierda utilizando jQuery UI:

Código [Seleccionar] Expandir

$(foo).show('slide', {direction: 'left'}, 250);

Utilizando CSS3:

Código [Seleccionar] Expandir

#foo{ left: 555px; transition: all 0.5s; }

Luego para habilitar la animación de CSS3 llamamos el movimiento:

Código [Seleccionar] Expandir

$(foo).css({ left: 0 });

Resulta que la animación es enormemente mas fluida y eficiente, ahorras CPU y no da conflicto de queque.

Por ejemplo, si necesitas hacer un efecto suave con animate() desde jQuery realizando muchas llamadas (por ejemplo para simular un scrollbar suave o suavizar el slider de jQuery UI) tendrás que llamar a $(foo).stop().animate(...) haciendo que las transiciones se detengan para crear la pila siguiente creando un efecto muy feo en caso contrario tu animación total puede caer en una cola infinita de animaciones sin terminar.

Esto no sucede con CSS3 ya que el CORE del navegador es mucho mas eficiente y su código está mucho mejor diseñado ya que los efectos no producen ese efecto de corte cuando necesitas llamarlo 1000 veces en un segundo (por ejemplo para crear el efecto de suavidad de cambio de volumen de un video), por lo contrario la animación retrocede si es necesario utilizando procentajes hasta enfocarse completamente sin afectar al tiempo final de la animación como sucede con jquery.

Ejemplo:
http://jsfiddle.net/TfkH3/

En mi proyecto esta animación se repetía 20 veces sobre un DOM masomenos grande con un setTimeout de 65 milesimas de segundo entre cada aparición de objetos y la diferencia es demasiado grande ya que el uso de CPU optimizó por completo mi aplicación.

Cosas no puedes hacer con jQuery:
Animación suave de un zoom utilizando CSS3 y un slider de jQuery UI
http://jsfiddle.net/NShzx/3/

Intentando simular este efecto en jQuery:
http://jsfiddle.net/NShzx/1/

Como nos dimos cuenta, al agregar el efecto animate() este nos crea una cola de trabajo enorme creando un loop infinito, por lo cual le agregamos un stop:
http://jsfiddle.net/NShzx/2/

El problema es que cuando movemos el scroll de un lado a otro de manera rápida el efecto se corta, no tiene ese efecto elástico como CSS3 que detiene la animación de forma suave devolviendose al siguiente estado por porcentajes:
http://jsfiddle.net/NShzx/3/

Con CSS3 la cantidad de frames por segundo se ajusta a la aceleración de hardware del navegador, en otras palabras utilizará la aceleración gráfica de la tarjeta de video ya que se procesa como objeto 2D, en cambio con jQuery las animaciones están basados en frames simples y no como objetos.

La velocidad de frames por segundo en jQuery es definida a traves de jQuery.fx.interval, el problema es que solo funciona en Google Chrome quedando a merced de unos cuantos fps.

Otro punto extra para CSS3 es que las animaciones se ven igual de fluidas en un desktop y en un movil como un celular, en cambio el framework de jQuery es demasiado pesado para un celular y es casi imposible simular los mismos efectos que jQuery UI, por ello existe una versión muy similar llamada jQuery Movil y algunas animaciones si se basan en CSS3 pero volvemos a lo mismo, el uso de CPU.

Conclusión: si piensas que estás listo para emprender tu proyecto en HTML5 entonces
Si no puedes hacer algo con CSS3 + HTML5 + Canvas entonces recién recurre a jQuery.

Saludos.

[#!drvy]

Muy buen tip... la única pega es el soporte por parte de navegadores xD

Saludos

[EFEX]

Gracias por los ejemplos, muy util!


Ver que propiedades de css3 reconoce el explorador.
http://css3test.com

[WHK]

Gracias por los ejemplos, muy util!


Ver que propiedades de css3 reconoce el explorador.
http://css3test.com

Muy buena la información

• En firefox con la versión 21 sacaba un 56% pero al actualizarla a la 22 sacó un 63% !!
• Google Chrome 28 sacó un 65%
• Internet Explorer 9 con todos los parches de actualizaciones al día sacó un 54%, la mayor cantidad de fallas estubo en los selectores justamente el area mas crítica de un desarrollo en CSS3.