Rendimiento de las transiciones CSS frente a los paquetes de animación JS

Me pregunto si existe alguna diferencia en el rendimiento del uso de CSS Transitions frente a cualquiera de las diversas bibliotecas de animación JavaScript. (script.aculo.us, scripty2, jsAnim, MooTools, $fx, etc.).Rendimiento de las transiciones CSS frente a los paquetes de animación JS

He intentado varias pruebas en Safari y Chrome pero que 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 Effect.Fade en 5 DIV diferentes Scriptaculous' (cada uno contiene un lienzo con unas 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.

He intentado esto 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á simplemente limitado a hover, etc. Puede activar una transición cambiando cualquier estilo transitionable. Por ejemplo, configure la opacidad de un elemento en JavaScript (después de haber especificado transitionPropery y transitionDuration para ese elemento).

Fuente

2010-06-08 desau

Una cosa a tener en cuenta (3 años en el futuro) - tal vez su equipo es lo suficientemente potente como para ejecutar tanto esfuerzo. Como dijiste, "ambos fueron muy suaves". Tal vez intente algunas pruebas más en el límite, o haga pruebas en una computadora más lenta. – andrewb

pero hay otro lado: compatibilidad con varios navegadores. Tengo un sitio antiguo que no funciona en FF pero lo hago en todos los demás navegadores. Creo que es un problema serio – aleXela

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 se puede realizar animaciones en cualquier caso: click, mouseover, mousemove, mouseout, keyup, keydown, etc.

En mi opinión jQuery es, con mucho, la mejor para las animaciones de JavaScript. Ver jQuery Demos

Fuente

2010-06-08 17:38:12 UpHelix

+36

Puede usar un controlador de eventos JS para desencadenar una animación CSS (por ejemplo, agregando un nombre de clase a un elemento o estableciendo directamente la propiedad de estilo relevante) obteniendo así lo mejor de ambos mundos. – NickFitz

Sí, pero ¿usar js mata las ganancias de rendimiento que obtienes al usar CSS? – Swordfish0321

@ Swordfish0321 No, no es así. Simplemente usa JS para activar la animación CSS. La animación en sí misma se hace con CSS Transition. – HerrSerker

Agregar a la respuesta (correcta) de Uphelix: 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 (usado en Chrome), pero el principio sigue siendo el mismo).

Por otro lado, los navegadores pueden implementar transiciones de CSS de forma nativa, p. en C/C++ o algo así. Este código se compilará en el lenguaje de máquina.

Si transiciones CSS son aceleradas de hardware o no, depende de las técnicas que utiliza el navegador, la plataforma del navegador se ejecuta en, etc.

Fuente

2010-06-08 17:46:50

Esto suena bastante plausible, pero la respuesta exactamente opuesta (que la sobrecarga de ejecutar un pequeño código JS sesenta veces por segundo es insignificante) también es plausible. La única forma de resolverlo es encontrar hardware comparable a lo que tienen los usuarios y ejecutar el experimento. De acuerdo con la pregunta, el experimento de desau encontró lo opuesto a esta respuesta: las dos alternativas tuvieron el mismo efecto en la práctica. –

Usted notará la diferencia en los navegadores móviles (iPhone, Android, etc.) .

Fuente

2011-04-01 11:33:20 Mourner

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 la IU.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 demostración de cómo las animaciones CSS son expulsados de la interfaz de usuario de hilo: http://www.phpied.com/css-animations-off-the-ui-thread/

Fuente

2013-05-04 12:05:31 Mircea

Rendimiento de las transiciones CSS frente a los paquetes de animación JS

Respuesta

Cuestiones relacionadas