Analyser les performances de l'environnement d'exécution

Les performances d'exécution correspondent aux performances de votre page lorsqu'elle est en cours d'exécution, et non lors du chargement. Ce tutoriel vous explique comment utiliser le panneau "Performances des outils pour les développeurs Chrome" afin d'analyser les performances d'exécution. Dans le cadre du modèle RAIL, les compétences acquises dans ce tutoriel sont utiles pour analyser les phases de réponse, d'animation et d'inactivité de votre page.

Premiers pas

Dans ce tutoriel, vous allez ouvrir les outils de développement sur une page en ligne et utiliser le panneau "Performances" pour identifier un goulot d'étranglement qui affecte les performances sur la page.

1. Ouvrez Google Chrome en mode navigation privée. Le mode navigation privée garantit que Chrome fonctionne correctement. Par exemple, si de nombreuses extensions sont installées, elles peuvent créer du bruit dans vos mesures de performances.

2. Chargez la page suivante dans votre fenêtre de navigation privée. Voici la démonstration que vous allez profiler. La page présente une série de petits carrés bleus se déplaçant vers le haut et vers le bas.

   https://googlechrome.github.io/devtools-samples/jank/

3. Appuyez sur Commande+Option+I (Mac) ou Ctrl+Maj+I (Windows, Linux) pour ouvrir les Outils de développement.

   

   Figure 1 : Démonstration (à gauche) et outils de développement (à droite)

Simuler un processeur mobile

Les appareils mobiles ont une puissance de processeur bien inférieure à celle des ordinateurs de bureau et des ordinateurs portables. Lorsque vous profilez une page, utilisez la limitation du processeur pour simuler ses performances sur les appareils mobiles.

1. Dans les outils de développement, cliquez sur l'onglet Performances.
2. Assurez-vous que la case Captures d'écran est cochée.
3. Cliquez sur Capture Settings (Paramètres de capture) . Les outils de développement révèlent les paramètres liés à la collecte des métriques de performances.

4. Dans Processeur, sélectionnez Ralentissement x2. Les outils de développement limitent votre processeur de sorte qu'il soit deux fois plus lent que d'habitude.

   

   Figure 2 : Limitation du processeur, avec un contour bleu

Configurer la démo

Il est difficile de créer une démonstration des performances d'exécution qui fonctionne de manière cohérente pour tous les lecteurs de ce site Web. Cette section vous permet de personnaliser la démonstration pour vous assurer que votre expérience est relativement cohérente avec les captures d'écran et les descriptions que vous voyez dans ce tutoriel, quelle que soit votre configuration.

1. Continuez à cliquer sur Ajouter 10 jusqu'à ce que les carrés bleus se déplacent beaucoup plus lentement qu'auparavant. Sur un téléphone haut de gamme, cette opération peut nécessiter une vingtaine de clics.

2. Cliquez sur Optimiser. Les carrés bleus doivent se déplacer plus rapidement et plus facilement.

3. Cliquez sur Annuler l'optimisation. Les carrés bleus se déplacent plus lentement et avec plus d'à-coups.

Enregistrer les performances d'exécution

Lorsque vous avez exécuté la version optimisée de la page, les carrés bleus se déplacent plus rapidement. Pourquoi ? Les deux versions sont censées déplacer chaque carré de la même quantité d'espace dans le même laps de temps. Effectuez un enregistrement dans le panneau "Performances" pour découvrir comment détecter le goulot d'étranglement qui affecte les performances dans la version non optimisée.

1. Dans les outils de développement, cliquez sur Enregistrer . Les outils de développement capturent les métriques de performances lors de l'exécution de la page.

   

   Figure 3: Profiler la page

2. Patientez pendant quelques secondes.

3. Cliquez sur Arrêter. Les outils de développement arrêtent l'enregistrement, traitent les données, puis affichent les résultats dans le panneau "Performances".

   

   Figure 4: Résultats du profil

C’est une quantité écrasante de données. Ne vous inquiétez pas, tout ira bientôt de plus en plus.

Analyser les résultats

Une fois que vous disposez d'un enregistrement des performances de la page, vous pouvez mesurer leurs performances et en identifier la ou les causes.

