Get best of the week

Analyse des performances de l'animation CSS

Que choisir pour animer des éléments de pages Web? JavaScript ou CSS? Cette question sera un jour obligée de se poser à chaque développeur web. Et peut-être - et pas une seule fois.

Les programmeurs JavaScript ont créé de nombreuses bibliothèques pour l'animation du navigateur. Et il semble que tout le monde était enclin à utiliser ces bibliothèques comme solution prête à l'emploi pour l'animation. Mais ralentissons. Est-ce correct? Dois-je animer des éléments de page Web à l'aide de JavaScript? Peut-être pouvez-vous compter sur des mécanismes CSS standard et ainsi réaliser des animations de haute qualité et hautes performances?



Puisque vous lisez ceci, je peux supposer que vous connaissez bien l'animation JavaScript. Par conséquent, je propose d'explorer le sujet de l'animation CSS dans ses diverses manifestations, et aussi - je propose de parler de la performance d'une telle animation.

informations générales


Les animations CSS sont basées sur certaines propriétés d'élément. Parmi eux, on peut noter:

  • Une propriété positionqui, en particulier, peut prendre les valeurs absoluteet relative.
  • Propriété transform.
  • Propriété opacity.
  • Propriétés left, right, top, bottom.

Pour commencer, jetez un œil à quelques projets pilotes qui utilisent diverses propriétés CSS pour animer des éléments.

Voici un projet dans lequel un élément avec un identifiant animatedont la propriété est positiondéfinie sur une valeur est animé absolute. Les propriétés de l'élément topet sont susceptibles de changer left.


Page du projet pilote

Ci-dessous se trouve le code qui implémente cette animation.

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        top: 200px;
        left: 130px;
    }
}

Voici un projet dans lequel la même animation est implémentée à l'aide de la propriété CSS transform.

Cette animation est représentée par le code suivant:

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        transform: translate(100px, 100px);
    }
}

Utilisons ces projets pour tirer des conclusions sur les performances des animations CSS et sur le type de ressources système utilisées pour les implémenter.

Si vous regardez simplement les pages des projets, vous pouvez décider de ce qui est mis en œuvre dans la même chose, mais en utilisant des approches différentes. Cependant, si vous mesurez les performances de ces projets à l'aide des outils de développement Chrome, il s'avère qu'ils sont différents.

Comment le navigateur affiche-t-il la page?


Avant de nous plonger dans la recherche de performances, nous devons comprendre comment le navigateur affiche la page et quelles actions il prend si des changements se produisent sur la page.

Voici à quoi ressemble le processus de sortie de page.


Sortie de page

Considérez les événements qui sont reflétés dans cette figure.

  1. Recalculate Style - Calcul des styles à appliquer aux éléments.
  2. Layout - Création de mises en page d'éléments et leur placement sur la page.
  3. Paint- remplir les pixels des calques créés, c'est-à-dire créer des images tramées pour chaque calque. Le GPU utilisera ces images pour afficher la page.
  4. Composite Layer- Disposez les calques et affichez-les à l'écran. Le résultat sera la page terminée.

Un événement Composite Layerest juste le moment où le CPU communique avec le GPU pour créer une animation. En utilisant des propriétés CSS comme transformet opacity, nous pouvons transférer la charge de générer des animations du CPU vers le GPU.

Animation et GPU


Un GPU est essentiellement un ordinateur spécialisé utilisé pour travailler avec des images. Il peut traiter efficacement de grandes quantités d'informations graphiques.

Par conséquent, lorsqu'un événement se produit Composite Layer, une couche supplémentaire est créée. Il s'agit du mécanisme par lequel vous pouvez éviter de restituer l'élément animé et d'autres éléments d'interface.

En regardant la figure suivante, vous pourriez penser que les éléments animés sont situés sur le même calque.


Éléments animés (d' origine )

Mais si vous regardez les calques comme s'ils étaient situés dans un espace tridimensionnel, il s'avère que lorsque l'animation est implémentée à l'aide de la propriété de transformation , un calque supplémentaire est créé pour le cercle rouge. Cela permet de produire une animation fluide haute performance.


Un calque supplémentaire ( original ) a été créé pour l'objet animé. Le

GPU conserve l'arborescence des objets de rendu en mémoire et, sans re-rendu, il peut placer le calque correspondant au-dessus des autres calques. Dans le cas de l'animation d'un objet à l'aide de propriétéstopetleft, le même calque, en raison de changements de propriétés, est rendu encore et encore. Si vous vous intéressez au comportement de ces propriétés CSS, il se trouve que le haut et la gauche affectent la mise en page, ce qui conduit à la nécessité de re-rendre la page et de réorganiser les couches.


Animation utilisant des propriétés traduire et utiliser les propriétés haut et gauche

Cette figure permet de voir une différence sérieuse entre l'animation implémentée en utilisant les propriétéstranslateet les propriétéstopetleft.

Dans le cas des animations créées avectopetleft, le cercle est rendu à chaque position jusqu'à ce qu'il atteigne la position extrême. Après cela, il commence à se déplacer vers la position de départ.

Ce qui suit montre laPerformancebarre d'outils du développeur Chrome avec des détails sur le processus d'animation.


Animation utilisant la propriété translate ( original )


Animation utilisant les propriétés haut et gauche ( original )

Si vous regardez les informations détaillées sur les tâches individuelles présentées dans le panneauPerformance, nous pouvons conclure que différentes actions sont effectuées dans le cadre de ces tâches. Ainsi, dans le cas d'une animation en haut / à gauche, dans le cadre de la tâche, les styles sont recalculés, les calques sont organisés, l'arborescence des calques est mise à jour, la disposition est créée et rendue. Dans le cas de la traduction d'animation, la seule tâche que le GPU résout est de déplacer le calque sans rien envoyer au DOM.

En conséquence, en raison de l'utilisation de puissantes fonctionnalités GPU, en utilisant l'animation de traduction, le thread principal est libéré. Cela améliore les performances des applications. L'utilisation de l'animation haut / gauche entraîne une charge supplémentaire importante sur le thread principal.


La charge sur le flux principal créée par l'animation de traduction (gauche) et l'animation supérieure / gauche (droite) (l' original )

La figure ci-dessus montre clairement la charge qui tombe sur le flux principal lors de l'exécution d'une animation supérieure / gauche. Ceci est le résultat de changements constants qui doivent être traités pour effectuer une telle animation.

Sommaire


Par conséquent, nous pouvons conclure qu'en utilisant des animations CSS, il vaut la peine de prêter attention aux ressources système impliquées dans leur exécution. Si possible, cela vaut la peine d'utiliser ceux qui sont effectués par le GPU.

Et quel genre d'animations utilisez-vous dans vos projets?

More articles:


All Articles