Le mode de peinture continue pour le profilage de la peinture est désormais disponible dans Chrome Canary. Cet article explique comment identifier un problème de temps de peinture de la page et comment utiliser ce nouvel outil pour détecter les goulots d'étranglement des performances de peinture.
Examiner le temps de chargement de votre page
Vous avez donc remarqué que le défilement de votre page n'était pas fluide. C'est ainsi que vous commenceriez à résoudre le problème. Pour notre exemple, nous utiliserons la page de démonstration Things We Left On The Moon (Choses que nous avons laissées sur la Lune) de Dan Cederholm.
Vous ouvrez l'outil d'inspection du Web, démarrez un enregistrement de la chronologie et faites défiler votre page vers le haut et vers le bas. Vous examinez ensuite les chronologies verticales, qui vous indiquent ce qui s'est passé dans chaque frame.
Si vous constatez que la plupart du temps est consacré au dessin (grandes barres vertes au-dessus de 60 FPS), vous devez examiner de plus près pourquoi cela se produit. Pour examiner vos peintures, utilisez le paramètre Afficher les rectangles de peinture de l'outil Web Inspector (icône en forme de roue dentée en bas à droite de l'outil Web Inspector). Les régions où 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 entraîne le calcul de la mise en page de la page par Chrome.
- Les animations sont diffusées et mises à jour dans un cycle basé sur les images.
- Les interactions de l'utilisateur, comme le survol, entraînent des modifications de style sur certains éléments.
- Toute autre opération qui entraîne la modification de la mise en page de la page.
En tant que développeur, vous devez être conscient des repeinturages qui se produisent sur votre page.
Pour ce faire, il est judicieux d'examiner les rectangles de peinture. 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 lorsque vous faites défiler la page, ce qui n'est pas bon. Dans ce cas précis, cela est dû au style CSS background-attachment:fixed, qui fait que l'image de fond de la page reste à la même position tandis que le contenu de la page se déplace par-dessus lorsque vous faites défiler la page.
Si vous constatez que les retouches couvrent une grande surface et/ou prennent beaucoup de temps, deux options s'offrent à vous:
- Vous pouvez essayer de modifier la mise en page de la 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'étaient pas visibles lorsque vous faites défiler la page vers le bas. Toutefois, il arrive que Chrome ait besoin de 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 provoquer ces remises en peinture. - Si vous souhaitez conserver la mise en page de votre page, vous pouvez essayer de réduire les coûts de peinture des zones à repeindre. Le coût de peinture n'est pas le même pour tous les styles CSS. Certains ont un impact faible, d'autres un impact important. Déterminer les coûts de peinture de certains styles peut représenter beaucoup de travail. Pour ce faire, activez et désactivez les styles dans le panneau "Éléments", puis observez la différence dans l'enregistrement de la chronologie. Pour ce faire, vous devez passer d'un panneau à l'autre et effectuer de nombreux enregistrements. C'est là que le mode de peinture continue entre en jeu.
Mode de peinture continue
Le mode de peinture continue est un outil qui vous aide à identifier les éléments coûteux de la page. Il met la page dans un état de recoloration permanent, affichant un compteur du travail de peinture en cours. Vous pouvez ensuite masquer des éléments et modifier des styles, en surveillant le compteur, afin de déterminer ce qui est lent.
Configuration
Pour utiliser le mode de 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 définitivement à l'aide du paramètre Composition GPU sur toutes les pages dans about:flags.
Premiers pas
Le mode de peinture continue peut être activé via la case à cocher Activer la remise en peinture continue de la page dans les paramètres de l'outil d'inspection du navigateur (icône en forme de roue dentée en bas à droite de l'outil d'inspection du navigateur).
Le petit écran en haut à droite affiche les temps de peinture mesurés en millisecondes. Plus précisément, il indique les éléments suivants:
- Dernier temps de peinture mesuré à gauche.
- Valeurs minimale et maximale du graphique actuel à droite.
- Graphique à barres affichant l'historique des 80 derniers frames en bas (la ligne du graphique indique 16 ms comme point de référence).
Les mesures du temps de peinture dépendent de la résolution de l'écran, de la taille de la fenêtre et du matériel sur lequel Chrome s'exécute. Sachez que ces éléments sont susceptibles d'être différents pour vos utilisateurs.
Workflow
Voici comment utiliser le mode de peinture continue pour rechercher les éléments et les styles qui ajoutent beaucoup de coûts de peinture:
- Ouvrez les paramètres de l'outil Web Inspector, puis cochez la case Activer la remise en peinture continue de la page.
- Accédez au panneau "Elements" (É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 aide, pour activer ou 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 tout en regardant le graphique, pour trouver le style qui provoque le ralentissement.
- Modifiez ce style et enregistrez une autre chronologie pour vérifier si cela a amélioré les performances de votre page.
L'animation ci-dessous montre l'activation/deactivation des styles et leur 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 peinture. L'utilisation 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 les optimiser. Par conséquent, si vous avez un élément qui subit de nombreuses retouches, comme dans l'exemple, vous devez éviter cette combinaison.
Remarques
Le mode de peinture continue redessine l'intégralité de la page visible. Ce n'est généralement pas le cas lorsque vous consultez une page Web. Le défilement ne peint 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 redessinée. Vérifiez donc avec un autre enregistrement de la chronologie si vos améliorations de style ont réellement eu un impact sur les temps de peinture 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 peinture. Nous vous encourageons à utiliser ces fonctionnalités en général. Elles sont géniales et nous sommes ravis qu'elles soient enfin disponibles. Toutefois, il est important de savoir quand et où les utiliser.
Évitez de les utiliser dans les zones où il y a beaucoup de retouches et évitez de les utiliser de manière excessive en général.
Démo
Cliquez ci-dessous pour voir une démonstration dans laquelle Paul Irish utilise la peinture continue pour identifier une opération de peinture particulièrement coûteuse.