Analyser les frames par seconde

La métrique principale pour mesurer les performances d'une animation est le nombre d'images par seconde (FPS). Les utilisateurs sont satisfaits lorsque les animations s'exécutent à 60 FPS.

1. Consultez le graphique FPS. Chaque fois que vous voyez une barre rouge au-dessus de FPS, cela signifie que la fréquence d'images est si faible que cela nuit probablement à l'expérience utilisateur. En général, plus la barre verte est élevée, plus le FPS est élevé.

   

   Figure 5: Graphique du FPS, avec contour bleu

2. Sous le graphique FPS, vous voyez le graphique CPU (Processeur). Les couleurs du graphique CPU correspondent à celles de l'onglet Summary (Résumé), en bas du panneau "Performance". Le fait que le graphique CPU soit en couleur signifie que le CPU a été atteint au maximum pendant l'enregistrement. Chaque fois que vous constatez que le processeur est au maximum pendant de longues périodes, cela vous indique de trouver des moyens de réduire la charge de travail.

   

   Figure 6: Le graphique sur le processeur et l'onglet "Summary" (Résumé) sont encadrés en bleu.

3. Passez la souris sur les graphiques FPS, CPU ou NET. Les outils de développement affichent une capture d'écran de la page à ce moment-là. Déplacez votre souris vers la gauche et la droite pour relire l'enregistrement. Cette opération, appelée "frottement", est utile pour analyser manuellement la progression des animations.

   

   Figure 7: Consultation d'une capture d'écran de la page autour des 2 000 ms de l'enregistrement

4. Dans la section Images, passez la souris sur l'un des carrés verts. Les outils de développement vous indiquent le FPS pour ce frame. Chaque image est probablement bien en dessous de l'objectif de 60 FPS.

   

   Figure 8: Passer la souris sur un cadre

Bien entendu, avec cette démonstration, il est assez évident que la page ne fonctionne pas bien. Mais dans des scénarios réels, ce n'est peut-être pas aussi clair, donc disposer de tous ces outils pour effectuer des mesures s'avère utile.

Bonus: ouvrir l'outil de mesure FPS

L'outil de mesure FPS est également très pratique. Il fournit des estimations en temps réel du FPS pendant l'exécution de la page.

1. Appuyez sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux) pour ouvrir le menu de commandes.
2. Commencez à saisir Rendering dans le menu de commande, puis sélectionnez Show Rendering (Afficher le rendu).

3. Dans l'onglet Rendu, activez Outil de mesure FPS. Une nouvelle superposition apparaît en haut à droite de la fenêtre d'affichage.

   

   Figure 9: Compteur de FPS

4. Désactivez l'outil de mesure FPS et appuyez sur Échap pour fermer l'onglet Rendu. Vous ne l'utiliserez pas dans ce tutoriel.

Identifier le goulot d'étranglement

Maintenant que vous avez mesuré et vérifié que l'animation ne fonctionne pas bien, la prochaine question à laquelle vous devez répondre est la suivante: pourquoi ?

1. Notez l'onglet récapitulatif. Si aucun événement n'est sélectionné, cet onglet affiche le détail des activités. La page a passé la majeure partie de son temps d'affichage. Étant donné que les performances sont l'art de réduire le travail, votre objectif est de réduire le temps consacré au rendu.

   

   Figure 10: onglet "Summary" (Résumé) encadré en bleu

2. Développez la section Main (Principale). Les outils de développement affichent un graphique de type "flamme" de l'activité sur le thread principal au fil du temps. L'axe des abscisses représente l'enregistrement au fil du temps. Chaque barre représente un événement. Une barre plus large signifie que l'événement a pris plus de temps. L'axe des y représente la pile d'appel. Lorsque vous voyez des événements empilés les uns sur les autres, cela signifie que les événements les plus élevés ont causé les événements les moins élevés.

   

   Figure 11: Section principale, encadrée en bleu

