Résumé: Chromium met automatiquement à jour ses fonctionnalités d'accélération matérielle pour les animations SVG, les transformations basées sur des pourcentages et, bientôt, les animations de couleur d'arrière-plan et de chemin de clip.
En ce qui concerne les performances de l'animation Web, les termes "accélération matérielle" et "accélération par GPU" apparaîtront probablement. Mais qu’est-ce que cela signifie que cela signifie ? Les styles avec accélération matérielle utilisent le GPU (Graphical Processing Unit) plutôt que le processeur (CPU) pour afficher les styles visuels. En effet, le GPU peut afficher les modifications visuelles sur une page Web plus rapidement que le processeur.
L'utilisation du GPU pour décharger les transitions et les animations nécessitant beaucoup de ressources graphiques permet d'améliorer la fluidité des éléments visuels et de réduire les à-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 éléments visuels et créerait des à-coups.
Activer les animations avec accélération matérielle
Les animations avec accélération matérielle sont composées sous forme de couches et aident les développeurs à réaliser des animations de 60 FPS (images par seconde) très fluides pour améliorer les performances d'affichage visuel. Il existe actuellement plusieurs façons de spécifier et d'activer des animations et des transitions avec accélération matérielle sur le Web:
- Utiliser les fonctions
transformCSS, ou modifier les valeursopacityoufilter - Ajoutez la propriété
will-changeà votre élément. - Créer un dessin sur toile animé via
OffscreenCanvas - Créer un dessin en 3D WebGL
opacity, filter et transform pour le moment, background-color et clip-path rejoindront bientôt la liste. Qu'est-ce qui est également accéléré par défaut dans Chromium ? Plusieurs éléments sont à venir dans le pipeline, y compris les animations SVG, que les développeurs demandent avec enthousiasme.
Animations SVG avec accélération matérielle
Le format SVG est un excellent complément à 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 plates-formes 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+.
Exemple
Examinons les différences entre une animation SVG avec et sans accélération matérielle activée. Les indicateurs de chargement sont des éléments d'interface utilisateur couramment utilisés, comme celui présenté sur facebook.com. Ils donnent des indications sur le travail effectué sur le serveur, pendant que l'utilisateur attend une réponse. Dans le cas présenté ici, la réponse consisterait à charger des résultats supplémentaires dans la barre latérale.
Lorsque nous ouvrons les outils de développement, nous pouvons commencer à profiler et à vraiment voir les différences entre une expérience d'animation accélérée par le processeur et par GPU.
Comme vous pouvez le voir, sur la gauche (Chromium 87), un nouveau rendu a lieu chaque fois que l'icône de chargement s'anime (ce qui se fait en continu). À droite, aucun repeindre n'est effectué (Chromium 89 et Firefox). Nous pouvons tester cela dans le panneau de rendu des outils de développement, lors de l'activation du flashage de Paint.
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 ainsi complètement l'affichage et le rendu de l'animation, ce qui se traduit par des animations plus fluides et des applications plus performantes. Bien que Facebook ne proposera pas ce chargeur basé sur SVG, tant que la compatibilité du navigateur avec le format SVG avec accélération matérielle n'est pas renforcée, ce chargeur offre davantage de flexibilité en termes de thématisation, de scaling et de résolution, ainsi qu'une maintenance simplifiée.
Animations en pourcentage
L'équipe Interactions prend également en charge les animations de transformation en pourcentage dans Chromium 89. Les animations basées sur un pourcentage décrivent des interactions qui incluent un mouvement basé sur un pourcentage. Par exemple, vous pouvez augmenter la taille d'un élément de 20 % ou faire glisser un menu de barre latérale responsive hors écran à l'aide d'un élément comme translateX: -100%.
Ces types d'animations d'interface utilisateur sont relativement courants, mais ils ne tirent actuellement pas parti de l'accélération matérielle, car auparavant, nous ne pouvions pas combiner de telles animations. Les pourcentages dans les transformations dépendent de la taille de la zone (c'est-à-dire de la mise en page). Désormais, tant que cette taille ne change 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 de pixels. La bonne nouvelle est que l'équipe Chromium travaille sur cette fonctionnalité et, bientôt, ces types d'animations seront automatiquement composés et accélérés par le matériel.
Quelle est la prochaine étape ?
Ces nouvelles animations rendront la mise en page Web beaucoup plus fluide. Et comme mentionné ci-dessus, l'équipe cherche toujours à identifier les futurs besoins Web. Pour le moment, nous prévoyons de convertir background-color et clip-path afin qu'elles utilisent 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, et clip-path offre des effets de transition beaucoup plus performants sur le Web. Quand performance rencontre
interactivité, tout le monde est gagnant !
Image de couverture: Siora Photography pour Unsplash.