La peinture consiste à remplir les pixels qui seront finalement composés sur l'écran de l'utilisateur. Il s'agit souvent de l'exécution la plus longue de toutes les tâches du pipeline, et un à éviter si 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-la autant que possible.
- Réduisez les zones de peinture via la promotion de couches 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.
Déclenchement de la mise en page et de la peinture
Si vous déclenchez la mise en page, vous déclenchez toujours la peinture, car modifier 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, telles que 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 de la peinture à l'aide des outils pour les développeurs Chrome
Vous pouvez utiliser les outils pour les développeurs Chrome pour identifier rapidement les zones à peindre. Ouvrez l'onglet "Rendering" (Affichage), puis activez Paint Flashing (Clignotement de la peinture).
Lorsque cette option est activée, Chrome fait clignoter l'écran en vert chaque fois qu'une peinture est effectuée. 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.
Promouvoir des éléments qui se déplacent 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 un calque consiste à utiliser la propriété CSS will-change, qui est disponible dans tous les principaux moteurs de navigateurs 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
Lorsqu'il s'agit de peindre, certaines choses sont plus chères que d'autres. Par exemple, tout ce qui implique un flou (comme une ombre, par exemple) prendra plus de temps à peindre que, disons, dessiner un cadre rouge. En termes de CSS, ce n'est pas toujours évident: background: red; et box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); ne semblent pas nécessairement présenter 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 rechercher d'autres moyens d'obtenir des effets. Demandez-vous s'il est possible d'utiliser un ensemble de styles moins coûteux ou d'autres moyens pour obtenir le 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.