Le panneau "Timeline" des outils de développement a toujours été le premier point d'accès à l'optimisation des performances. Cette vue d'ensemble centralisée de l'activité de votre application vous permet d'analyser le temps consacré au chargement, à la création de scripts, à l'affichage et à la peinture. Récemment, nous avons amélioré l'instrumentation dans Vos trajets pour vous offrir une vue plus détaillée des performances de votre application.
Nous avons ajouté les fonctionnalités suivantes:
- le profileur JavaScript intégré. (Graphique de type "flamme" inclus !)
- lecteur de cadres pour vous aider à visualiser les couches composites.
- Profileur de peinture pour accéder à des informations détaillées sur l'activité de peinture du navigateur.
Notez que l'utilisation des options de capture Paint décrites dans cet article entraîne une altération des performances. Par conséquent, n'activez-les que lorsque vous le souhaitez.
Profileur JavaScript intégré
Si vous avez déjà parcouru le panneau Profils, vous connaissez probablement le Profileur de processeur JavaScript. Cet outil mesure le temps d'exécution consacré à vos fonctions JavaScript. En affichant vos profils JavaScript avec le graphique de flammes, vous pouvez visualiser l'évolution de votre traitement JavaScript au fil du temps.
Vous pouvez désormais obtenir cette répartition précise de votre exécution JavaScript dans le panneau Timeline (Historique). En sélectionnant l'option de capture Profileur JS, vous pouvez voir vos piles d'appels JavaScript dans la timeline avec d'autres événements du navigateur. L'ajout de cette fonctionnalité à la timeline permet de simplifier votre workflow de débogage. Mais surtout, il vous permet d'afficher votre code JavaScript en contexte et d'identifier les parties de votre code qui ont une incidence sur le temps de chargement et l'affichage des pages.
En plus du profileur JavaScript, nous avons également intégré une vue "Graphique de flammes" dans le panneau Timeline (Historique). Vous pouvez désormais afficher l'activité de votre application sous la forme de la cascade d'événements classique ou d'un graphique de type "flamme". L’icône Graphique de flammes vous permet de basculer entre ces deux vues.
Visionneuse de frames
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 à bon escient, les couches permettent d'éviter d'avoir à repeindre des produits coûteux et d'améliorer considérablement les performances. Cependant, il n'est souvent pas évident de prévoir la manière dont le navigateur composera votre contenu. La nouvelle option de capture Paint de Timeline vous permet de visualiser des couches composites pour chaque image d'un enregistrement.
Lorsque vous sélectionnez une barre de cadre grise au-dessus du thread principal, son panneau Layers (Calques) fournit un modèle visuel des calques qui composent votre application.
Vous pouvez zoomer sur le modèle des calques, le faire pivoter et le faire glisser pour en explorer le contenu. Passez la souris 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 fonctionnalités vous montrent ce qui a été promu dans un calque. Si vous sélectionnez un calque, vous pouvez également voir pourquoi il a été mis en avant dans la ligne intitulée Motifs de la composition.
Profileur de peinture
Dernier point, et non des moindres, nous avons ajouté le Profileur de peinture pour vous aider à identifier les à-coups causés par les peintures coûteuses. Cette fonctionnalité enrichit la chronologie avec 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 réellement peints.
Si vous voulez vraiment en savoir plus, passez au volet Paint Profiler (Profileur de peinture). Ce profileur vous indique les commandes de dessin exactes que le navigateur a exécutées pour la peinture sélectionnée. Pour vous aider à 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 Éléments.
La mini-chronologie située en haut du volet vous permet de lire le processus de peinture et d'identifier les opérations coûteuses pour 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 des barres indique la durée de l'appel. Par conséquent, examiner les barres hautes peut vous aider à comprendre ce qui était coûteux pour une peinture en particulier.
Profil et bénéfices !
En matière d'optimisation des performances, la connaissance du navigateur peut s'avérer extrêmement utile. En vous offrant un aperçu des coulisses, ces mises à jour de Vos trajets aident à clarifier la relation entre votre code et les processus d'affichage de Chrome. Essayez ces nouvelles options dans la chronologie et découvrez ce que les outils pour les développeurs Chrome peuvent faire pour améliorer votre flux de travail.