ce qui est plus rapide? Transitions CSS3 ou animations jQuery?

les animations CSS seront presque toujours plus rapides.

Un tête à tête de la comparaison de les transitions CSS et de jQuery animate. Plutôt que de configurer un minuteur pour exécuter à répétition, les transitions sont gérées nativement par le navigateur. Dans mes tests peu scientifiques, les transitions sont toujours plus rapides, avec un taux de trame plus élevé, surtout avec un nombre élevé d'éléments. Ils ont aussi l'avantage que les couleurs peuvent être animées facilement, plutôt que avoir à compter sur greffon.

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

Question Connexe: Performance de les Transitions CSS vs JS animation des paquets

CSS3 Transitions devrait être plus rapide parce qu'ils sont natifs du navigateur.

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

afficher le lien ci-dessus pour connaître les expériences tenues sur CSS3 vs jQuery

Cet article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) fait un excellent comparaison de CSS transforme vs animations jQuery vs GSAP (une autre librairie JavaScript).

Les animations CSS

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

Donc Les transformations CSS sont plus rapides que les animations jQuery , mais ne laissez pas cela vous faire supposer que les transformations CSS sont plus rapides que JavaScript . GSAP montre que JavaScript peut surpasser CSS .

CSS3 sera plus rapide comme il vient standard avec le navigateur où comme JQuery est un autre fichier qui doit être chargé, cependant j'ai trouvé que selon l'animation que JQuery peut exécuter beaucoup plus lisse. Parfois, il est aussi agréable d'expérience avec Javascript maintenant et encore.

la documentation du développeur Mozilla soulève quelques points intéressants concernant l'animation CSS3 :

laisser le navigateur contrôler la séquence d'animation permet au navigateur optimiser les performances et l'efficacité, par exemple en réduisant les mettre à jour la fréquence des animations exécutées dans des onglets qui ne le sont pas actuellement visible.

WebKit (qui powered Safari) fait également usage de composition accélérée du matériel , qui peut avoir un effet beaucoup plus grand sur les performances que tout ce que Javascript peut faire à ce moment. (Je pense que cela va changer très bientôt, Bien que plus de fonctions sont ajoutées pour gérer les calculs) c'est parce qu'il va profiter du matériel dédié si elle est disponible pour effectuer les calculs, plutôt que de le faire se produire à travers un langage traduit comme Javascript.

Je ne suis pas sûr à 100% Si WebKit sur l'iPad est accéléré par le matériel; cependant, il serait logique de penser que, parce qu'il est normalisé et de plus en plus populaire, que cela ne pourrait s'améliorer avec le temps.

à Partir de ici

Un tête à tête de la comparaison de les transitions CSS et de jQuery animate. Plutôt que de configurer un timer pour exécuter à répétition, les transitions sont gérées nativement. par le navigateur. Dans mon test peu scientifique, les transitions sont toujours plus rapides, cadence élevée, surtout avec un nombre élevé d'éléments. Ils ont également le avantage que les couleurs peuvent être animées facilement, plutôt que d'avoir à compter sur greffon.

un test ici ainsi que cette conclusion.

les animations Javascript basées sur des minuteries ne peuvent jamais être aussi rapides que natives animation, comme ils n'ont pas accès à suffisamment de navigateur à faire les mêmes optimisations. Ces animations ne doivent être utilisées que dans les navigateurs traditionnels.

avis Aussi ce ,

les animations CSS3 sont terrifiantes mais utilisent beaucoup de votre processeur puissance. Il n'y a aucun moyen de peaufiner l'animation avec CSS3 de la même façon que vous pouvez utiliser un framework comme jQuery. Donc, tant que les animations CSS3 ne sont pas compatibles avec CPU, vous mieux coller avec jQuery.

si vous utilisez l'animation jQuery/javascript avec la balise canvas (qui, si Je ne me trompe, repose toujours sur une minuterie... nouveau à jouer avec tout de même), alors elle vous donne l'avantage de l'accélération matérielle avec javascript. Si vous cherchez juste à déplacer quelque chose quand vous volez, alors les transitions fonctionnent bien. Les transitions CSS peuvent fonctionner un peu plus facilement, mais c'est un compromis, vous renoncez à une tonne de contrôle javascript sur l'animation en utilisant des transitions. Je comme garder le style dans CSS et le comportement dans JS - n'est-ce pas comme ça que c'est censé fonctionner de toute façon? Les transitions CSS ont en quelque sorte brisé cette logique...

natif est censé être plus rapide, mais si les développeurs de navigateur sont négligés (ou paresseux), ils écrivent du mauvais code, ce qui conduit à de mauvais résultats avec des animations CSS (ou des transitions).

de nos jours, jQuery dispose d'un plugin qui surpasse la fonction "animation" par une fonction "améliorée". voir vitesse . Je ne cherche pas d'autres moyens d'animer le DOM avec javascript parce que c'est en dehors de la portée de cette question.

Donc, comme-est, jQuery est plus lent que CSS. en outre, CSS est plus facile à écrire parce que vous avez déjà le style de l'élément probablement, de sorte que l'ajout de quelques règles est facile, par rapport à une situation où vous devez commencer à écrire JS quelque part et de le gérer..mais pour les trucs complexes et lourds, JS est plus rapide, Malheureusement.

un très bon article sur cette question - http://davidwalsh.name/css-js-animation