Estoy trabajando en una aplicación para iPad HTML5 y ya he implementado soporte ontouch para activar eventos más rápido y estoy usando jQuery para apuntar a los elementos más fácil, pero para las animaciones que estoy usando transiciones CSS3¿qué es más rápido? ¿Transiciones CSS3 o animaciones jQuery?
Lo ¿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?
Según this link, la animación jQuery es mucho más lenta que la animación css.
La razón puede deberse a que jquery tiene que modificar los puntales del elemento DOM mediante temporizadores y un bucle. 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.
Otra comparación que confirma que jQuery es más lento que CSS - http://css-tricks.com/myth-busting- css-animations-vs-javascript/- pero también muestra que CSS puede ser más lento que otras soluciones de JavaScript. Entonces quizás haya esperanza de que jQuery mejore. – Luke
Las animaciones CSS casi siempre serán más rápidas.
Comparación comparativa de transiciones CSS y jQuery's animate. En lugar de configurar un temporizador para que se ejecute repetidamente, las transiciones se manejan de forma nativa por el navegador . En mis pruebas poco científicas, las transiciones son siempre más rápidas, se ejecutan con una velocidad de cuadro mayor, especialmente con un gran número de elementos. También tienen la ventaja de 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: Performance of CSS Transitions vs. JS animation packages
CSS3 transiciones debería ser más rápido, ya que son nativas del navegador.
El Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Dejar que el control del explorador de la secuencia de animación permite optimizar el rendimiento del navegador y eficiencia mediante, por ejemplo, la reducción de la frecuencia de actualización de animaciones que se ejecutan en las pestañas que no son visibles actualmente .
WebKit (which powered Safari) also makes use of hardware accelerated compositing, que pueden 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 es hardware acelerado; sin embargo, sería lógico pensar que, debido a que está estandarizado y aumenta su popularidad, esto solo mejoraría con el tiempo.
De here
Una comparación directa de las transiciones CSS y animado de jQuery. En lugar de configurar un temporizador para que se ejecute repetidamente, las transiciones se manejan de forma nativa mediante el navegador. En mi prueba poco científica, las transiciones siempre son más rápidas, se ejecuta con una velocidad de fotogramas más alta, especialmente con un gran número de elementos. También tienen la ventaja de 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.
animaciones de JavaScript basado en temporizadores nunca puede ser tan rápido como animaciones nativas, ya que no tienen acceso a suficiente del navegador para realizar las mismas optimizaciones. Estas animaciones se deben usar como una alternativa solo en los navegadores heredados.
Observe también this,
animaciones CSS3 son fenomenal, pero hacen uso de una gran cantidad de potencia de su 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, es mejor que se quede con jQuery.
La tercera cita de richardet-design es una evidencia anecdótica de 2011. Su conclusión fue extraída de una experiencia única. –
CSS3 será más rápido, ya que viene de serie con el navegador donde JQuery es otro archivo que debe cargarse, sin embargo, he encontrado que dependiendo de la animación que JQuery puede ejecutar mucho más suave. A veces también es bueno experimentar con Javascript puro de vez en cuando.
estoy totalmente de acuerdo. Especialmente con las transformaciones de posición, jquery puede funcionar mucho más suavemente en algunas ocasiones. – Mike
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 eso), entonces le da la ventaja de hardware aceleración 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 ...
aún puede usar la lógica en el js y el estilo en el CSS, las transiciones son simplemente una herramienta para poder lograr un mejor resultado. Asegúrate de que tu elemento tenga una propiedad de transición css, luego establece el valor css usando javascipt, obtén el control y la aceleración de hardware. – Jai
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. http://dev.opera.com/articles/view/css3-vs-jquery-animations/
Ver el enlace de arriba para saber acerca de los experimentos celebradas en CSS3 jQuery vs
Esto puede haber sido cierto históricamente, pero los motores modernos de JavaScript (por ejemplo, el V8 de Google) compilan JS para el código nativo. Es cierto que las animaciones CSS son más eficientes, pero no necesariamente por el motivo que usted dio. –
V8 JIT lo compila en código nativo, pero eso no significa que sea tan rápido como un lenguaje estáticamente tipificado como C++ compilado antes de tiempo. La diferencia de velocidad es un resultado de la naturaleza dinámica del lenguaje. – niagr
This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) hace un excelente comparación de las transformaciones CSS vs animaciones jQuery 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 realiza incluso mejor que las animaciones CSS
Así transformaciones CSS son más rápidas que las animaciones de jQuery, pero no deje que esto le hace suponer que las transformaciones CSS son más rápidos que JavaScript.GSAP muestra que JavaScript puede superar a CSS.
Se supone que los nativos son más rápidos, pero si los desarrolladores de navegadores son descuidados (o flojos), escriben código incorrecto, lo que conduce a resultados pobres con animaciones CSS (o transiciones).
Actualmente, jQuery tiene un complemento que sobrepasa la función de "animación" con una "mejorada". ver Velocity. No estoy entrando en otras formas de animar el DOM con javascript porque está fuera del alcance de esta pregunta.
Por lo tanto, 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 artículo muy bueno acerca de esta cuestión exacta - http://davidwalsh.name/css-js-animation
Depende del navegador. – jrummell
Solo recuerda, el nativo siempre es más rápido. Bueno, por lo general. Las transiciones CSS3 se consideran nativas del navegador. –
http://dev.opera.com/articles/view/css3-vs-jquery-animations/ –