Le mode Peinture continue pour le profilage de peinture est désormais disponible dans Chrome Canary. Cet article explique comment identifier un problème de temps de rendu de la page et comment utiliser ce nouvel outil pour détecter les goulots d'étranglement qui affectent les performances de la mise en page.
Examiner le temps de rendu sur votre page
Vous avez donc remarqué que le défilement de votre page n'est pas fluide. C'est ainsi que vous commenceriez à vous attaquer au problème. Pour cet exemple, nous utiliserons la page de démonstration Things We Left on The Moon (Ce que nous avons laissés sur la Lune) de Dan Cederholm.
Ouvrez l'inspecteur Web, démarrez un enregistrement de la chronologie et faites défiler la page vers le haut ou vers le bas. Ensuite, nous observons les chronologies verticales, qui montrent ce qui s'est passé dans chaque image.
Si vous constatez que vous passez le plus de temps à peindre (grandes barres vertes supérieures à 60 images par seconde), vous devez examiner de plus près les causes de ce problème. Pour examiner vos peintures, utilisez le paramètre Show Paint rectangles (Afficher les rectangles de peinture) de l'inspecteur Web (icône en forme de roue dentée en bas à droite de l'inspecteur Web). Les régions dans lesquelles Chrome peint s'affichent.
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.
- Les animations en cours de lecture sont mises à jour selon un cycle basé sur des images.
- Les interactions des utilisateurs, comme le survol, entraînent 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'ensemble 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, ce qui n'est pas optimal. Dans ce cas spécifique, cela est dû au style CSS background-attachment:fixed, qui oblige l'image de fond de la page à rester à la même position pendant que le contenu se déplace au-dessus lorsque vous faites défiler la page.
Si vous constatez que les repeintures couvrent une grande zone et/ou prennent 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 affiche la page visible une seule fois et ajoute des parties qui ne sont pas 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, qui est souvent utilisée pour les éléments de navigation qui restent à la même position, peut entraîner ces repeints. - Si vous souhaitez conserver votre mise en page, vous pouvez essayer de réduire les coûts de peinture des zones repeintes. Les prix de peinture ne sont pas les mêmes pour tous les styles CSS. Certains ont un impact faible, d'autres beaucoup. Déterminer les coûts de peinture de certains styles peut demander beaucoup de travail. Pour ce faire, vous pouvez activer/désactiver les styles dans le panneau "Éléments" et examiner les différences au niveau de l'enregistrement de la timeline, ce qui 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 toujours repeinte, ce qui indique le volume de travaux de peinture en cours. Vous pouvez ensuite masquer les éléments et modifier les styles en surveillant le compteur afin d'identifier ce qui est lent.
Prérequis
Pour utiliser le mode Peinture continue, vous devez utiliser Chrome Canary.
Sur les systèmes Linux (et certains Mac), vous devez vous assurer que Chrome s'exécute en mode composition. Vous pouvez l'activer de manière permanente à l'aide du paramètre Composition GPU sur toutes les pages dans about:flags.
Premiers pas
Pour activer le mode Peinture continue, cochez la case Activer le repeinture continue de la page dans les paramètres de l'inspecteur Web (icône en forme de roue dentée en bas à droite de l'outil).
Le petit écran situé en haut à droite indique les temps de peinture mesurés en millisecondes. Plus précisément, elle indique:
- La dernière durée de peinture mesurée à gauche.
- Il s'agit des valeurs minimale et maximale du graphique actuel situé à droite.
- Graphique à barres affichant l'historique des 80 derniers 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 vous pouvez utiliser le mode peinture continue pour identifier les éléments et les styles qui entraînent des coûts de peinture élevés:
- Ouvrez les paramètres de l'inspecteur Web, puis cochez la case Activer le remplissage continu des pages.
- Accédez au panneau "Éléments", puis 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, un nouvel assistant, pour activer/désactiver la visibilité d'un élément.
- Examinez le graphique du temps de peinture et essayez de repérer un élément qui ajoute beaucoup de temps de peinture.
- Parcourez les styles CSS de cet élément, en les activant et en les désactivant lorsque vous examinez le graphique, afin de trouver le style qui cause le ralentissement.
- Modifiez ce style et effectuez un nouvel enregistrement de la chronologie pour voir si cela a amélioré les performances de votre page.
L'animation ci-dessous montre l'activation/la désactivation des styles et leur impact sur le temps de rendu:
Cet exemple montre comment la désactivation de l'un des styles CSS box-shadow ou border-radius réduit considérablement le temps de rendu. L'utilisation conjointe 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 procéder à une optimisation en conséquence. Par conséquent, si l'un de vos éléments fait l'objet de nombreuses repeintures, comme dans l'exemple ci-dessus, évitez cette combinaison.
Remarques
Le mode Peinture continue permet de repeindre toute la page visible. Ce n'est généralement pas le cas lorsque vous parcourez une page Web. Le défilement ne peigne généralement que les parties qui n'étaient pas visibles auparavant. Pour les autres modifications apportées à la page, seule la plus petite zone possible est repeinte. Vérifiez donc avec un autre enregistrement de Timeline si les améliorations de votre style ont réellement eu un impact sur les temps de rendu de votre page.
Lorsque vous utilisez continuous painting mode, vous pouvez découvrir, par exemple, que les styles CSS border-radius et box-shadow ajoutent beaucoup de temps de rendu. Il n'est pas découragé d'utiliser ces fonctionnalités en général. Elles sont géniales et nous sommes heureux qu'elles soient enfin disponibles. Mais il est important de savoir quand et où les utiliser.
Évitez de les utiliser dans les zones avec beaucoup de repeintes et évitez de les utiliser à outrance en général.
Démo
Cliquez ci-dessous pour visionner une démonstration dans laquelle Paul Irish utilise la peinture continue pour identifier une opération de peinture particulièrement coûteuse.