Performances des packages d'animation CSS par rapport à JS

Question

Je me demandais quelle est la différence dans la performance de l'aide les Transitions CSS vs les différentes animations JavaScript bibliothèques? (script.aculo.us, scripty2, jsAnim, MooTools, $fx, etc).

J'ai essayé différents tests dans Safari et Chrome , mais je n'ai pas vraiment voir la différence. Je pensais que les Transitions CSS étaient censés être accéléré par le matériel.

---

Mise à jour:

J'ai essayé d'utiliser Scriptaculous' Effect.Fade sur 5 DIVs (contenant chacun une toile avec quelques lignes). Faire exactement la même chose en utilisant les transitions CSS, je ne vois absolument aucune différence dans les performances. Les deux étaient très lisse avec un DIV/Toile, mais les deux sont très lent quand je n'ai plus que 2 à la fois.

J'ai essayé ceci dans Safari 4, 5 (OSX), Google Chrome 5 et FireFox 3.7 pré. Même les résultats sur la carte.

En réponse à UpHelix de réponse, vous n'êtes pas simplement limitée à l' hover, etc. Vous pouvez déclencher une transition en modifiant transitionable style. Par exemple, définir l'opacité d'un élément en JavaScript (après, vous avez spécifié l' transitionPropery et transitionDuration pour l'élément).

Answer 1

Oui il y a une différence, CSS est beaucoup plus rapide. Il peut être difficile de voir jusqu'à ce que vous obtenez de nombreux cours d'exécution dans le même temps ou plus, ils le font. Les animations CSS sont limitées. Dans la plupart des cas ils vraiment que de travail hors de l' :hover événement. Avec JavaScript, vous pouvez effectuer des animations en tout cas: click, mouseover, mousemove, mouseout, keyup, keydown, etc.

À mon avis, jQuery est de loin le meilleur pour les animations en JavaScript. Voir jQuery Démos

Answer 2

Pour ajouter à Uphelix (correct) réponse: JavaScript est un langage interprété et la JS moteur du navigateur pour analyser et exécuter toutes les instructions lors de l'exécution en temps (je sais qu'il existe JS compilateurs, comme V8 (utilisé dans google Chrome), mais le principe reste le même).

D'autre part, les navigateurs peuvent mettre en œuvre les transitions CSS en mode natif, par exemple, en C/C++ ou quelque chose. Ce code sera compilé en langage machine.

Si les transitions CSS sont l'accélération matérielle ou non, dépend de la techniques le navigateur utilise la plate-forme le navigateur s'exécute sur, etc.

Answer 3

Vous remarquerez la différence sur les navigateurs mobiles (iPhone, Android, etc.).

Answer 4

Les animations CSS ont l'avantage de passer par le navigateur. Rapide des calculs et des optimisations sont disponibles. À mon avis, animations web, la performance devrait être examiné par le biais d'une "holistique" de point de vue. Après tout, une animation, en termes de FPS, ne peut pas être plus rapide, puis rafraîchir le navigateur.

Le réel niveau de performance est donnée par l'ensemble de l'INTERFACE utilisateur de la performance. Un JS et CSS animation peuvent se ressembler. Cependant les animations CSS gagner, car ils ne pas bloquer le thread d'INTERFACE utilisateur.

Stoyan Stefanov a écrit et faire la démonstration de la façon dont les animations CSS sont mis hors du thread de l'INTERFACE utilisateur: http://www.phpied.com/css-animations-off-the-ui-thread/