La peinture est le processus de remplissage des pixels qui finissent par être composés écrans. Il s'agit souvent de l'exécution la plus longue de toutes les tâches du pipeline, qu'il faut éviter autant que possible.
La peinture est le processus de remplissage des pixels qui finissent par être composés l'expérience des utilisateurs écrans. Il s'agit souvent de l'exécution la plus longue de toutes les tâches pipeline, et un à éviter si possible.
Résumé
- La modification d'une propriété en dehors des transformations ou de l'opacité déclenche toujours l'application de peinture.
- La peinture est souvent la partie la plus chère du pipeline de pixels. évitez-les autant que possible.
- Réduisez les zones de peinture via la promotion de couches et l'orchestration des animations.
- Utiliser le Profileur de peinture des outils pour les développeurs Chrome pour évaluer la complexité et le coût de la peinture réduire autant que possible.
Déclenchement de la mise en page et de la peinture
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 les 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 à 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. Ouvrir l'onglet "Rendu" puis activez Paint Flashing.
Lorsque cette option est activée, Chrome clignote en vert à chaque fois qu'un dessin est peint. Si la totalité de l'écran clignote en vert ou si des zones de l'écran ne devraient pas être peintes, vous devez aller un peu plus loin.
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 en plusieurs images, ou couches compositeur, 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 packs d'œuvres d'art tels que Sketch, GIMP ou Photoshop, où des calques individuels peuvent être manipulés et composés les uns sur les autres pour créer l'image finale.
Le meilleur moyen de créer un calque consiste à utiliser la propriété CSS will-change. Cette opération fonctionne dans Chrome, Opera et Firefox, et la valeur transform permet de créer un calque compositeur:
.moving-element {
will-change: transform;
}
Pour les navigateurs qui ne sont pas compatibles avec will-change, mais qui bénéficient de la création de calques, comme Safari et Mobile Safari, vous devez (mauvaise) utiliser une transformation 3D pour forcer une nouvelle couche:
.moving-element {
transform: translateZ(0);
}
Veillez toutefois à ne pas créer trop de couches, car chacune d'elles nécessite à la fois de la mémoire et une gestion. Pour en savoir plus, consultez la section S'en tenir aux propriétés des compositeurs uniquement et gérer le nombre de calques.
Si vous avez promu un élément dans une nouvelle couche, utilisez les outils de développement pour vérifier que cela vous a permis d'améliorer les performances. Ne faites pas la promotion d'éléments sans profilage.
Réduire les zones de peinture
Parfois, cependant, malgré la promotion d'éléments, un travail de peinture est encore nécessaire. L'un des grands défis des problèmes de peinture est que les navigateurs unissent deux zones à peindre, ce qui peut entraîner la repeinture de l'ensemble de l'écran. Par exemple, si vous avez un en-tête fixe en haut de la page et qu'un élément est peint en bas de l'écran, l'ensemble de l'écran risque d'ê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 floutage (comme une ombre, par exemple) va prendre plus de temps à peindre que, par exemple, 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.
Le profileur de peinture ci-dessus vous permettra de déterminer si vous devez rechercher 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.