Cette page a été traduite par l'API Cloud Translation.

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

Kayce Basques

Les performances d'exécution correspondent aux performances de votre page lorsqu'elle s'exécute, par opposition au chargement. Ce tutoriel vous explique comment utiliser le panneau "Performances" des outils pour les développeurs Chrome pour analyser les performances d'exécution. En ce qui concerne le modèle RAIL, les compétences que vous apprenez dans ce tutoriel sont utiles pour analyser les phases de réponse, d'animation et d'inactivité de votre page.

Commencer

Dans ce tutoriel, nous allons utiliser le panneau Performances pour identifier un goulot d'étranglement des performances sur une page en ligne. Pour commencer :

Ouvrez Google Chrome en mode navigation privée. Le mode navigation privée garantit que Chrome s'exécute dans un état propre. Par exemple, si vous avez installé de nombreuses extensions, elles peuvent créer du bruit dans vos mesures de performances.
Chargez la page suivante dans votre fenêtre de navigation privée. Il s'agit de la démonstration que vous allez profiler. La page affiche un tas de petits carrés bleus qui montent et descendent.

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.

Remarque: Pour le reste des captures d'écran, les outils de développement sont détachés dans une fenêtre distincte afin que vous puissiez mieux voir leur contenu.

Simuler un processeur mobile

Les appareils mobiles disposent de beaucoup moins de puissance de processeur que les ordinateurs de bureau et les ordinateurs portables. Chaque fois que vous effectuez un profilage d'une page, utilisez la limitation du processeur pour simuler les performances de votre page sur les appareils mobiles.

Dans DevTools, cliquez sur l'onglet Performances.
Assurez-vous que la Captures d'écran est activée.
Cliquez sur Paramètres de capture . DevTools affiche les paramètres liés à la manière dont il capture les métriques de performances.
Pour CPU (Processeur), sélectionnez 4 fois plus lent. DevTools limite votre processeur pour qu'il soit quatre fois plus lent que d'habitude.

Remarque: Lorsque vous testez d'autres pages, si vous souhaitez vous assurer qu'elles fonctionnent correctement sur les appareils mobiles bas de gamme, définissez le débit limité du processeur sur 20 fois plus lent. Cette démonstration ne fonctionne pas bien avec un ralentissement de 20 fois, c'est pourquoi elle n'utilise qu'un ralentissement de 4 fois à des fins pédagogiques.

Configurer la démonstration

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 particulière.

Continuez à cliquer sur Ajouter 10 jusqu'à ce que les carrés bleus se déplacent beaucoup plus lentement qu'auparavant. Sur une machine haut de gamme, cela peut prendre environ 20 clics.
Cliquez sur Optimiser. Les carrés bleus doivent se déplacer plus rapidement et plus fluidement.

Remarque :Si vous ne constatez pas de différence notable entre les versions optimisée et non optimisée, essayez de cliquer sur Soustraire 10 plusieurs fois, puis réessayez. Si vous ajoutez trop de carrés bleus, vous allez simplement saturer le processeur et vous ne verrez aucune différence majeure entre les résultats des deux versions.
Cliquez sur Désoptimiser. Les carrés bleus se déplacent plus lentement et avec plus de saccades.

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 en un même temps. Enregistrez une session dans le panneau Performances pour apprendre à détecter le goulot d'étranglement des performances dans la version non optimisée.

Dans les outils de développement, cliquez sur Enregistrer . DevTools capture les métriques de performances pendant l'exécution de la page.
Patientez pendant quelques secondes.
Cliquez sur Arrêter. DevTools arrête l'enregistrement, traite les données, puis affiche les résultats dans le panneau Performances.

Wow, c'est une quantité de données impressionnante. Ne vous inquiétez pas, vous comprendrez bientôt.

Analyser les résultats

Une fois que vous avez un enregistrement des performances, vous pouvez analyser dans quelle mesure les performances de la page sont mauvaises et en trouver la ou les causes.

Analyser les images par seconde

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

Examinez le graphique FPS. Chaque fois qu'une barre rouge s'affiche au-dessus de FPS, cela signifie que le framerate a chuté tellement bas qu'il nuit probablement à l'expérience utilisateur.
Sous le graphique FPS, vous trouverez le graphique CPU. Les couleurs du graphique CPU correspondent à celles de l'onglet Récapitulatif, en bas du panneau Performances. Le fait que le graphique du processeur soit entièrement coloré signifie que le processeur a été utilisé à son maximum pendant l'enregistrement. Chaque fois que vous constatez que le processeur est saturé pendant de longues périodes, cela vous indique que vous devez trouver des moyens de réduire la charge de travail.
Pointez 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 la souris vers la gauche et vers la droite pour revoir l'enregistrement. Cette opération s'appelle "scrub" (nettoyage) et est utile pour analyser manuellement la progression des animations.
Dans la section Cadres, pointez sur l'un des carrés verts. DevTools affiche les FPS pour ce frame particulier. Chaque frame est probablement bien en dessous de la cible de 60 FPS.

Bien sûr, avec cette démonstration, il est assez évident que la page ne fonctionne pas bien. Toutefois, dans des scénarios réels, cela peut ne pas être si clair. Il est donc utile de disposer de tous ces outils pour effectuer des mesures.

Bonus: Ouvrir le compteur de FPS

Le compteur de FPS est un autre outil pratique. Il fournit des estimations en temps réel des FPS pendant l'exécution de la page.

