1. Accueil
  2. Écoconception Web
  3. 48 - Eviter les animations Javascript / CSS …

N°48 - Eviter les animations Javascript / CSS coûteuses

Objectif
Solution technique
Les animations Javascript / CSS peuvent être très coûteuses en terme de cycles CPU et de consommation mémoire. Elles déclenchent toutes une action de type (re)paint / (re)flow qui est très coûteuse en ressources. La première bonne pratique consiste donc à éviter au maximum les animations et à ne les utiliser que lorsqu’elles sont indispensables. Lorsque une animation est indispensable, limitez-vous aux propriétés CSS3 opacity et transform, et aux fonctions associées translate, rotate, scale de transform. Ces deux propriétés sont nativement optimisées par le navigateur et tout ou partie de l’animation peut être prise en charge par le processeur graphique (GPU). Le site csstriggers.com liste les actions sur le DOM déclenchées par une animation. Pour que le navigateur puisse réduire au maximum les ressources consommées par l’animation, vous pouvez le prévenir qu’une animation va avoir lieu grâce à will-change.
Moyen de controle
Crée le
23 novembre 2015

Testez et faites reconnaître vos compétences

Logo Opquast Certfied

Opquast Certified est un test sur 1000 points permettant de vérifier le degré de maîtrise des meilleures pratiques du Web

Découvrir

Retrouvez cette fiche dans « Qualité Web »

Livre Qualité Web

En savoir +

Version numérique offerte pour l’achat de la version papier