Optimiser CSS: ajuster les performances d'animation avec Devtools

Guide d'optimisation des performances d'animation CSS: Utilisation d'outils de développeur de navigateur pour améliorer la maîtrise de l'animation

Cet article est créé en collaboration avec Siteground. Merci à nos partenaires qui soutiennent SitePoint.

Comme nous le savons tous, les performances d'animation CSS sont généralement très élevées. Cependant, pour les scènes qui contiennent un grand nombre d'éléments ou d'animations complexes, si le code n'est pas optimisé pour les performances, il entraînera un bégaiement de l'animation et affectera l'expérience utilisateur.

Cet article présentera certaines fonctionnalités pratiques de l'outil de développeur de navigateur pour vous aider à vérifier le mécanisme de course derrière les animations CSS. Lorsque l'animation est coincée, vous pouvez mieux comprendre les raisons et les réparer.

points clés

• Utiliser des outils de développeur de navigateur pour optimiser les performances de l'animation CSS, identifier les problèmes qui provoquent un décalage d'animation et mieux comprendre le fonctionnement sous-jacent de l'animation. Ces outils peuvent vérifier les fréquences d'images, examiner, modifier et déboguer le code, et analyser les opérations de mise en page et de dessin qui peuvent affecter les performances.
• Pour obtenir des effets d'animation lisses, la fréquence d'images cible doit atteindre 60 images par seconde (trames par seconde). Pour assurer une animation plus fluide, seules l'opacité, les transformations et les filtres de CSS sont animés. L'animation d'autres propriétés peut exercer une pression sur le navigateur, le forçant à effectuer des tâches coûteuses en très peu de temps, ce qui a entraîné de mauvais résultats.
• Utilisez les techniques d'attribut will-change CSS, ou translateZ(0) et translate3d(0,0,0) pour forcer le navigateur à remettre certaines modifications de propriété dans le GPU (unité de traitement graphique) pour le traitement. Cela profite de l'accélération matérielle et soulage une partie de la pression sur le fil du navigateur principal. Cependant, la surutilisation peut causer des problèmes que vous essayez d'éviter, comme le bégaiement de l'animation.

outils du développeur et analyse des performances CSS

Votre animation doit atteindre 60 images par seconde pour fonctionner en douceur dans le navigateur. Plus la fréquence d'images est faible, plus l'effet d'animation pire. Cela signifie que le navigateur n'a qu'environ 16 millisecondes par trame pour faire son travail. Mais qu'a-t-il fait pendant cette période? Comment savez-vous que si votre navigateur suit le framerate requis?

Je pense qu'il n'y a rien de plus important que l'expérience utilisateur lors de l'évaluation de la qualité de l'animation. Cependant, bien que les outils de développeur de navigateur modernes ne soient pas toujours à 100% fiables, ils deviennent plus intelligents et vous pouvez les utiliser pour revoir, modifier et déboguer votre code.

Le même est vrai lorsque vous devez vérifier la fréquence d'images et les performances d'animation CSS. Voici comment cela fonctionne.

Firefox Performance Tool Exploration

Dans cet article, j'utilise des outils de performance Firefox. Un autre concurrent majeur est les outils de performance Chrome. Vous pouvez choisir votre outil préféré car les deux navigateurs offrent de puissantes fonctionnalités de performance.

Pour ouvrir les outils du développeur dans Firefox, sélectionnez l'une des options suivantes:

• Cliquez avec le bouton droit sur votre page Web et sélectionnez Vérifier les éléments dans le menu contextuel.
• ou utilisez les raccourcis clavier: appuyez sur Ctrl Shift i sur Windows et Linux, et CMD Opt I sur macOS.

Ensuite, cliquez sur l'onglet Performance. Ici, vous trouverez un bouton qui vous permettra de commencer à enregistrer les données de performance de votre site Web:

Appuyez sur ce bouton et attendez quelques secondes ou effectuez une action sur la page. Une fois terminé, cliquez sur le bouton "Arrêter l'enregistrement des performances":

Dans un instant, Firefox vous présentera beaucoup de données bien organisées pour vous aider à comprendre quels problèmes sont dans votre code.

Les résultats de l'enregistrement dans le panneau de performance sont les suivants:

La section "Waterfall" est idéale pour vérifier les problèmes liés aux transitions CSS et aux animations de l'image clé. Les autres parties sont "Call Tree" et "JS Flame Graph", que vous pouvez utiliser pour trouver des goulots d'étranglement dans le code JavaScript.

La vue de débit de cascade a une section récapitulative et une ventilation détaillée en haut. Dans les deux, les données sont codées par couleur:

• La barre jaune indique le fonctionnement JavaScript.
• La barre violette représente le style CSS (style recalculé) et la mise en page (mise en page) qui calcule les éléments HTML. Les opérations de mise en page sont assez coûteuses pour le navigateur, donc si vous animez les propriétés impliquant des dispositions en double (également appelées "reflux" - par exemple margin, padding, top, left,
,
• , etc.), le résultat peut être bégayé. color background-color La barre verte indique que l'élément est dessiné en un ou plusieurs bitmaps (dessiner). L'animation d'attributs tels que box-shadow,
,

