Le mode Peinture continue pour le profilage du peinture est désormais disponible dans Chrome Canary. Cet article explique comment identifier un problème de temps de rendu des pages et comment utiliser ce nouvel outil pour détecter les goulots d'étranglement qui affectent les performances de peinture.
Examiner le temps de peinture sur votre page
Vous avez donc remarqué que votre page ne défile pas correctement. C'est ainsi que vous commenceriez à vous attaquer au problème. Pour cet exemple, nous allons utiliser la page de démonstration Things We Left on The Moon (Things que nous avons laissés sur la lune) de Dan Cederholm.
Ouvrez l'inspecteur Web, démarrez un enregistrement de la chronologie, puis faites défiler la page vers le haut et vers le bas. Les chronologies verticales montrent ce qui s'est passé dans chaque image.
Si vous constatez que la plupart du temps est consacré à la peinture (grandes barres vertes supérieures à 60 images par seconde), vous devez examiner de plus près les raisons de ce phénomène. Pour examiner vos peintures, utilisez le paramètre Afficher les rectangles de peinture de l'inspecteur Web (icône en forme de roue dentée dans l'angle inférieur droit de l'inspecteur Web). Cela vous montrera les régions dans lesquelles Chrome peint.
Chrome peut repeindre des zones de la page pour différentes raisons:
- Les nœuds DOM sont modifiés en JavaScript, ce qui oblige Chrome à recalculer la mise en page.
- Animations en cours de lecture, mises à jour selon un cycle basé sur les images.
- L'interaction de l'utilisateur, comme le pointage, entraîne des changements de style sur certains éléments.
- Toute autre opération entraînant la modification de la mise en page
En tant que développeur, vous devez être conscient des modifications apportées à votre page.
Regarder les rectangles de peinture est un excellent moyen de le faire. Dans l'exemple de capture d'écran ci-dessus, vous pouvez voir que l'intégralité de l'écran est recouvert d'un grand rectangle de peinture. Cela signifie que l'ensemble de l'écran est repeint à mesure que vous faites défiler l'écran, ce qui n'est pas bon. Dans ce cas spécifique, cela est dû au style CSS background-attachment:fixed, qui fait en sorte que l'image de fond de la page reste à la même position alors que le contenu de la page se déplace au-dessus lorsque vous faites défiler la page.
Si vous constatez que l'opération de repeinture couvre une grande zone et/ou prend beaucoup de temps, deux options s'offrent à vous:
- Vous pouvez essayer de modifier la mise en page pour réduire la quantité de peinture. Si possible, Chrome ne peint la page visible qu'une seule fois et ajoute les parties qui n'ont pas été visibles lorsque vous faites défiler la page vers le bas. Toutefois, dans certains cas, Chrome doit repeindre certaines zones. Par exemple, la règle CSS
position:fixed, souvent utilisée pour les éléments de navigation qui restent à la même position, peut entraîner ces repains. - Si vous souhaitez conserver votre mise en page, vous pouvez essayer de réduire le coût de peinture des zones à repeindre. Tous les styles CSS n'ont pas le même coût de peinture. Certains ont peu d'impact, d'autres beaucoup. Déterminer les coûts de peinture de certains styles peut demander beaucoup de travail. Pour ce faire, vous pouvez activer ou désactiver les styles dans le panneau "Éléments" et examiner les différences au niveau de l'enregistrement de la timeline. Cela implique de passer d'un panneau à l'autre et d'effectuer de nombreux enregistrements. C'est là qu'intervient le mode peinture continue.
Mode Peinture continue
Le mode Peinture continue est un outil qui vous aide à identifier les éléments coûteux de la page. La page est alors constamment repeinte, ce qui affiche un compteur de la quantité de travail à peindre. Vous pouvez ensuite masquer les éléments et modifier les styles, en surveillant le compteur, afin de déterminer ce qui ralentit.
Préparation
Pour utiliser le mode Peinture continue, vous devez utiliser Chrome Canary.
Sur les systèmes Linux (et sur certains Mac), vous devez vous assurer que Chrome s'exécute en mode composition. Vous pouvez activer cette option de manière permanente à l'aide du paramètre GPU Composition on all pages (Composition GPU sur toutes les pages) dans about:flags.
Par où commencer ?
Vous pouvez activer le mode Peinture continue en cochant la case Activer l'actualisation continue des pages dans les paramètres de l'inspecteur Web (icône en forme de roue dentée dans l'angle inférieur droit de l'inspecteur Web).
Le petit écran en haut à droite indique les temps de peinture mesurés en millisecondes. Elle indique plus précisément:
- Dernière durée de peinture mesurée à gauche.
- Les valeurs minimale et maximale du graphique actuel à droite.
- Graphique à barres affichant l'historique des 80 dernières images en bas (la ligne du graphique indique 16 ms comme point de référence).
Les mesures du temps de rendu dépendent de la résolution de l'écran, de la taille de la fenêtre et du matériel sur lequel Chrome est exécuté. Sachez que ces éléments sont susceptibles d'être différents pour vos utilisateurs.
Workflow
Voici comment utiliser le mode Peinture continue pour identifier les éléments et les styles qui entraînent des frais de peinture importants:
- Ouvrez les paramètres de l'inspecteur Web, puis cochez la case Activer l'actualisation continue des pages.
- Accédez au panneau "Éléments" et parcourez l'arborescence DOM à l'aide des touches fléchées ou en sélectionnant des éléments sur la page.
- Utilisez le raccourci clavier H, une nouvelle assistance, pour activer/désactiver la visibilité d'un élément.
- Examinez le graphique des temps de peinture et essayez de repérer un élément qui ajoute beaucoup de temps à peindre.
- Parcourez les styles CSS de cet élément, et activez-les et désactivez-les lorsque vous consultez le graphique, afin de trouver le style qui provoque le ralentissement.
- Modifiez ce style et enregistrez un autre enregistrement de Vos trajets pour vérifier si cela a amélioré les performances de votre page.
L'animation ci-dessous montre l'activation/la désactivation des styles et son impact sur le temps de peinture:
Cet exemple montre comment désactiver l'un des styles CSS box-shadow ou border-radius réduit considérablement le temps de rendu. L'utilisation à la fois de box-shadow et de border-radius sur un élément entraîne des opérations de peinture très coûteuses, car Chrome ne peut pas optimiser cela. Par conséquent, si l'un de vos éléments est fréquemment repeint, comme dans l'exemple, vous devez éviter cette combinaison.
Remarques
Le mode Peinture continue repeint toute la page visible. Ce n'est généralement pas le cas lorsque vous naviguez sur une page Web. Le défilement ne peint généralement que les parties qui n'étaient pas visibles auparavant. Pour les autres modifications de la page, seule la plus petite zone possible est repeinte. Vérifiez donc avec un autre enregistrement de Vos trajets si les améliorations apportées à votre style ont réellement eu un impact sur le temps de rendu de votre page.
Lorsque vous utilisez continuous painting mode, vous vous apercevez peut-être que les styles CSS border-radius et box-shadow, par exemple, augmentent le temps de rendu. Il n'est pas déconseillé d'utiliser ces fonctionnalités en général. Elles sont formidables et nous sommes ravis qu'elles soient enfin disponibles. Mais il est important de savoir quand et où les utiliser.
Évitez de les utiliser dans les zones où de nombreuses peintures sont repeintes et, en général, évitez de les utiliser de manière excessive.
Démo
Cliquez ci-dessous pour voir une démonstration dans laquelle Paul Irlandais utilise la peinture continue pour identifier une opération de peinture extrêmement coûteuse.