Le panneau "Timeline" des outils de développement a toujours été le meilleur point de départ pour optimiser les performances. Cet aperçu centralisé de l'activité de votre application vous aide à analyser le temps consacré au chargement, à l'écriture de script, au rendu et à la peinture. Nous avons récemment amélioré la fonctionnalité Vos trajets en ajoutant une instrumentation plus large afin que vous puissiez bénéficier d'une vue plus détaillée des performances de votre application.
Nous avons ajouté les fonctionnalités suivantes:
- Profileur JavaScript intégré. (Graphique de flammes inclus !)
- visionneuse de frames pour vous aider à visualiser des couches composées.
- paint profiler, pour afficher des vues détaillées de l'activité de peinture du navigateur.
Notez que l 'utilisation des options de capture Paint décrites dans cet article affecte les performances. Vous devez donc les activer uniquement lorsque vous le souhaitez.
Profileur JavaScript intégré
Si vous avez déjà travaillé dans le panneau Profiles (Profils), vous connaissez probablement le Profileur de processeur JavaScript. Cet outil mesure où le temps d'exécution est consacré à vos fonctions JavaScript. En affichant les profils JavaScript avec le graphique de flammes, vous pouvez visualiser l'évolution du traitement JavaScript.
Vous pouvez désormais obtenir cette répartition détaillée de votre exécution JavaScript dans le panneau Chronologie. En sélectionnant l'option de capture du Profileur JS, vous pouvez afficher vos piles d'appels JavaScript dans la timeline avec d'autres événements de navigateur. L'ajout de cette fonctionnalité dans la chronologie permet de simplifier le workflow de débogage. Mais surtout, elle vous permet d'afficher votre code JavaScript en contexte et d'identifier les parties de ce code qui influent sur le temps de chargement et l'affichage de la page.
En plus du profileur JavaScript, nous avons également intégré une vue "Graphique de flammes" dans le panneau Chronologie. Vous pouvez désormais afficher l'activité de votre application sous forme de cascade d'événements classique ou de graphique de flammes. L'icône Graphique de flammes vous permet de basculer entre ces deux vues.
Lecteur de frames
L'art de la composition des calques est un autre aspect du navigateur que les développeurs n'ont généralement pas vu. Lorsqu'elles sont utilisées avec parcimonie et avec précaution, les couches permettent d'éviter les repeintes coûteuses et d'améliorer considérablement les performances. Toutefois, il n'est souvent pas évident de prédire comment le navigateur va procéder à la composition de votre contenu. La nouvelle option de capture Paint de Timeline vous permet de visualiser des couches composées pour chaque image d'un enregistrement.
Lorsque vous sélectionnez une barre des cadres grise au-dessus du thread principal, le panneau Calques fournit un modèle visuel des calques qui composent votre application.
Vous pouvez zoomer, faire pivoter et faire glisser le modèle de couches pour explorer son contenu. Pointez sur un calque pour afficher sa position actuelle sur la page. Un clic droit sur un calque vous permet d'accéder au nœud correspondant dans le panneau Éléments. Ces éléments géographiques vous montrent ce qui a été promu dans un calque. Si vous sélectionnez un calque, vous pouvez également voir pourquoi il a été promu sur la ligne intitulée Raisons de la composition.
Profileur de peinture
Enfin, nous avons ajouté le profileur de peinture pour vous aider à identifier les à-coups causés par des peintures coûteuses. Cette fonctionnalité enrichit la timeline en y ajoutant plus de détails sur le travail effectué par Chrome lors des événements de peinture.
Pour commencer, il est désormais plus facile d'identifier le contenu visuel correspondant à chaque événement de peinture. Lorsque vous sélectionnez un événement "Peinture verte" dans la chronologie, le volet Détails affiche un aperçu des pixels qui ont été peints.
Si vous souhaitez vraiment vous lancer, passez au volet Paint Profiler (Profileur de peinture). Ce profileur vous montre les commandes de dessin exactes que le navigateur a exécutées pour le rendu sélectionné. Pour connecter ces commandes natives au contenu réel de votre application, vous pouvez effectuer un clic droit sur un appel draw* et accéder directement au nœud correspondant dans le panneau Elements (Éléments).
La mini-chronologie située en haut du volet vous permet de retracer le processus de rendu et d'identifier les opérations coûteuses à effectuer par le navigateur. Les opérations de dessin sont codées par couleur comme suit: rose (formes), bleu (bitmap), vert (texte) et violet (divers). La hauteur de la barre indique la durée de l'appel. Par conséquent, étudier les grandes barres peut vous aider à comprendre pourquoi une peinture particulière était coûteuse.
Profil et bénéfices !
Lorsqu'il s'agit d'optimiser les performances, la connaissance du navigateur peut être incroyablement efficace. Ces mises à jour de la timeline vous donnent un aperçu des coulisses, et vous aident à clarifier la relation entre votre code et les processus d'affichage de Chrome. Testez ces nouvelles options dans la chronologie et découvrez ce que les outils pour les développeurs Chrome peuvent faire pour améliorer votre workflow de chasse aux à-coups.