La peinture est le processus de remplissage des pixels qui finissent par être composés sur les écrans des utilisateurs. Il s'agit souvent de l'exécution la plus longue de toutes les tâches du pipeline, et il faut l'éviter, dans la mesure du possible.
La peinture est le processus de remplissage des pixels qui finissent par être composés sur les écrans des utilisateurs. Il s'agit souvent de l'exécution la plus longue de toutes les tâches du pipeline, et il faut l'éviter, dans la mesure du possible.
Résumé
- La modification d'une propriété, à l'exception des transformations ou de l'opacité, déclenche toujours l'affichage de Paint.
- Le peinture est souvent la partie la plus chère du pipeline de pixels. Évitez-la autant que possible.
- Réduction des zones de peinture grâce à la promotion des calques et à l'orchestration des animations.
- Utilisez le profileur de peinture Chrome pour les outils pour les développeurs afin d'évaluer la complexité et le coût de l'outil, et d'en réduire le nombre.
Déclenchement de Layout And Paint
Si vous déclenchez une mise en page, vous déclenchez toujours un effet de peinture, car la modification de la géométrie d'un élément implique que ses pixels doivent être corrigés.
Vous pouvez également déclencher Paint 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 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 qui sont peintes. Ouvrez l'onglet Rendu, puis activez Paint Flashing.
Lorsque cette option est activée, Chrome clignote en vert à chaque fois que vous peignez. Si vous voyez que tout l'écran clignote en vert ou que certaines zones de l'écran ne devraient pas être peintes, vous devez creuser un peu plus.
Promouvoir les éléments qui se déplacent ou disparaissent
La peinture n'est pas toujours réalisée dans une seule image en mémoire. En fait, il est possible de 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. Le principe est le même que pour les packs d'art comme Sketch, GIMP ou Photoshop, où des calques individuels peuvent être traités et composites les uns sur les autres pour créer l'image finale.
Le meilleur moyen de créer une couche consiste à utiliser la propriété CSS will-change. Cette commande fonctionne dans Chrome, Opera et Firefox, et, avec la valeur transform, crée 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 utiliser une transformation 3D (mauvaise) pour forcer l'ajout d'un nouveau calque:
.moving-element {
transform: translateZ(0);
}
Toutefois, il convient de ne pas créer trop de couches, car chacune d'entre elles nécessite à la fois de la mémoire et des tâches de gestion. Pour en savoir plus, consultez la section Conserver les propriétés réservées aux compositeurs 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 promouvez pas d'éléments sans profilage.
Réduire les zones à peindre
Cependant, parfois, malgré la promotion d'éléments, des travaux de peinture sont toujours nécessaires. L'un des principaux défis des problèmes de peinture est que les navigateurs unissent deux zones à peindre, ce qui peut entraîner un 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'intégralité de l'écran risque d'être repeinte.
Réduire les zones de peinture consiste souvent à orchestrer vos animations et vos transitions pour limiter le chevauchement, ou à trouver des moyens d'éviter d'animer certaines parties de la page.
Simplifier la peinture
Lorsqu'il s'agit de peindre, certaines choses sont plus chères que d'autres. Par exemple, tout élément impliquant un flou (une ombre, par exemple) est plus long à peindre que, par exemple, à dessiner un cadre rouge. Toutefois, 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 avoir 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 envisager d'autres méthodes pour obtenir des effets. Demandez-vous s'il est possible d'utiliser un ensemble de styles moins cher ou d'autres méthodes pour obtenir votre résultat final.
Évitez d'utiliser du peinture pendant les animations, car les 10 ms par image ne sont généralement pas assez longs pour le rendu, en particulier sur les appareils mobiles.