et d'autres attributs impliquent des opérations de dessin coûteuses, ce qui peut être la raison d'une animation lente et d'une mauvaise expérience utilisateur.

Vous pouvez également filtrer les types de données à vérifier. Par exemple, je ne suis intéressé que par les données liées au CSS, donc je peux désélectionner tout le reste en cliquant sur l'icône du filtre dans le coin supérieur gauche de l'écran:

La barre verte sous le résumé du débit de la cascade indique les informations sur la fréquence d'images.

L'expression saine devrait sembler assez élevée, mais surtout la cohérence, c'est-à-dire qu'il n'y a pas trop de lacunes profondes.

illustrons cela avec un exemple.

Combat de l'outil pratique @keyframes

Il s'agit d'une animation CSS simple à l'aide du mot-clé . La page de test ressemble à ceci:

Le cadre violet rectangulaire glisse dans et hors de vue dans une boucle infinie.

Je fais cela par animation représentant l'attribut <div> de l'élément <code>margin-left de la boîte rectangle à l'écran. @keyframes Les blocs d'animation sont les suivants:

<code class="language-css">@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}</code>

Les données de performances que je reçois de cette animation sont les suivantes:

La visualisation de la fréquence d'images semble un peu inégale, avec une fréquence d'images moyenne de 44,82fps, ce qui est un peu faible.

également, faites attention à toutes les opérations de mise en page et de dessin qui se produisent pendant le processus d'animation. Ce sont les actions coûteuses qu'un navigateur effectue sur son fil principal, ce qui affecte négativement les performances.

Enfin, si vous accédez à l'outil d'inspecteur, cliquez sur la section d'animation, puis survolez le nom de l'animation, une zone d'information apparaîtra avec toutes les données pertinentes sur l'animation actuelle. Si votre animation est optimisée, un message expliquant le fait s'affiche. Dans ce cas, aucun message:

Maintenant, je vais changer mon code et faire un nouvel enregistrement, car le navigateur utilise ce bloc @keyframes pour animer les propriétés CSS translate3d():

<code class="language-css">@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}</code>

Ceci est l'image enregistrée en performance:

La fréquence d'images est désormais plus élevée (56,83 ips), et le débit de la cascade ne montre pas les opérations de mise en page et de dessin coûteuses.

Aussi, si vous ouvrez l'onglet "Inspecteur" des outils du développeur, accédez au panneau "Animation" et survolez le nom d'animation, vous verrez quelque chose comme ceci:

La boîte d'informations associée au nom d'animation indique que toutes les animations sont optimisées, ce qui est une bonne nouvelle pour les visiteurs de votre site Web.

animer uniquement opacity, transforms et filters

de CSS

Vous avez peut-être déjà entendu cette suggestion, mais juste au cas où cela vaut la peine de en parler à nouveau: si vous voulez que l'animation fonctionne bien, vous n'aurez que l'opacité, les transformations et les filtres pour CSS (filtres) pour définir l'animation Effets. Animer tout le reste peut exercer une pression sur le navigateur, le forçant à effectuer des tâches coûteuses en très peu de temps, ce qui ne produit généralement pas les meilleurs résultats.

Comme les outils de performance du navigateur l'ont prouvé, les opérations de mise en page et de dessin répétées ne sont pas vos amis.

Cependant, chaque navigateur gère les propriétés CSS légèrement différemment. Si vous souhaitez savoir quel navigateur déclenchera des opérations de publication et de dessin pour quelles propriétés (en particulier lors de la mise à jour des valeurs de ces propriétés, qui sont impliquées dans les animations Web), visitez CSS Triggers.

Pour assurer les performances de l'animation, une approche populaire consiste à forcer le navigateur à transmettre certaines modifications de propriété au GPU (Graphics Processing Unit), qui soulage une partie de la pression sur le fil principal du navigateur et tire parti de l'accélération matérielle. Vous pouvez utiliser l'attribut will-change CSS, ou les techniques translateZ(0) et translate3d(0,0,0) pour y parvenir. Tous ces conseils fonctionnent, mais si vous surutilisez, vous pouvez réellement obtenir le résultat que vous essayez d'éviter, c'est-à-dire le bégaiement de l'animation.

Je n'ai pas l'intention de me lancer dans les détails de l'accélération matérielle pour les performances d'animation Web, mais si vous souhaitez creuser plus profondément, consultez les ressources énumérées ci-dessous.

Ressources

• Animations haute performance de Paul Lewis et Paul Irish
• CSS Animations et transitions Performance: Regarder à l'intérieur du navigateur par Max Vujovic
• Animations et performances de Paul Lewis et Sam Thorogood
• Rester aux propriétés du compositeur uniquement et gérer le nombre de couches par Paul Lewis
• Tricks for GPU Composit CSS par Sara Soueidan
• Une introduction à la propriété CSS Will change de Nick Salloum
• Animer les propriétés CSS par MDN

FAQs sur les performances de l'animation CSS (FAQ)

Quels sont les facteurs clés affectant les performances des animations CSS?

