Surveillance des performances dans les animations CSS

(Virendra Singh) (22 avril 2020)

Animation utilisant JavaScript ? ou Animation utilisant CSS ?

Cette question touche chaque développeur une fois, ou probablement deux fois ou plus, dans leur carrière technique.

Au fil du temps, les geeks de Javascript ont créé de nombreuses bibliothèques pour faire de lanimation dans le navigateur, et tout le monde semble convaincu dutiliser ces bibliothèques comme solution prête à lemploi. Mais attendez, est-ce la bonne solution? Devrions-nous faire de lanimation en utilisant JavaScript? Ou pouvons-nous nous fier à limplémentation CSS native pour créer des animations de manière plus efficace et plus performante?

Puisque vous lisez ce blog, je suppose que vous êtes familier avec les animations JavaScript. Explorons donc «lanimation basée sur CSS» en détail et les différentes saveurs danimation CSS ainsi que leurs implications sur les performances.

La base de lanimation repose sur certaines propriétés CSS que vous utiliserez souvent dans une animation basée sur CSS. implémentations.

position: (absolue / relative)

transformation

opacité

gauche, droite, haut, bas et beaucoup dautres.

Commençons par examiner les résultats de deux expériences avec différentes propriétés CSS pour lanimation.

(a) position absolue avec gauche et haut

(b) transformer

De plus, pourquoi nessayons-nous pas de tirer des conclusions sur les performances et le temps de rendu en nous basant sur ces expériences?

En regardant ces deux exemples, cela semble similaire la fonctionnalité a été imp lemented malgré lutilisation dapproches différentes. Cependant, lorsque nous mesurons les métriques de performances dans loutil de développement Chrome, nous constatons une réelle différence en termes de performances dans les deux cas.

Avant de nous plonger dans la compréhension de ces métriques de performances, nous devons comprendre comment le navigateur rend linterface utilisateur et toutes les actions quelle effectue lorsquune mise à jour se produit sur linterface utilisateur.

La création de linterface utilisateur commence par:

1) Calculez les styles qui vont sappliquer aux éléments (Recalculer le style)

2) Créez la mise en page des éléments et positionnez-les à lécran (Mise en page)

3) Ajoutez les pixels dans toutes les mises en page créées, il sagit plus de créer un bitmap pour chaque calque. Le GPU utilise ce bitmap pour rendre le calque à lécran (Paint)

4) Enfin, créez les calques à lécran, en construisant une pile de calques. La vue de dessus de cette pile ressemblera à une page Web complète dans laquelle chaque élément a sa propre position (Couches composites)

La création de couches composites est un endroit où le CPU parle au GPU, pour gérer lanimation. En utilisant des propriétés telles que transformation et opacité, nous pouvons forcer le navigateur à faire des animations en utilisant GPU au lieu de Processeur.

Alors, comment le GPU nous aide-t-il à réaliser une animation fluide?

GPU est une autre petite machine pour gérer notre animation et il peut gérer un grand nombre de calculs dinterface utilisateur.

Ainsi, lorsque la création de couches composites se déclenche, il crée une autre couche. Cest une autre façon de nous aider à éviter le rendu de lélément qui sanime et dautres parties des éléments de linterface utilisateur.

Dans limage ci-dessous, les deux boules rouges semblent être sur le même calque. Mais, lorsque nous déplaçons ce calque en rotation 3D, nous constatons que la Transformer lanimation a un autre calque qui a été créé pour la boule rouge, fournissant une animation fluide.

GPU garde cette arborescence dobjets de rendu en mémoire et, sans rendu à nouveau , peut mettre cette couche au-dessus des autres. Mais, dans le cas de lanimation en haut à gauche, le même calque est rendu encore et encore en raison de changements dans ces propriétés. Si nous vérifions le comportement de ces deux propriétés CSS, nous verrons que les deux propriétés left et top impactent la mise en page, provoquant également une opération de repeinture et de composition.

Traduire vs Haut / Gauche

Lanimation ci-dessus de la balle a une nette différence entre translate vs top / left .

Dans le cas de top / left , la balle est rendue sur chaque position jusquà ce quelle atteigne la destination finale et, lorsquelle recommence à se déplacer vers la position initiale, elle commence la partie de rendu.

Remarque: La couleur violette représente la création de la mise en page de la boule rouge et la couleur verte est utilisée pour classer les pixels.

Les deux images ci-dessus sont une capture décran de la performance de translate par rapport à haut / gauche .

En mettant en évidence une seule tâche de chacune, nous commençons à comprendre que lactivité effectuée par la tâche est différente dans les deux cas. Dans le cas supérieur / gauche , la tâche effectuait la création de la mise en page, la peinture et le recalcul du style. Dans le cas de translate , une seule tâche effectuée par le Le GPU déplace la couche composite sans rien rendre dans DOM.

Donc, avec la puissance du GPU, nous gardons notre thread principal libre. Cela nous aide à améliorer les performances des applications et notre thread principal est occupé à rendre la disposition.

Le graphique de mesure de performance ci-dessus fournit plus de preuves, expliquant à quel point notre fil principal est occupé dans le recalcul de la mise en page et du style. Ce graphique reflète en permanence les changements qui se produisent sur linterface utilisateur.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *