La composition est l'endroit où les parties peintes de la page sont assemblées pour être affichées à l'écran.
La composition est l'endroit où les parties peintes de la page sont assemblées pour être affichées à l'écran.
Dans cette zone, deux facteurs clés ont une incidence sur les performances de la page: le nombre de calques du compositeur à gérer et les propriétés que vous utilisez pour les animations.
Résumé
- Appliquez les changements de transformation et d'opacité à vos animations.
- Faites la promotion des éléments en mouvement avec
will-changeoutranslateZ. - Évitez d'utiliser trop de règles de promotion, car les couches nécessitent de la mémoire et de la 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 l'effet de peinture, et ne nécessite que des modifications de composition:
Pour ce faire, vous devrez vous en tenir à modifier les propriétés qui peuvent être gérées uniquement par le compositeur. Aujourd'hui, ce n'est vrai que pour deux propriétés : les transform et les opacity :
La mise en garde concernant l'utilisation des transform et des opacity est que l'élément sur lequel vous modifiez ces propriétés doit se trouver sur sa couche compositeur spécifique. Pour créer une couche, vous devez promouvoir l'élément. Nous verrons cela dans la suite de cet atelier.
Promouvoir les éléments que vous prévoyez d'animer
Comme nous l'avons indiqué dans la section Simplifier la peinture et réduire les zones à peindre, vous devez promouvoir 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 sont pas compatibles, procédez comme suit:
.moving-element {
transform: translateZ(0);
}
Gérer les calques et éviter une explosion des calques
Étant donné que les couches améliorent souvent les performances, il est peut-être tentant de promouvoir tous les éléments de votre page à l'aide d'éléments semblables à ceux-ci:
* {
will-change: transform;
transform: translateZ(0);
}
C'est une façon circulaire de dire que vous souhaitez promouvoir chaque élément de la page. Le problème ici est que chaque couche que vous créez nécessite de la mémoire et de la 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 l'emporter sur tout avantage de la création d'une couche. Les textures de chaque calque doivent être importées vers le GPU. Il existe donc d'autres contraintes en termes de bande passante entre le processeur et le GPU, et la 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 calques de votre application et comprendre pourquoi un élément possède un calque, vous devez activer le profileur Paint dans la timeline des outils pour les développeurs Chrome:
Lorsque cette option est activée, vous devez faire un enregistrement. Une fois l'enregistrement terminé, vous pouvez cliquer sur les images individuelles, situées entre les barres du nombre d'images par seconde et les détails:
En cliquant dessus, vous accédez à une nouvelle option dans les détails: un onglet "Calque".
Cette option affiche une nouvelle vue qui vous permet de faire un panoramique, un balayage et un zoom sur tous les calques de ce cadre, 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 critiques pour les performances, telles que le défilement ou les transitions (il faut compter environ 4 à 5 ms), vous pouvez utiliser les informations présentées ici pour voir le nombre de couches dont vous disposez, pourquoi elles ont été créées et, à partir de là, gérer le nombre de couches dans votre application.