texto - ¿qué es más rápido? ¿Transiciones CSS3 o animaciones jQuery?
efectos para iconos css (10)
Estoy trabajando en una aplicación iPad HTML5 y ya he implementado soporte ontouch para desencadenar eventos más rápido y estoy usando jQuery para dirigir los elementos más fácilmente, pero para las animaciones estoy usando transiciones CSS3
¿Qué crees que es más rápido? usando animaciones jQuery ya que ya importé la biblioteca o usé transiciones CSS3 cuando selecciono elementos con jQuery?
CSS3 será más rápido, ya que viene de serie con el navegador, ya que JQuery es otro archivo que debe cargarse; sin embargo, he encontrado que, dependiendo de la animación, JQuery puede ejecutarse de forma mucho más fluida. A veces también es bueno experimentar con Javascript puro de vez en cuando.
De here
Una comparación cara a cara de las transiciones CSS y jQuery''s animate. En lugar de configurar un temporizador para que se ejecute repetidamente, el navegador maneja las transiciones de forma nativa. En mis pruebas poco científicas, las transiciones son siempre más rápidas, ejecutando con una tasa de fotogramas más alta, especialmente con un gran número de elementos. También tienen la ventaja de que los colores se pueden animar fácilmente, en lugar de tener que depender de los complementos.
Una prueba here junto con esta conclusión.
Las animaciones de Javascript basadas en temporizadores nunca pueden ser tan rápidas como las animaciones nativas, ya que no tienen acceso al navegador suficiente para realizar las mismas optimizaciones. Estas animaciones se deben usar como una alternativa solo en los navegadores heredados.
También note this ,
Las animaciones CSS3 son geniales pero usan gran parte de la potencia de tu procesador. No hay forma de ajustar la animación con CSS3 de la misma manera que con un marco como jQuery. Por lo tanto, siempre que las animaciones CSS3 no sean compatibles con la CPU, será mejor que se quede con jQuery.
Dejar que el navegador controle la secuencia de animación permite que el navegador optimice el rendimiento y la eficiencia, por ejemplo, reduciendo la frecuencia de actualización de las animaciones que se ejecutan en pestañas que actualmente no están visibles.
WebKit (que impulsó Safari) también utiliza la composición acelerada por hardware , que puede tener un efecto mucho mayor en el rendimiento que cualquier cosa que Javascript pueda hacer en este momento. (Creo que esto cambiará muy pronto a medida que se agreguen más funciones para administrar los cálculos) Esto se debe a que aprovechará el hardware dedicado si está disponible para realizar los cálculos, en lugar de hacerlo a través de un lenguaje traducido como Javascript.
No estoy 100% seguro de si WebKit en el iPad está acelerado por hardware; sin embargo, sería lógico pensar que, debido a que está estandarizado y aumenta su popularidad, esto solo mejoraría con el tiempo.
Las animaciones CSS casi siempre serán más rápidas.
Una comparación cara a cara de las transiciones CSS y jQuery''s animate. En lugar de configurar un temporizador para que se ejecute repetidamente, el navegador maneja las transiciones de forma nativa. En mis pruebas poco científicas, las transiciones son siempre más rápidas, ejecutando con una tasa de fotogramas más alta, especialmente con un gran número de elementos. También tienen la ventaja de que los colores se pueden animar fácilmente, en lugar de tener que depender de los complementos.
http://css.dzone.com/articles/css3-transitions-vs-jquery
Pregunta relacionada: Rendimiento de las transiciones CSS vs. paquetes de animación JS
Las transiciones CSS3 deben ser más rápidas porque son nativas del navegador.
Se supone que los nativos son más rápidos, pero si los desarrolladores de navegadores son descuidados (o perezosos), escriben código incorrecto, lo que conduce a resultados pobres con animaciones CSS (o transiciones).
Hoy en día, jQuery tiene un complemento que sobrepasa la función "animación" con una función "mejorada". ver Velocity . No estoy entrando en otras formas de animar el DOM con javascript porque está fuera del alcance de esta pregunta.
Entonces, tal como está, jQuery es más lento que CSS. además, CSS es más fácil de escribir porque probablemente ya tengas el estilo del elemento, por lo que es fácil agregar algunas reglas, en comparación con una situación en la que necesitas comenzar a escribir JS en algún lugar y administrarlo ... pero para cosas complejas y pesadas, JS es más rápido, tristemente
Un muy buen artículo sobre esta pregunta exacta - http://davidwalsh.name/css-js-animation
Según este enlace , la animación jQuery es mucho más lenta que la animación css.
La razón puede ser porque jquery tiene que modificar los puntales del elemento DOM usando temporizadores y un ciclo. El CSS es parte del motor del navegador. que depende bastante del hardware del sistema. También puedes verificar eso en el perfilado de Chrome o Firefox.
Si está utilizando la animación jQuery / javascript con la etiqueta canvas (que si no me equivoco todavía depende de un temporizador ... nuevo para jugar con él), entonces le da la ventaja de la aceleración de hardware con javascript. Si solo buscas mover algo cuando pasas el mouse, las transiciones funcionan estupendamente. Las transiciones CSS pueden funcionar un poco más suave pero es una compensación, usted está renunciando a una tonelada de control javascript sobre la animación mediante el uso de transiciones. Me gusta mantener el estilo en CSS y el comportamiento en JS. ¿No es así como debería funcionar? Las transiciones CSS tipo de rompieron esa lógica ...
Su css3 es más rápido y consume menos memoria y es más suave. El procesador CSS 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 JavaScript en el tiempo. dev.opera.com/articles/view/css3-vs-jquery-animations
Vea el enlace de arriba para conocer los experimentos realizados sobre CSS3 vs jQuery
css-tricks.com/myth-busting-css-animations-vs-javascript hace una excelente comparación de las transformaciones CSS vs. jQuery animations vs. GSAP (otra biblioteca JavaScript).
Las animaciones CSS son significativamente más rápidas que jQuery. Sin embargo, en la mayoría de los dispositivos y navegadores que probé, el GSAP basado en JavaScript funcionaba incluso mejor que las animaciones CSS.
Así que las transformaciones CSS son más rápidas que las animaciones jQuery , pero no dejes que esto suponga que las transformaciones CSS son más rápidas que JavaScript . GSAP muestra que JavaScript puede superar a CSS .