Qu'est-ce qui est le plus rapide ? Les transitions CSS3 ou les animations jQuery ?

Question

Je travaille sur une application HTML5 pour iPad et j'ai déjà implémenté le support ontouch pour déclencher les événements plus rapidement. J'utilise jQuery pour cibler les éléments plus facilement, mais pour les animations, j'utilise des transitions CSS3.

Qu'est-ce qui est le plus rapide selon vous ? Utiliser les animations jQuery puisque j'ai déjà importé la bibliothèque ou utiliser les transitions CSS3 en ciblant les éléments avec jQuery ?

Answer 1

Selon ce lien L'animation jQuery est beaucoup plus lente que l'animation css.

Raison peut être dû au fait que jquery doit modifier les props de l'élément DOM en utilisant des timers et une boucle. Le CSS fait partie du moteur du navigateur, qui dépend en grande partie du matériel du système. Vous pouvez également vérifier cela dans le profilage de Chrome ou Firefox.

Answer 2

Les animations CSS seront presque toujours plus rapides.

Une comparaison directe des transitions CSS et de l'animate de jQuery. Plutôt que de programmer une minuterie pour qu'elle s'exécute de façon répétée, les transitions sont gérées nativement par le navigateur. nativement par le navigateur. Dans mes tests non scientifiques, les transitions sont toujours plus rapides, avec une fréquence d'images plus élevée, surtout avec un grand nombre d'éléments. Elles présentent également l'avantage que les couleurs peuvent être animées facilement, plutôt que de devoir compter sur des plugins.

http://css.dzone.com/articles/css3-transitions-vs-jquery

Question connexe : Performances des transitions CSS par rapport aux paquets d'animation JS

Answer 3

Transitions CSS3 devrait être plus rapides parce qu'elles sont natives du navigateur.

Answer 4

Son css3 est plus rapide, consomme moins de mémoire et est plus fluide. Le processeur CSS est écrit en C++ et le code natif s'exécute très rapidement alors que jQuery (JavaScript) est un langage interprété et le navigateur ne peut pas prévoir JavaScript à l'avance. http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Consultez le lien ci-dessus pour en savoir plus sur les expériences menées sur CSS3 et jQuery.

Answer 5

Cet article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) fait une excellente comparaison entre les transformations CSS, les animations jQuery et GSAP (une autre bibliothèque JavaScript).

Les animations CSS sont nettement plus rapides que celles de jQuery. Cependant, sur la plupart des appareils et des navigateurs que j'ai testés, le GSAP, basé sur JavaScript, est encore plus rapide que les animations CSS.

Alors Les transformations CSS sont plus rapides que les animations jQuery mais n'en déduisez pas que les transformations CSS sont plus rapides que les transformateurs de l'UE. JavaScript . GSAP montre que JavaScript peut surpasser CSS .