Imprimir Página - Tips de velocidad y rendimiento (CSS3 v/s jQuery)

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:

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

Utilizando CSS3:

Código:

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

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

Código:

$(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.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: WHK en 25 Junio 2013, 22:20 pm