Appuyez sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux) pour ouvrir le menu de commande.
Commencez à saisir Rendering dans le menu de commande, puis sélectionnez Afficher le rendu.
Dans le panneau Affichage, activez Afficher les statistiques d'affichage. Une nouvelle superposition s'affiche en haut à droite de votre vue.
Désactivez le compteur de FPS et appuyez sur Échap pour fermer le panneau 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 question suivante à laquelle répondre est: pourquoi ?

Notez l'onglet Summary (Résumé). Si aucun événement n'est sélectionné, cet onglet affiche une répartition de l'activité. La page a passé la majeure partie de son temps à s'afficher. Étant donné que les performances sont l'art de faire moins de travail, votre objectif est de réduire le temps consacré au rendu.
Développez la section Principal. DevTools affiche un graphique en forme de 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 ordonnées représente la pile d'appels. Lorsque vous voyez des événements empilés les uns sur les autres, cela signifie que les événements situés en haut ont provoqué les événements situés en bas.
L'enregistrement contient beaucoup de données. Pour zoomer sur un seul événement Animation Frame Fired, cliquez de manière prolongée sur la section Overview (Présentation), qui inclut les graphiques FPS (FPS), CPU (Processeur) et NET (Réseau), puis faites glisser la souris. La section Principale et l'onglet Récapitulatif n'affichent que les informations de la partie sélectionnée de l'enregistrement.

Conseil :Vous pouvez également utiliser les touches WASD pour naviguer dans l'enregistrement. Mettez en surbrillance la section Principale en cliquant sur son arrière-plan ou en sélectionnant un événement, puis appuyez sur W pour faire un zoom avant, sur S pour faire un zoom arrière, sur A pour faire défiler l'écran vers la gauche ou sur D pour le faire défiler vers la droite.
Notez le triangle rouge en haut à droite des événements Task (Tâche) et de mise en page. Chaque fois qu'un triangle rouge s'affiche, cela signifie qu'un problème est susceptible d'être associé à cet événement. Un triangle rouge sur une tâche signifie qu'il s'agissait d'une tâche longue.
Cliquez sur l'événement Animation Frame Fired (Cadre d'animation déclenché). L'onglet Résumé affiche désormais des informations sur cet événement. Cliquez sur le lien à côté de Initiated by (Initiaté par) pour que DevTools mette en surbrillance l'événement qui a déclenché l'événement Animation Frame Fired (Cadre d'animation déclenché). Notez également le lien app.update @. Cliquez dessus pour accéder à la ligne correspondante dans le code source.

Remarque: Après avoir sélectionné un événement, utilisez les touches fléchées pour sélectionner les événements à côté.
Sous l'événement app.update, vous trouverez plusieurs événements violets. S'ils étaient plus larges, il semblerait que chacun d'eux soit associé à un triangle rouge. Cliquez maintenant sur l'un des événements Mise en page violets. DevTools fournit plus d'informations sur l'événement dans l'onglet Récapitulatif. En effet, un avertissement s'affiche concernant les reflows forcés (autre terme pour "mise en page").
Dans l'onglet Récapitulatif, cliquez sur le lien à côté de app.update @ sous Cadre d'animation demandé. DevTools vous redirige vers la ligne de code qui a forcé la mise en page.

Remarque: Le problème avec ce code est qu'à chaque frame d'animation, il modifie le style de chaque carré, puis interroge la position de chaque carré sur la page. Étant donné que les styles ont changé, le navigateur ne sait pas si la position de chaque carré a changé. Il doit donc recomposer le carré pour calculer sa position. Pour en savoir plus, consultez Éviter les mises en page synchrones forcées.

Ouf ! C'était beaucoup à assimiler, mais vous disposez désormais d'une base solide pour le workflow de base d'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 Optimiser dans la démonstration pour activer le code optimisé, effectuez un nouvel enregistrement des performances, puis analysez les résultats. De l'amélioration du frame rate à la réduction du nombre d'événements dans le graphique en forme de flamme de la section Principale, vous pouvez constater que la version optimisée de l'application effectue beaucoup moins de travail, ce qui améliore ses performances.

Remarque:Même cette version optimisée n'est pas très efficace, car elle manipule toujours la propriété top de chaque carré. Une meilleure approche consiste à s'en tenir aux propriétés qui n'affectent que la composition. Pour en savoir plus, consultez Utiliser des modifications de transformation et d'opacité pour les animations.

Étapes suivantes

Le modèle RAIL est la base de la compréhension des performances. Ce modèle vous indique les métriques de performances les plus importantes pour vos utilisateurs. Pour en savoir plus, consultez Mesurer les performances avec le modèle RAIL.

Pour vous familiariser avec le panneau "Performances", entraînez-vous. Essayez de créer un profil de vos propres pages et d'analyser les résultats. Si vous avez des questions concernant vos résultats, ouvrez une question StackOverflow taguée avec google-chrome-devtools. Si possible, incluez des captures d'écran ou des liens vers des pages reproductibles.

Pour devenir un expert des performances d'exécution, vous devez apprendre comment le navigateur traduit le code HTML, CSS et JavaScript en pixels sur un écran. Le meilleur point de départ est l'aperçu des performances de rendu. L'anatomie d'un frame fournit des informations encore plus détaillées.

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 ciblée du panneau "Performances". Il ne s'agit cependant que de l'un des nombreux goulots d'étranglement que vous pouvez rencontrer. Le reste de la série sur les performances de rendu contient de nombreux conseils pour améliorer divers aspects des performances d'exécution, par exemple: