quoi de plus rapide? Transitions CSS3 ou animations jQuery?
Je travaille sur une application iPad HTML5 et j'ai déjà implémenté le support ontouch pour déclencher des événements plus rapidement. J'utilise jQuery pour cibler plus facilement les éléments, mais pour les animations, j'utilise des transitions CSS3.
Que pensez-vous est plus rapide? utiliser des animations jQuery depuis que j'ai déjà importé la bibliothèque ou utiliser des transitions CSS3 pour cibler des éléments avec jQuery?
Selon ce lien , l'animation jQuery est beaucoup plus lente que l'animation css.
Reason peut être parce que jquery doit modifier les propriétés de l'élément DOM à l'aide de timers et d'une boucle. Le CSS fait partie du moteur de navigateur. qui dépend à peu près du matériel du système. Vous pouvez également vérifier cela dans le profilage de Chrome ou de Firefox.
Les animations CSS seront presque toujours plus rapides.
Une comparaison tête à tête des transitions CSS et de l'animation de jQuery . Plutôt que de configurer une minuterie pour qu'elle se répète, les transitions sont gérées nativement par le navigateur. Dans mes tests peu scientifiques, les transitions sont toujours plus rapides, avec une fréquence d'images plus élevée, en particulier avec un grand nombre d'éléments. Ils ont aussi l'avantage que les couleurs peuvent être animées facilement, plutôt que de devoir compter sur plugins.
http://css.dzone.com/articles/css3-transitions-vs-jquery
Question connexe: Performances des transitions CSS par rapport aux packages d’animation JS
Cet article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) fait une excellente comparaison des transformations CSS avec les animations jQuery et GSAP (une autre bibliothèque JavaScript).
Les animations CSS sont nettement plus rapides que jQuery. Cependant, sur la plupart des appareils et navigateurs que j'ai testés, le GSAP basé sur JavaScript était encore meilleur que les animations CSS.
Ainsi, les transformations CSS sont plus rapides que les animations jQuery, mais ne vous laissez pas convaincre par le fait que les transformations CSS sont plus rapides que JavaScript. Le GSAP montre que JavaScript peut dépasser les performances de CSS.
Les transitions CSS3 devraient être plus rapides car elles sont natives du navigateur.
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 que le navigateur ne peut pas prédire 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 vs jQuery
CSS3 sera plus rapide car il est livré en standard avec le navigateur, car JQuery est un autre fichier qui doit être chargé. Cependant, j'ai constaté qu'en fonction de l'animation, JQuery peut être beaucoup plus fluide. Parfois, il est également agréable d’expérimenter avec du Javascript pur de temps en temps.
Laisser le navigateur contrôler la séquence d'animation permet au navigateur optimiser les performances et l'efficacité en réduisant, par exemple, le fréquence de mise à jour des animations s'exécutant dans des onglets qui ne sont pas actuellement visible.
_ { WebKit (qui optimise Safari) utilise également la composition accélérée par le matériel }, qui peut avoir un effet beaucoup plus important sur les performances que tout ce que Javascript peut faire pour le moment. (Je pense que cela changera très bientôt bien que plus de fonctions soient ajoutées pour gérer les calculs) C'est parce qu'il utilisera un matériel dédié s'il est disponible pour effectuer les calculs, plutôt que de le faire passer par un langage traduit comme Javascript.
Je ne suis pas sûr à 100% de savoir si WebKit sur l'iPad est accéléré matériellement; Cependant, il est raisonnable de penser que, grâce à sa standardisation et à sa popularité croissante, cela ne fera que s'améliorer avec le temps.
De ici
Une comparaison tête à tête des transitions CSS et de l'animation de jQuery . Plutôt que de configurer une minuterie pour qu'elle se répète, les transitions sont gérées de manière native par le navigateur. Dans mes tests peu scientifiques, les transitions sont toujours plus rapides, avec un cadence élevée, en particulier avec un nombre élevé d’éléments. Ils ont aussi le avantage que les couleurs peuvent être animées facilement, plutôt que de devoir compter sur plugins.
Un test ici avec cette conclusion.
Les animations Javascript basées sur des minuteries ne peuvent jamais être aussi rapides que la version native animations, car ils n'ont pas accès à assez de navigateur pour faire les mêmes optimisations . Ces animations doivent être utilisées comme solution de secours uniquement dans les navigateurs hérités.
Notez également this ,
Les animations CSS3 sont excellentes mais utilisent beaucoup de votre processeur Puissance. Il n’existe aucun moyen d’affiner l’animation avec CSS3 de la même manière que vous pouvez utiliser un fichier cadre comme jQuery. Donc, tant que les animations CSS3 ne vous facilitent pas l’utilisation du processeur mieux coller avec jQuery.
Native est censé être plus rapide, mais si les développeurs de navigateur sont négligents (ou paresseux), ils écrivent un code incorrect, ce qui entraîne de mauvais résultats avec les animations CSS (ou les transitions).
De nos jours, jQuery a un plugin qui remplace la fonction "animation" par un "amélioré". voir Velocity . Je ne me lance pas dans d'autres méthodes pour animer le DOM avec javascript, car cela n'entre pas dans le cadre de cette question.
Ainsi, en l'état, jQuery est plus lent que CSS. De plus, CSS est plus facile à écrire car vous avez probablement déjà le style d'élément. Il est donc facile d'ajouter quelques règles, alors qu'il est nécessaire de commencer à écrire JS quelque part et de le gérer. plus vite, malheureusement.
Un très bon article sur cette question précise - http://davidwalsh.name/css-js-animation
Si vous utilisez une animation jQuery/javascript avec la balise canvas (qui, si je ne me trompe pas, repose toujours sur un minuteur ... nouveau pour jouer avec elle), cela vous donne l'avantage de l'accélération matérielle avec javascript. Si vous cherchez simplement à déplacer quelque chose lorsque vous survolez, les transitions fonctionnent très bien. Les transitions CSS peuvent être un peu plus fluides, mais c’est un compromis, vous abandonnez une tonne de contrôle javascript sur l’animation en utilisant des transitions. J'aime garder le style dans CSS et le comportement dans JS - n'est-ce pas ainsi que cela est censé fonctionner? Les transitions CSS ont en quelque sorte brisé cette logique ...