Les performances d'exécution correspondent aux performances de votre page lorsqu'elle est en cours d'exécution et non lors de son chargement. Dans ce tutoriel, vous allez apprendre à utiliser le panneau "Performances des outils pour les développeurs Chrome" afin d'analyser les performances d'exécution. En ce qui concerne le 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.
Commencer
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 de la page.
- Ouvrez Google Chrome en mode navigation privée. Le mode navigation privée garantit le fonctionnement normal de Chrome. Par exemple, si de nombreuses extensions sont installées, elles peuvent créer du bruit dans vos mesures de performances.
Affichez la page suivante dans la fenêtre de navigation privée. Voici la démonstration que vous allez profiler. La page montre de nombreux petits carrés bleus qui se déplacent vers le haut et vers le bas.
https://googlechrome.github.io/devtools-samples/jank/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 beaucoup moins élevée que les ordinateurs de bureau et les ordinateurs portables. Lorsque vous profilez une page, utilisez la limitation du processeur pour simuler ses performances sur les appareils mobiles.
- Dans les outils de développement, cliquez sur l'onglet Performances.
- Assurez-vous que la case Captures d'écran est cochée.
- 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. 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.
- Continuez à cliquer sur Ajouter 10 jusqu'à ce que les carrés bleus se déplacent sensiblement plus lentement qu'avant. Sur un téléphone haut de gamme, cette opération peut prendre environ 20 clics.
Cliquez sur Optimiser. Les carrés bleus doivent se déplacer plus rapidement et plus facilement.
Cliquez sur Annuler l'optimisation. Les carrés bleus se déplacent plus lentement et présentent à nouveau des à-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. Enregistrez 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.
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
Patientez pendant quelques secondes.
Cliquez sur Arrêter. Les outils de développement arrêtent l'enregistrement, traite les données, puis affiche 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 ses performances et en trouver la cause.
Analyser les frames par seconde
La principale métrique permettant de 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.
Consultez le graphique FPS. Chaque fois qu'une barre rouge s'affiche 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 des FPS, avec contours bleus
Sous le graphique FPS, vous pouvez voir le graphique CPU (Processeur). Les couleurs du graphique CPU correspondent aux couleurs 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 votre charge de travail.
Figure 6: Graphique du processeur et onglet "Résumé", encadrés en bleu
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 revoir l'enregistrement. C'est ce qu'on appelle la barre de lecture. Il est utile pour analyser manuellement la progression des animations.
Figure 7: Visionnage d'une capture d'écran de la page vers les 2 000 ms de l'enregistrement
Dans la section Images, passez la souris sur l'un des carrés verts. Les outils de développement vous indiquent le FPS de l'image en question. Chaque image est probablement bien en dessous de la cible de 60 FPS.
Figure 8: Passer la souris sur un cadre
Bien entendu, avec cette démonstration, il est assez évident que la page n'est pas performante. 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 du FPS
L'outil de mesure FPS est un autre outil pratique. Il fournit des estimations en temps réel du FPS lorsque la page s’exécute.
- Appuyez sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux) pour ouvrir le menu Commandes.
- Commencez à saisir
Renderingdans le menu de commande et sélectionnez Show Rendering (Afficher le rendu). Dans l'onglet Rendu, activez FPS Meter. Une nouvelle superposition apparaît en haut à droite de la fenêtre d'affichage.
Figure 9: Outil de mesure du FPS
Désactivez l'option FPS Meter 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 n'est pas performante, la prochaine question à laquelle vous devez répondre est la suivante: pourquoi ?
Notez l'onglet de résumé. Si aucun événement n'est sélectionné, cet onglet affiche le détail de l'activité. La page s'affiche en grande partie. Puisque les performances sont l'art de réduire le travail, votre objectif est de réduire le temps consacré aux opérations de rendu.
Figure 10: Onglet "Summary" (Résumé) avec contour bleu
Développez la section Main (Principale). Les outils de développement affichent un graphique de type "flamme" représentant l'activité du 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 ordonnées 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 du haut sont à l'origine des événements les plus bas.
Figure 11: Section principale, encadrée en bleu
L'enregistrement contient beaucoup de données. Effectuez un zoom avant sur un seul événement Animation Frame Fired en cliquant sur l'élément Overview (Aperçu), puis en le faisant glisser, qui contient les graphiques FPS, CPU et NET. La section Main (Principale) et l'onglet Summary (Résumé) n'affichent que les informations de la partie sélectionnée de l'enregistrement.
Figure 12: Zoom avant sur un seul événement de frame d'animation déclenché
Notez le triangle rouge en haut à droite de l'événement Image d'animation déclenchée. Chaque triangle rouge vous avertit qu'il peut y avoir un problème lié à cet événement.
Cliquez sur l'événement Image d'animation déclenchée. L'onglet Summary (Résumé) affiche à présent des informations sur cet événement. Notez le lien révéler. Cliquez dessus pour que les outils de développement mettent en surbrillance l'événement qui a déclenché 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éclencheur déclenché"
Plusieurs événements violets apparaissent sous l'événement app.update. S'ils étaient plus larges, on dirait que chacun pourrait avoir un triangle rouge. Cliquez à présent 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 la mise en page).
Dans l'onglet Summary (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 a forcé la mise en page.
Figure 13: Ligne de code à l'origine de la mise en page forcée
Ouf ! Cela représente beaucoup de travail, mais vous disposez désormais d'une base solide dans le workflow de base pour analyser les 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 d'images à la réduction des événements dans le graphique de type "flamme" de la section Main, vous pouvez constater que la version optimisée de l'application effectue beaucoup moins de travail, ce qui se traduit par de meilleures performances.
Étapes suivantes
Le modèle RAIL constitue le fondement de l'analyse des performances. Ce modèle vous permet d'identifier les métriques de performances les plus importantes pour vos utilisateurs. Pour en savoir plus, consultez la section Mesurer les performances avec le modèle RAIL.
Pour améliorer votre confort d'utilisation 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 concernant vos résultats, ouvrez une question Stack Overflow associée au tag google-chrome-devtools. Incluez des captures d'écran ou des liens vers
des pages reproductibles, si possible.
Pour devenir un expert en performances d'exécution, vous devez apprendre comment le navigateur convertit le code HTML, CSS et JS en pixels à l'écran. Nous vous conseillons de commencer par consulter la page Présentation des performances d'affichage. The Anatomy Of A Frame (Anatomie d'un cadre) plonge encore plus dans les détails.
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 offrir 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
- Calculer un style moins complexe et plus complexe
- Éviter les mises en page volumineuses et complexes, et le thrashing de la mise en page
- Simplifier et réduire la peinture
- Conserver les propriétés compositeurs uniquement et gérer le nombre de calques
- Rejeter vos gestionnaires d'entrées