3. L'enregistrement contient beaucoup de données. Faites un zoom avant sur un seul événement Animation Frame Fired en cliquant sur l'élément Overview (Aperçu) et en le faisant glisser, puis en le faisant glisser. Il s'agit de la section qui inclut les graphiques FPS, CPU et NET. La section Main (Principale) et l'onglet Summary (Résumé) n'affichent que des informations sur la partie sélectionnée de l'enregistrement.

   

   Figure 12: Zoom avant sur un seul événement "Frame déclenché par l'animation"

4. Notez le triangle rouge en haut à droite de l'événement Animation Frame Fired (Frame d'animation déclenchée). Chaque fois qu'un triangle rouge s'affiche, cela signifie qu'il y a peut-être un problème lié à cet événement.

5. Cliquez sur l'événement Cadre d'animation déclenché. L'onglet Summary (Résumé) affiche à présent des informations sur cet événement. Notez le lien permettant d'afficher les résultats. Cliquez sur cette option pour que les outils de développement mettent en surbrillance l'événement à l'origine de l'événement Animation Frame Fired. Notez également le lien app.js:94. Cliquez dessus pour accéder à la ligne correspondante dans le code source.

   

   Figure 13: Informations supplémentaires sur l'événement "Frame déclenché par l'animation"

6. Plusieurs événements violets apparaissent sous l'événement app.update. S'ils étaient plus larges, il semble que chacun ait un triangle rouge. Cliquez maintenant sur l'un des événements violets Layout (Mise en page). Les outils de développement fournissent plus d'informations sur l'événement dans l'onglet Summary (Résumé). En effet, un avertissement s'affiche concernant les ajustements de mise en page forcés (autre mot pour "mise en page").

7. Dans l'onglet Résumé, cliquez sur le lien app.js:70 sous Mise en page forcée. Les outils de développement vous permettent d'accéder à la ligne de code qui force la mise en page.

   

   Figure 13: Ligne de code à l'origine de la mise en page forcée

Ouf ! Cela représente beaucoup d'éléments à assimiler, mais vous disposez désormais d'une base solide pour le workflow de base pour l'analyse des performances d'exécution. Bravo !

Bonus: analyser la version optimisée

À l'aide des workflows et des outils que vous venez d'apprendre, cliquez sur Optimize dans la démonstration pour activer le code optimisé, enregistrer un autre enregistrement des performances, puis analyser les résultats. De l'amélioration de la fréquence de frames à la réduction du nombre d'événements dans le graphique de flammes de la section Main, vous pouvez constater que la version optimisée de l'application effectue beaucoup moins de travail, ce qui améliore les performances.

Étapes suivantes

Le modèle RAIL est à la base de l'analyse des performances. Ce modèle vous apprend les métriques de performances les plus importantes pour vos utilisateurs. Pour en savoir plus, consultez la page Mesurer les performances avec le modèle RAIL.

Pour vous familiariser avec le panneau "Performances", vous devez vous entraîner. Essayez de profiler vos propres pages et d'analyser les résultats. Si vous avez des questions sur vos résultats, ouvrez une question Stack Overflow associée au tag google-chrome-devtools. Si possible, incluez des captures d'écran ou des liens vers des pages reproductibles.

Pour devenir un expert en performances d'exécution, vous devez apprendre comment le navigateur traduit le code HTML, CSS et JS en pixels à l'écran. Nous vous recommandons de commencer par consulter la présentation des performances d'affichage. The Anatomie d'un cadre approfondit encore les sujets.

Enfin, il existe de nombreuses façons d'améliorer les performances d'exécution. Ce tutoriel s'est concentré sur un goulot d'étranglement d'animation particulier pour vous proposer une visite guidée du panneau "Performances", mais il ne s'agit que d'un des nombreux goulots d'étranglement que vous pouvez rencontrer. Le reste de la série sur les performances d'affichage contient de nombreux conseils utiles pour améliorer divers aspects des performances d'exécution, tels que:

• Optimiser l'exécution JS
• Réduisez l'ampleur et la complexité des calculs de style
• Éviter les mises en page volumineuses et complexes, et le thrashing de la mise en page
• Simplifier et peindre des zones
• Conserver les propriétés réservées au compositeur et gérer le nombre de calques
• Déclencher vos gestionnaires d'entrées