Le compositing consiste à assembler les parties peintes de la page pour les afficher à l'écran.
La composition consiste à assembler les parties peintes de la page pour les afficher à l'écran.
Dans ce domaine, deux facteurs clés affectent les performances de la page: le nombre de calques de composition à gérer et les propriétés que vous utilisez pour les animations.
Résumé
- Limitez-vous aux modifications de transformation et d'opacité pour vos animations.
- Mettez en avant le déplacement d'éléments avec
will-changeoutranslateZ. - Évitez d'utiliser trop de règles de promotion. Les calques nécessitent de la mémoire et de la gestion.
Utiliser des modifications de transformation et d'opacité pour les animations
La version la plus performante du pipeline de pixels évite à la fois la mise en page et la peinture, et ne nécessite que des modifications de composition:
Pour ce faire, vous devez vous en tenir aux propriétés modifiables qui peuvent être gérées par le compilateur seul. Actuellement, seules deux propriétés sont concernées : transforms et opacity :
L'élément sur lequel vous modifiez ces propriétés doit se trouver dans sa propre couche de composition.transformopacity Pour créer un calque, vous devez promouvoir l'élément, ce que nous verrons dans la section suivante.
Mettre en avant les éléments que vous prévoyez d'animer
Comme nous l'avons indiqué dans la section Simplifier la complexité de la peinture et réduire les zones de peinture, vous devez promouvoir les éléments que vous prévoyez d'animer (dans la mesure du possible, n'en faites pas trop !) dans leur propre calque:
.moving-element {
will-change: transform;
}
Ou, pour les navigateurs plus anciens ou ceux qui ne sont pas compatibles avec will-change:
.moving-element {
transform: translateZ(0);
}
Gérer les calques et éviter les explosions de calques
Sachant que les calques améliorent souvent les performances, il peut être tentant de promouvoir tous les éléments de votre page avec quelque chose comme ce qui suit:
* {
will-change: transform;
transform: translateZ(0);
}
Ce qui revient à dire que vous souhaitez promouvoir chaque élément de la page. Le problème est que chaque calque que vous créez nécessite de la mémoire et de la gestion, et cela n'est pas sans frais. En fait, sur les appareils dont la mémoire est limitée, l'impact sur les performances peut largement dépasser les avantages de la création d'une couche. Les textures de chaque calque doivent être importées sur le GPU. Il existe donc d'autres contraintes en termes de bande passante entre le processeur et le GPU, ainsi que de mémoire disponible pour les textures sur le GPU.
Utiliser les outils pour les développeurs Chrome pour comprendre les calques de votre application
Pour comprendre les calques de votre application et pourquoi un élément possède une couche, vous devez activer le profileur Paint dans la chronologie de Chrome DevTools:
Lorsque cette option est activée, vous devez effectuer un enregistrement. Une fois l'enregistrement terminé, vous pouvez cliquer sur des images individuelles, qui se trouvent entre les barres d'images par seconde et les détails:
Cliquez dessus pour afficher une nouvelle option dans les détails: un onglet de calque.
Cette option affiche une nouvelle vue qui vous permet de faire un panoramique, d'effectuer un balayage et de faire un zoom avant sur toutes les couches pendant ce frame, ainsi que les raisons pour lesquelles chaque couche a été créée.
Cette vue vous permet de suivre le nombre de calques que vous avez. Si vous passez beaucoup de temps à composer lors d'actions critiques pour les performances, comme le défilement ou les transitions (vous devez viser environ 4 à 5 ms), vous pouvez utiliser les informations fournies ici pour voir combien de calques vous avez, pourquoi ils ont été créés, et gérer le nombre de calques dans votre application.