Graphoeil Multimédia
Menu

jQuery 3.0 Speedtest

Moteur d'animation basé sur requestAnimationFrame

jQuery 3.0 vient de sortir (depuis juin 2016) et me surprends déjà par ses gains de performance au niveau du moteur d'animation. Plutôt qu'un long dialogue je vous invite à découvrir visuellement le résultats de ces tests. Voir le test avec jQuery 2.2.4, Voir le test avec jQuery 3.0

Il s'agit ici de déplacer horizontalement un div sur une durée de 3 secondes, alors que la version jQuery 2.2.4 provoque de nombreuses saccades, la version jQuery 3.0 est parfaitement fluide !

<style> #conteneur{ display:block; position:relative; width:90%; height:300px; background-color:firebrick; } #balle{ display:block; position:absolute; top:50%; transform:translateY(-50px); -webkit-transform:translateY(-50px); left:10px; width:100px; height:100px; background-color:white; border-radius:50%; } </style> <div id="conteneur"> <div id="balle"></div> </div> <script> $(function(){ $('#balle').animate({ left:'90%' },3000); }); </script>

Conclusion

L'animation des sites internet va s'améliorer grandement grâce à ces gains de performance apporté par jQuery 3.0, je ne manquerai par d'écrire d'autres billets sur jQuery que j'utilise beaucoup dans la création des sites internet.

Pour tout ceux qui souhaitent apprendre jQuery je vous recommande l'excellent livre de Jonathan Chaffer et Karl Swedberg : jQuery 4e édition : Simplifiez et enrichissez vos développements JavaScript (voir sur Amazon).