La composition consiste à assembler les parties peintes de la page afin de les afficher à l'écran.
La composition est l'assemblage des éléments peints de la page s'affiche à l'écran.
Dans cette zone, deux facteurs clés ont une incidence sur les performances de la page: le nombre de calques compositeurs à gérer et les propriétés que vous utilisez pour les animations.
Résumé
- Tenez-vous-en aux changements de transformation et d'opacité de vos animations.
- Faites la promotion d'éléments en mouvement avec
will-changeoutranslateZ. - Évitez d'utiliser trop de règles de promotion. de couche 4 nécessitent de la mémoire et une gestion.
Utiliser les changements 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 la composition des modifications:
Pour ce faire, vous devez vous en tenir aux propriétés modifiées qui peuvent être gérées par le compositeur seul. À l'heure actuelle, cela ne concerne que deux propriétés : transform 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. Nous en parlerons ensuite.
Promouvoir les éléments que vous prévoyez d'animer
Comme nous l'avons mentionné dans l'article Simplifier la peinture et réduire les zones de peinture, vous devez placer les éléments que vous prévoyez d'animer (dans la mesure du raisonnable, n'en faites pas trop !) dans leur propre calque:
.moving-element {
will-change: transform;
}
Pour les navigateurs plus anciens ou ceux qui ne le sont pas, modifieront les éléments suivants:
.moving-element {
transform: translateZ(0);
}
Gérez les calques et évitez leur explosion
Sachant que les calques améliorent souvent les performances, il peut donc être tentant de promouvoir tous les éléments de votre page en utilisant quelque chose de semblable à ce qui suit:
* {
will-change: transform;
transform: translateZ(0);
}
C'est une façon ronde de dire que vous voulez mettre en avant 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 dans le GPU. Il existe donc d'autres contraintes en termes de bande passante entre le processeur et le GPU, et de mémoire disponible pour les textures sur le GPU.
Utiliser les outils pour les développeurs Chrome pour comprendre les couches de votre application
Pour comprendre les couches de votre application et comprendre pourquoi un élément comporte une couche, vous devez activer le profileur Paint dans les outils pour les développeurs Chrome. Chronologie:
Lorsque cette option est activée, vous devez effectuer un enregistrement. 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 accéder à une nouvelle option dans les détails: un onglet des calques.
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 dont vous disposez. Si vous passez beaucoup de temps à la composition lors d'actions essentielles pour les performances, comme le défilement ou les transitions (objectif d'environ 4 à 5 ms), vous pouvez utiliser les informations présentées ici pour savoir combien de calques vous avez, pourquoi ils ont été créés et, à partir de là, gérer leur nombre dans votre application.