Les performances des animations CSS sont affectées par une variété de facteurs. La complexité de l'animation, le nombre d'éléments étant animés et les attributs animés fonctionneront tous. L'animation de propriétés telles que transform et opacity tend à mieux fonctionner car elles ne déclenchent pas les opérations de publication ou de dessin. Cependant, l'animation de propriétés telles que width, height ou margin peut provoquer des décalages et redessiner de mise en page, ce qui ralentit l'animation. De plus, le matériel de l'appareil et le moteur de rendu du navigateur affecteront également les performances de l'animation CSS.

Comment mesurer les performances de l'animation CSS?

Vous pouvez utiliser des outils de développeur de navigateur pour mesurer les performances des animations CSS. Par exemple, dans Chrome, vous pouvez utiliser l'onglet Performance pour enregistrer et analyser l'exécution de votre animation. Cet outil fournit une ventilation détaillée de la consommation de temps dans le cycle de vie de l'animation pour vous aider à identifier les goulots d'étranglement des performances.

Quelle est la fréquence d'images idéale pour les animations CSS lisses?

La fréquence d'images idéale pour l'animation lisse est de 60 images par seconde (FPS). En effet, la plupart des appareils actualisent l'écran 60 fois par seconde. Ainsi, pour créer des animations lisses, vous devez cibler les mises à jour de l'animation toutes les 16,67 millisecondes (1 seconde / 60), ce qui correspond à 60fps.

Comment optimiser l'animation CSS pour de meilleures performances?

Il existe différentes stratégies pour optimiser les animations CSS pour de meilleures performances. Une approche commune consiste aux propriétés d'animation qui ne déclenchent pas de postes ou ne dessinent pas d'opérations, telles que transform et opacity. De plus, la réduction du nombre d'éléments animées et la simplification des animations peut également améliorer les performances. L'utilisation de l'attribut will-change peut également aider le navigateur à optimiser l'animation en invitant les propriétés qui peuvent être animées.

Quelle est la différence entre l'animation CSS et l'animation JavaScript en termes de performances?

Les animations CSS fonctionnent généralement mieux que les animations JavaScript. En effet, l'animation CSS s'exécute sur le moteur de rendu du navigateur, séparé du fil JavaScript principal. Cela signifie que même si les fils JavaScript sont occupés, les animations CSS peuvent toujours fonctionner en douceur. Cependant, les animations JavaScript offrent plus de contrôle et de flexibilité, ce qui peut être bénéfique pour les animations complexes.

Comment l'accélération matérielle affecte-t-elle les performances de l'animation CSS?

L'accélération matérielle peut améliorer considérablement les performances des animations CSS. Lorsque l'accélération matérielle est activée, le navigateur décharge certaines tâches de rendu au GPU de l'appareil, libérant le CPU pour gérer d'autres tâches. Cela peut conduire à des animations plus lisses, en particulier dans des animations ou des animations complexes impliquant un grand nombre d'éléments.

requestAnimationFrame Quel rôle la fonction joue-t-elle dans les performances d'animation?

La fonction

requestAnimationFrame est une méthode JavaScript qui permet des animations plus efficaces en appelant la fonction spécifiée avant la prochaine repeinte. Cela signifie que les animations peuvent être synchronisées avec la vitesse de rafraîchissement de l'appareil, ce qui entraîne des animations plus lisses. Il permet également au navigateur d'optimiser les animations, de réduire l'utilisation du processeur et d'améliorer les performances.

Comment utiliser le panneau de performance de Devtools pour améliorer les performances de l'animation CSS?

Le panneau de performances de Devtools fournit une rupture détaillée de la consommation de temps dans le cycle de vie de l'animation. En analysant ces données, vous pouvez identifier tous les goulots d'étranglement de performances et optimiser les animations en conséquence. Par exemple, si beaucoup de temps est consacré au dessin, vous voudrez peut-être considérer les propriétés que les animations ne déclenchent pas l'opération de dessin.

Quel est l'impact de la gigue de mise en page sur les performances de l'animation CSS?

La gigue de mise en page fait référence à la situation où le navigateur doit calculer à plusieurs reprises les informations de mise en page en raison des modifications du DOM. Cela peut sérieusement affecter les performances des animations CSS, provoquant l'exécution lentement de l'animation ou provoque le bégaiement. Pour éviter la gigue de mise en page, essayez de parcourir les opérations de lecture et d'écriture et d'écrire ensemble et d'éviter les animations pour déclencher les propriétés de l'opération de publication.

Comment utiliser l'attribut CSS will-change pour améliorer les performances de l'animation?

will-change Les propriétés vous permettent d'informer le navigateur avant les propriétés que vous prévoyez d'animation. Cela permet au navigateur d'effectuer toutes les optimisations nécessaires avant le début de l'animation, ce qui peut entraîner des animations plus lisses. Cependant, l'attribut will-change doit être utilisé avec prudence, car la surutilisation peut amener le navigateur à consommer plus de ressources et à affecter négativement les performances.

(Veuillez noter que tous les liens ci-dessus doivent être remplacés par des liens réels)