Résumé: Chromium met automatiquement à jour ses fonctionnalités d'accélération matérielle pour les animations SVG, les transformations basées sur un pourcentage et, bientôt, les animations de couleur d'arrière-plan et de chemin de découpe.
En ce qui concerne les performances des animations Web, les termes "animations accélérées par le matériel" et "accélération par GPU" seront probablement utilisés. Mais que signifient-ils ? Les styles avec accélération matérielle sont ceux qui exploitent le GPU (Graphical Processing Unit) plutôt que le CPU (Central Processing Unit) pour effectuer le rendu des styles visuels. En effet, le GPU peut afficher les modifications visuelles sur une page Web plus rapidement que le processeur.
Utiliser le GPU pour décharger les transitions et les animations gourmandes en ressources graphiques permet d'obtenir des visuels plus fluides et moins d'à-coups, car ces animations ne sont pas affectées par le thread principal. En les extrayant du thread principal, vos animations contournent la croûte des autres scripts actifs exécutés sur votre page, ce qui ralentirait vos visuels et créerait des à-coups.
Activer les animations avec accélération matérielle
Les animations accélérées par le matériel sont composées sous forme de couches et aident les développeurs à réaliser des animations fluides à 60 FPS (images par seconde) afin d'améliorer les performances de rendu visuel. Il existe actuellement plusieurs façons de spécifier et d'activer les animations et les transitions avec accélération matérielle sur le Web:
- Utilisez les fonctions CSS
transform, ou effectuez une transition des valeursopacityoufilter. - Ajoutez la propriété
will-changeà votre élément. - Créer un dessin animé sur canevas via
OffscreenCanvas - Créer un dessin 3D WebGL
opacity, filter et transform pour le moment, background-color et clip-path rejoindront bientôt la liste. Quels sont les autres changements qui seront accélérés par le matériel par défaut dans Chromium ? Plusieurs éléments entrent en ligne de compte dans le pipeline, y compris les animations SVG, que les développeurs ont demandé avec attention.
Animations SVG accélérées par le matériel
Le format SVG est un excellent ajout à n'importe quel site Web, et ces interactions avec le format SVG peuvent désormais être plus performantes. À partir de Chromium 89, Chrome rejoindra les fonctionnalités comme Firefox pour activer l'accélération matérielle par défaut sur les animations SVG. En tant que développeur, que devez-vous faire ? Rien. Cette option sera automatiquement appliquée aux animations SVG dans Chromium 89 ou version ultérieure.
Exemple
Examinons les différences entre une animation SVG avec et sans accélération matérielle. Les indicateurs de chargement sont des éléments d'interface utilisateur couramment utilisés, comme celui-ci observé sur facebook.com. Ils indiquent que le travail est en cours sur le serveur pendant que l'utilisateur attend une réponse. Dans le cas présenté ici, la réponse serait de charger des résultats supplémentaires dans la barre latérale.
Lorsque nous ouvrons les outils de développement, nous pouvons commencer à profiler et à réellement voir les différences entre une expérience d'animation accélérée par le processeur et le GPU.
Vous pouvez constater qu'à gauche (Chromium 87), l'icône de chargement est repeinte chaque fois que l'icône de chargement s'anime (en continu). Sur la droite, aucune autre fonctionnalité n'est disponible (Chromium 89 et Firefox). Nous pouvons tester cela dans le panneau de rendu des outils de développement, lorsque vous activez le clignotement de peinture.
En examinant de plus près le panneau "Performances", vous pouvez à nouveau voir cet effet et son impact sur les performances globales de votre propriété Web. Vous évitez complètement le rendu et le rendu et le rendu de l'animation, ce qui se traduit par des animations plus fluides et des applications plus performantes. Bien que Facebook n'expédie pas ce chargeur SVG tant que la compatibilité du navigateur avec le SVG avec accélération matérielle n'aura pas été améliorée, il offrirait davantage de flexibilité en termes de thématisation, de scaling et de résolution, ainsi qu'une maintenance simplifiée.
Pourcentage d'animations
L'équipe Interactions prend également en charge les animations de transformation du pourcentage dans Chromium 89. Les animations basées sur un pourcentage décrivent des interactions qui incluent des mouvements basés sur un pourcentage. Par exemple, vous pouvez augmenter la taille d'un élément de 20 % ou faire glisser un menu de la barre latérale responsive hors écran avec un élément comme translateX: -100%.
Ces types d'animations d'interface utilisateur sont relativement courants, mais ne tirent actuellement pas parti de l'accélération matérielle, car nous ne pouvions pas les combiner auparavant. Les pourcentages dans les transformations dépendent de la taille de la zone (mise en page), mais à présent, tant que la taille de la mise en page ne modifie pas chaque image, le navigateur peut précalculer les valeurs de transformation absolues et les exécuter comme si le développeur avait fourni des valeurs en pixels. La bonne nouvelle, c'est que l'équipe Chromium travaille sur cette fonctionnalité. Bientôt, ces types d'animations seront automatiquement composites et accélérés par le matériel.
Quelle est la prochaine étape ?
Ces nouvelles animations rendent les styles Web beaucoup plus fluides. Comme mentionné ci-dessus, l'équipe cherche toujours à voir quels seront les besoins Web à venir. Pour le moment, nous prévoyons de convertir background-color et clip-path afin d'utiliser automatiquement l'accélération matérielle dans les futures versions de Chromium.
background-color est une priorité en raison de son nombre élevé d'utilisations pour les transitions et les effets. clip-path permet des effets de transition beaucoup plus performants sur le Web. Tout le monde est gagnant : performances et interactivité.
Image de couverture: Siora Photography pour Unsplash.