La peinture consiste à remplir les pixels qui seront finalement composés sur l'écran de l'utilisateur. Il s'agit souvent de la tâche la plus longue de toutes celles du pipeline, et celle à éviter dans la mesure du possible.
Résumé
- La modification de toute propriété autre que les transformations ou l'opacité déclenche toujours la peinture.
- La peinture est souvent la partie la plus coûteuse du pipeline de pixels. Évitez-les autant que possible.
- Réduisez les zones de peinture grâce à la promotion des calques et à l'orchestration des animations.
- Utilisez le profileur de peinture des outils pour les développeurs Chrome pour évaluer la complexité et le coût de la peinture, et réduisez-les si possible.
Comment la mise en page et la peinture sont-elles déclenchées ?
Si vous déclenchez la mise en page, vous déclencherez toujours "Paint", car la modification de la géométrie d'un élément signifie que ses pixels doivent être corrigés.
Vous pouvez également déclencher la peinture si vous modifiez des propriétés non géométriques, comme les arrière-plans, la couleur du texte ou les ombres. Dans ce cas, la mise en page n'est pas nécessaire et le pipeline se présente comme suit:
Identifier rapidement les goulots d'étranglement à l'aide des outils pour les développeurs Chrome
Vous pouvez utiliser les outils pour les développeurs Chrome pour identifier rapidement les zones qui sont peintes. Ouvrez l'onglet Rendu, puis activez Paint Flashing (Clignotement de la peinture).
Lorsque cette option est activée, Chrome clignote en vert à chaque fois qu'un dessin est peint. Si l'ensemble de l'écran clignote en vert ou si des zones de l'écran que vous pensiez ne pas devoir peindre sont peintes, vous devez examiner la situation plus en détail.
Mettre en avant des éléments qui bougent ou s'estompent
Il n'est pas toujours possible de peindre une seule image en mémoire. En fait, le navigateur peut peindre dans plusieurs images ou couches de composition, si nécessaire.
L'avantage de cette approche est que les éléments qui sont régulièrement repeints ou qui se déplacent à l'écran avec des transformations peuvent être gérés sans affecter les autres éléments. C'est la même chose que pour les packages d'illustration tels que Sketch, GIMP ou Photoshop, où des calques individuels peuvent être gérés et superposés pour créer l'image finale.
Le meilleur moyen de créer une couche est d'utiliser la propriété CSS will-change, disponible dans tous les principaux moteurs de navigateur modernes. Avec une valeur de transform, will-change crée un nouveau calque de composition :
.moving-element {
will-change: transform;
}
Toutefois, veillez à ne pas créer trop de calques, car chacun d'eux nécessite de la mémoire et de la gestion. Pour en savoir plus, consultez la section S'en tenir aux propriétés réservées au moteur de composition et gérer le nombre de calques.
Si vous avez promu un élément vers une nouvelle couche, utilisez DevTools pour vérifier que cela vous a apporté un avantage en termes de performances. Ne pas promouvoir d'éléments sans profilage
Réduire les zones de peinture
Cependant, il arrive parfois que des travaux de peinture soient nécessaires, même si des éléments sont mis en avant. Les problèmes de peinture sont difficiles à résoudre, car les navigateurs unissent deux zones à peindre, ce qui peut entraîner la repeinture de l'intégralité de l'écran. Par exemple, si vous avez un en-tête fixe en haut de la page et que quelque chose est peint en bas de l'écran, l'ensemble de l'écran peut être repeint.
Réduire les zones de peinture consiste souvent à orchestrer vos animations et transitions pour qu'elles ne se chevauchent pas autant, ou à trouver des moyens d'éviter d'animer certaines parties de la page.
Simplifier la complexité de la peinture
En matière de peinture, certains éléments sont plus coûteux que d'autres. Par exemple, tout ce qui implique un floutage (comme une ombre, par exemple) va prendre plus de temps à peindre que, par exemple, dessiner un cadre rouge. En termes de CSS, cependant, cela n'est pas toujours évident : background: red; et box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); ne semblent pas nécessairement avoir des caractéristiques de performances très différentes, mais c'est le cas.
Comme le montre la capture d'écran précédente, le profileur de peinture vous permet de déterminer si vous devez envisager d'autres moyens d'obtenir des effets. Demandez-vous s'il est possible d'utiliser un ensemble moins cher de styles ou d'autres moyens d'obtenir votre résultat final.
Vous pouvez éviter de peindre pendant les animations, en particulier, car les 10 ms par image ne sont généralement pas assez longs pour être peint, en particulier sur les appareils mobiles.