javascript - poner - Rendimiento de las transiciones CSS vs. paquetes de animación JS
como poner animacion en css (4)
Me pregunto si existe alguna diferencia en el rendimiento del uso de CSS Transitions frente a cualquiera de las diversas bibliotecas de animación de JavaScript. ( script.aculo.us , scripty2 , jsAnim , MooTools , $fx , etc.).
Probé varias pruebas en Safari y Chrome, pero en realidad no veo ninguna diferencia. Pensé que se suponía que las Transiciones CSS serían aceleradas por hardware.
Actualización :
He intentado usar Scriptaculous '' Effect.Fade en 5 diferentes DIV (cada uno contiene un lienzo con algunas líneas). Al hacer exactamente lo mismo con las transiciones CSS, no veo absolutamente ninguna diferencia en el rendimiento. Ambos fueron muy suaves con un DIV / Canvas, pero ambos son muy lentos cuando hago más de 2 a la vez.
Lo intenté en Safari 4, 5 (OSX) , Google Chrome 5 y FireFox 3.7pre . Los mismos resultados en todos los ámbitos.
En respuesta a la respuesta de UpHelix, no estás limitado a hover , etc. Puedes activar una transición cambiando cualquier estilo que se pueda transitionable . Por ejemplo, configure la opacidad de un elemento en JavaScript (después de que haya especificado transitionPropery y transitionDuration para ese elemento).
Las animaciones CSS tienen la ventaja de ser procesadas por el navegador. Computaciones y optimizaciones rápidas están disponibles. En mi opinión, el rendimiento de las animaciones web debe considerarse a través de un punto de vista "holístico". Después de todo, una animación, en términos de FPS, no puede ser más rápida que la actualización del navegador.
El nivel de rendimiento real viene dado por el rendimiento general de UI. Una animación JS y CSS puede parecer similar. Sin embargo, las animaciones CSS ganan ya que no bloquean el hilo de la interfaz de usuario.
Stoyan Stefanov escribió y demostró cómo las animaciones CSS se ponen fuera del hilo de UI: http://www.phpied.com/css-animations-off-the-ui-thread/
Notará la diferencia en los navegadores móviles (iPhone, Android, etc.).
Para agregar a la respuesta de Uphelix (correcta): JavaScript es un lenguaje interpretado y el motor JS del navegador tiene que analizar y ejecutar cada instrucción durante el tiempo de ejecución (sé que existen compiladores JS, como V8 (utilizado en Chrome), pero el principio sigue siendo el mismo).
Por otro lado, los navegadores pueden implementar transiciones de CSS de forma nativa, por ejemplo, en C / C ++ o algo así. Este código se compilará en el lenguaje de máquina.
Si las transiciones CSS son aceleradas por hardware o no, depende de las técnicas que usa el navegador, la plataforma en la que se ejecuta el navegador, etc.
Sí, hay una diferencia, CSS es mucho más rápido. Puede ser difícil verlo hasta que muchos se ejecuten al mismo tiempo o más. Las animaciones CSS son limitadas. En la mayoría de los casos, solo funcionan en el evento :hover . Con JavaScript puede realizar animaciones en cualquier evento: click , mouseover , mousemove , mouseout , keyup , keydown , etc.
En mi opinión, jQuery es de lejos el mejor para las animaciones de JavaScript. Ver demostraciones de jQuery