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 de surcharger les règles de promotion. Les couches nécessitent de la mémoire et une 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 que le compilateur peut gérer seul. Actuellement, seules deux propriétés sont concernées : transforms et opacity :
L'utilisation de transform et de opacity est une mise en garde : l'élément sur lequel vous modifiez ces propriétés doit se trouver sur sa propre couche de compositeur. 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 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 couche que vous créez nécessite de la mémoire et une gestion, ce qui 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 couches de votre application et comprendre pourquoi un élément en comporte, vous devez activer le profileur Paint dans la timeline des outils pour les développeurs Chrome:
Si vous activez cette option, vous devez enregistrer une vidéo. Une fois l'enregistrement terminé, vous pouvez cliquer sur les différentes images, 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'explorer et de zoomer sur tous les calques de cette image, ainsi que les raisons pour lesquelles chaque calque a été créé.
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.