Informations de référence sur les fonctionnalités de performances

Cette page est une référence complète des fonctionnalités DevTools liées à l’analyse des performances.

Pour obtenir un tutoriel pas à pas sur l’analyse des performances d’une page à l’aide de l’outil Performance , consultez Analyser les performances du runtime (tutoriel) .

Les images de cette page montrent DevTools désinténu dans sa propre fenêtre dédiée. Pour en savoir plus sur le désadocrage de DevTools, consultez Undock DevTools dans une fenêtre distincte dans Modifier le placement devTools (Undock, Dock to bottom, Dock to left).

Contenu détaillé :

• Ouvrir l’outil Performance
• Enregistrer les performances
  • Enregistrer les performances du runtime
  • Performances de chargement des enregistrements
  • Capturer des captures d’écran lors de l’enregistrement
  • Forcer le garbage collection lors de l’enregistrement
  • Afficher les paramètres d’enregistrement
  • Désactiver les exemples JavaScript
  • Limiter le réseau lors de l’enregistrement
  • Limiter le processeur lors de l’enregistrement
  • Activer les statistiques du sélecteur CSS
  • Activer l’instrumentation de peinture avancée
• Annoter un enregistrement et le partager
  • Enregistrer et partager un enregistrement
  • Charger un enregistrement
• Effacer l’enregistrement précédent
• Analyser un enregistrement de performances
  • Obtenir des insights actionnables
  • Naviguer dans l’enregistrement
    • Utiliser les raccourcis clavier pour naviguer
    • Sélectionner une partie d’un enregistrement
    • Effectuer un zoom sur des parties d’un enregistrement et basculer entre les niveaux de zoom
    • Faire défiler un graphique à flammes longues
  • Activités de recherche
  • Modifier l’ordre des pistes et les masquer
  • Afficher main activité de thread
  • Lire le graphique de flammes
  • Suivre les initiateurs d’événements
  • Masquer les fonctions et leurs enfants dans le graphique de flammes
    • Ignorer les scripts dans le graphique de flammes
  • Afficher les activités d’une table
    • Activités racines
    • Onglet Bas vers le haut
    • Onglet Arborescence des appels
    • Onglet Journal des événements
  • Afficher les marqueurs de performances
  • Afficher les minutages personnalisés
  • Afficher les interactions
  • Afficher les décalages de disposition
  • Afficher les animations
  • Afficher l’activité GPU
  • Afficher l’activité raster
  • Analyser les images par seconde (FPS)
    • La section Frames
  • Afficher les demandes réseau
  • Afficher les métriques de mémoire
  • Afficher la durée d’une partie d’un enregistrement
  • Afficher une capture d’écran
  • Afficher les informations sur les couches
  • Afficher le profileur de peinture
  • Afficher les statistiques du sélecteur CSS
  • Afficher les messages entre les fenêtres, les iframes et les workers dédiés
• Analyser les performances de rendu avec l’outil Rendu
  • Afficher des images par seconde en temps réel avec le compteur FPS
  • Afficher les événements de peinture en temps réel avec Paint Flashing
  • Afficher une superposition de couches avec des bordures de couches
  • Rechercher les problèmes de performances de défilement en temps réel
  • Désactiver les polices locales
• Visualiser les fuites de mémoire (Outil de performances : case à cocher Mémoire)

Ouvrir l’outil Performance

Pour utiliser les sections de cette page, ouvrez l’outil Performance dans DevTools :

1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

2. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Performances . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils ().

Enregistrer les performances

Les sections ci-dessous décrivent comment enregistrer les performances d’une page web dans DevTools.

Enregistrer les performances du runtime

Pour analyser les performances d’une page web pendant son exécution (plutôt que pendant son chargement) :

1. Accédez à la page web que vous souhaitez analyser, telle que la démonstration de la Galerie de photos.

2. Dans DevTools, ouvrez l’outil Performance .

3. Cliquez sur le bouton Enregistrer ().

   

4. Interagissez avec la page pendant un certain temps. DevTools enregistre toutes les activités de page qui se produisent à la suite de vos interactions.

5. Cliquez à nouveau sur Enregistrer . Vous pouvez également cliquer sur Arrêter pour arrêter l’enregistrement.

   L’outil Performance affiche l’enregistrement.

Performances de chargement des enregistrements

Pour analyser les performances d’une page web pendant son chargement (plutôt que pendant son exécution) :

1. Accédez à la page web que vous souhaitez analyser, telle que la démonstration de la Galerie de photos.

2. Dans DevTools, ouvrez l’outil Performance .

3. Cliquez sur le bouton Actualiser la page () :

   

   DevTools enregistre les métriques de performances pendant l’actualisation de la page, puis arrête automatiquement l’enregistrement quelques secondes après la fin du chargement. Ensuite, DevTools affiche l’enregistrement et effectue automatiquement un zoom avant sur la partie de l’enregistrement où la majeure partie de l’activité s’est produite :

   

Capturer des captures d’écran lors de l’enregistrement

Pour capturer une capture d’écran de chaque image lors de l’enregistrement, cochez la case Captures d’écran :

Pour savoir comment interagir avec les captures d’écran, consultez Afficher une capture d’écran ci-dessous.

Forcer le garbage collection lors de l’enregistrement

Pour forcer le nettoyage de la mémoire pendant l’enregistrement d’une page, cliquez sur le bouton Collecter la mémoire () :

Afficher les paramètres d’enregistrement

Pour exposer d’autres paramètres liés à la façon dont DevTools capture les enregistrements de performances, dans l’outil Performances , cliquez sur le bouton Paramètres de capture (). Les cases à cocher et les listes déroulantes s’affichent en haut de l’outil Performance :

Désactiver les exemples JavaScript

Par défaut, la section Main d’un enregistrement affiche des piles d’appels détaillées des fonctions JavaScript qui ont été appelées pendant l’enregistrement. Pour désactiver les piles d’appels JavaScript :

1. Dans l’outil Performances , cliquez sur le bouton Paramètres de capture ().

2. Cochez la case Désactiver les exemples JavaScript .

3. Prenez un enregistrement de la page.

Les deux illustrations suivantes montrent la différence entre la désactivation et l’activation des exemples JavaScript. La section Main de l’enregistrement est beaucoup plus courte lorsque l’échantillonnage JavaScript est désactivé, car l’enregistrement omet les piles d’appels JavaScript.

Exemple d’enregistrement lorsque les exemples JS sont désactivés :

Exemple d’enregistrement lorsque les exemples JS sont activés :

Limiter le réseau lors de l’enregistrement

Pour limiter le réseau lors de l’enregistrement :

1. Dans l’outil Performances , cliquez sur le bouton Paramètres de capture (). Consultez Afficher les paramètres d’enregistrement ci-dessus.

2. Définissez Réseau sur le niveau de limitation souhaité.

   Une icône d’avertissement s’affiche sous l’onglet de l’outil Réseau pour vous rappeler que la limitation est activée.

Limiter le processeur lors de l’enregistrement

Pour limiter le processeur lors de l’enregistrement :

1. Dans l’outil Performances , cliquez sur le bouton Paramètres de capture (). Consultez Afficher les paramètres d’enregistrement ci-dessus.

2. Définissez l’UC sur le niveau de limitation souhaité.

   Une icône d’avertissement s’affiche sous l’onglet de l’outil Performances pour vous rappeler que la limitation est activée.

La limitation est relative aux fonctionnalités de votre ordinateur. Par exemple, l’option de ralentissement 2x fait que votre processeur fonctionne deux fois plus lent que d’habitude. DevTools ne simule pas vraiment les processeurs des appareils mobiles, car l’architecture des appareils mobiles est très différente de celle des ordinateurs de bureau et des ordinateurs portables.

Activer les statistiques du sélecteur CSS

Pour afficher les statistiques de vos sélecteurs de règles CSS pendant les événements recalculer le style de longue durée :

1. Cliquez sur le bouton Paramètres de capture (). Consultez Afficher les paramètres d’enregistrement ci-dessus.

2. Cochez la case Activer les statistiques du sélecteur CSS .

Pour plus d’informations, consultez Analyser les performances du sélecteur CSS pendant les événements recalculer le style.

Activer l’instrumentation de peinture avancée

Pour afficher l’instrumentation de peinture détaillée :

1. Cliquez sur le bouton Paramètres de capture (). Consultez Afficher les paramètres d’enregistrement ci-dessus.

2. Cochez la case Activer l’instrumentation de peinture avancée (lente).

Pour savoir comment interagir avec les informations de peinture, consultez Afficher les informations sur les couches ci-dessous et Afficher le profileur de peinture, ci-dessous.

Annoter un enregistrement et le partager

Une fois qu’une trace de performances est enregistrée, vous pouvez l’analyser et l’annoter pour partager vos résultats.

Pour annoter un enregistrement, ouvrez l’onglet Annotations dans la barre latérale de l’outil Performances . Si la barre latérale n’est pas visible, cliquez sur le bouton Afficher la barre latérale ().

L’onglet Annotations de la barre latérale contient initialement des instructions sur la façon d’ajouter des annotations. Après avoir créé des annotations, comme indiqué ci-dessous, l’onglet répertorie vos annotations existantes et vous permet de les supprimer.

Il existe plusieurs façons d’ajouter une annotation :

• Étiqueter un élément : pour étiqueter un élément dans la trace des performances, double-cliquez sur l’élément, entrez l’étiquette dans la zone de texte, puis appuyez sur Entrée.

• Connecter deux éléments : pour dessiner une flèche entre deux éléments dans la trace de performances, double-cliquez sur le premier élément, cliquez sur l’icône de flèche en regard de celui-ci, puis cliquez sur le deuxième élément.

• Étiqueter un intervalle de temps : pour dessiner et étiqueter un intervalle de temps arbitraire dans la trace de performances, maintenez la touche Maj enfoncée et faites glisser du début d’un intervalle de temps à la fin, entrez l’étiquette dans la zone de texte qui s’affiche, puis appuyez sur Entrée.

Par exemple, ouvrez la page web Démonstration des onglets d’activité dans une nouvelle fenêtre ou un nouvel onglet, créez un enregistrement des performances, puis effectuez les trois actions ci-dessus. Résultat:

Dans cet exemple, il y a :

• Trois annotations.
• Annotation de flèche reliant deux annotations.
• Intervalle de temps annoté mis en surbrillance en rose.

L’onglet Annotations affiche le nombre d’annotations en regard de son nom d’onglet ; dans cet exemple, 5.

Pour supprimer une annotation, pointez dessus dans l’onglet Annotations , puis cliquez sur le bouton Supprimer en regard de celle-ci.

Pour masquer les annotations de la trace de performances, sélectionnez Masquer les annotations en bas de l’onglet Annotations .

Enregistrer et partager un enregistrement

Pour enregistrer un enregistrement en tant que fichier sur votre appareil et le partager ultérieurement avec vos résultats de performances annotés, dans la barre d’action en haut de l’outil Performance , cliquez sur le bouton Enregistrer le profil (), puis sélectionnez Enregistrer la trace.

Vous pouvez également sélectionner Enregistrer la trace sans annotations.

Au lieu de cliquer sur le bouton Enregistrer le profil () en haut, vous pouvez cliquer avec le bouton droit sur une piste d’enregistrement, puis sélectionner Enregistrer le profil :

Charger un enregistrement

Pour charger un enregistrement à partir d’un fichier, cliquez sur le bouton Charger le profil () dans la barre d’action en haut de l’outil Performance .

L’outil Performance affiche les annotations si elles sont présentes dans la trace.

Vous pouvez également cliquer avec le bouton droit dans l’outil Performances , puis sélectionner Charger le profil :

Vous pouvez cliquer avec le bouton droit dans un enregistrement existant ou sur l’écran affiché dans l’outil Performance lorsqu’il n’y a pas d’enregistrement.

Effacer l’enregistrement précédent

Après avoir effectué un enregistrement, pour supprimer cet enregistrement de l’outil Performance , cliquez sur le bouton Effacer l’enregistrement () :

Analyser un enregistrement de performances

Une fois que vous avez enregistré les performances du runtime ou le chargement des enregistrements, l’outil Performances affiche un grand nombre de données sur l’enregistrement. Utilisez les données enregistrées pour analyser les performances de votre page web.

Obtenir des insights actionnables

L’outil Performance extrait des insights actionnables à partir des données de performances enregistrées. Ces informations vous permettent d’améliorer les performances de votre site web. Les insights sont les suivants :

• INP par phase
• LCP par phase
• Détection de requête LCP
• Responsables du décalage de disposition
• Requête de blocage de rendu
• Arborescence des dépendances réseau
• Améliorer la distribution d’images
• Latence des demandes de document
• Affichage de la police
• Optimiser la fenêtre d’affichage pour les appareils mobiles
• Optimiser la taille du DOM
• 3e parties
• Coûts du sélecteur CSS
• Redistribuation forcée
• Utiliser des durées de vie de cache efficaces

Les insights sont axés sur l’amélioration des métriques Core Web Vitals et sur l’optimisation de la vitesse de chargement et de rendu de la page web.

Une fois que vous avez enregistré un profil dans l’outil Performances , l’onglet Insights dans la barre latérale affiche la liste des insights actionnables qui s’appliquent aux données de performances enregistrées. Pour afficher la liste des insights qui ne s’appliquent pas au profil, consultez la section Informations passées .

Pour utiliser les insights :

1. Effectuez un enregistrement des performances, par performances d’enregistrement, ci-dessus.

2. Dans la barre latérale gauche de l’outil Performances , sélectionnez l’onglet Insights , développez différentes sections, puis pointez sur les éléments et cliquez dessus. L’outil Performance met en évidence les événements correspondants dans la trace :

   

   Si la barre latérale et l’onglet Insights ne sont pas visibles, cliquez sur le bouton Afficher la barre latérale ().

Naviguer dans l’enregistrement

Pour examiner attentivement votre enregistrement de performances, vous pouvez sélectionner une partie d’un enregistrement, faire défiler un graphique à flammes longues, effectuer un zoom avant et arrière, et utiliser des barres de navigation pour passer d’un niveau de zoom à l’autre.

Utiliser les raccourcis clavier pour naviguer

Pour utiliser les raccourcis clavier pour naviguer rapidement dans l’enregistrement, commencez par choisir votre style de navigation par défaut.

En haut à droite de l’outil Performance , cliquez sur le bouton Afficher les raccourcis (), puis sélectionnez le bouton d’option Moderne ou Classique . La boîte de dialogue Raccourcis clavier affiche les raccourcis disponibles pour l’option de mappage sélectionnée.

Avec le bouton d’option Moderne sélectionné :

• Pour zoomer : Commande/Ctrl + roulette de la souris.
• Pour faire défiler verticalement : roulette de la souris.
• Pour faire défiler horizontalement : Maj + roulette de la souris.

Avec le bouton d’option Classique sélectionné :

• Pour zoomer : roulette de la souris ou pavé tactile vers le haut ou vers le bas.
• Pour faire défiler verticalement : Maj + roulette de la souris.
• Défilement horizontal : Maj + Flèche| gaucheFlèche droite

Vous pouvez également effectuer un panoramique vers la gauche et la droite en appuyant sur les touches A et D , puis effectuer un zoom en appuyant sur les touches W ou S .

Voir aussi :

• Panneau performances : activez un basculement vers une autre option de navigation chronologie dans Fonctionnalités expérimentales dans Microsoft Edge DevTools.

Sélectionner une partie d’un enregistrement

En haut de l’enregistrement, la section Vue d’ensemble de la chronologie s’affiche, y compris les graphiques PROCESSEUR et NET (indiqués à droite) :

Pour sélectionner une partie d’un enregistrement, dans la vue d’ensemble de la chronologie, cliquez et faites glisser horizontalement :

Pour sélectionner une partie à l’aide du clavier :

1. Concentrez la piste principale ou l’un de ses voisins.

2. Utilisez les touches W, A, S et D pour effectuer un zoom avant, déplacer vers la gauche, effectuer un zoom arrière et déplacer vers la droite, respectivement.

Pour sélectionner une partie à l’aide d’un pavé tactile :

1. Pointez sur la section Vue d’ensemble de la chronologie ou sur l’une des pistes (Main et ses voisins).

2. À l’aide de deux doigts, balayez vers le haut pour effectuer un zoom arrière, balayez vers la gauche pour vous déplacer vers la gauche, balayez vers le bas pour effectuer un zoom avant et balayez vers la droite pour vous déplacer vers la droite.

Vous pouvez sélectionner une partie d’un enregistrement à l’aide d’une souris, d’un clavier ou d’un pavé tactile.

Souris:

Pour sélectionner une partie d’un enregistrement à l’aide de la souris :

• Faites glisser votre souris vers la gauche ou la droite sur la vue d’ensemble. La vue d’ensemble est la section qui contient les graphiques PROCESSEUR et NET :

Pour faire défiler un graphique à flammes longues dans la section Main ou dans l’une des sections voisines, cliquez et maintenez-le enfoncé tout en faisant glisser vers le haut et vers le bas. Faites glisser vers la gauche ou la droite pour déplacer la partie de l’enregistrement sélectionnée.

Clavier:

Pour sélectionner une partie d’un enregistrement à l’aide du clavier :

1. Sélectionnez l’arrière-plan de la section Main , ou sélectionnez l’arrière-plan d’une section située en regard de la section Main , par exemple Interactions, Réseau ou GPU. Ce flux de travail clavier fonctionne uniquement lorsque l’une de ces sections est en cours.

2. Appuyez sur W ou S pour effectuer un zoom avant ou arrière. Appuyez sur A ou D pour vous déplacer vers la gauche ou la droite.

Pavé tactile :

Pour sélectionner une partie d’un enregistrement à l’aide d’un pavé tactile :

1. Pointez sur la section Vue d’ensemble ou la section Détails . La section Vue d’ensemble est la zone contenant les graphiques FPS, UC et NET . La section Détails est la zone contenant la section Main et la section Interactions .

2. À l’aide de deux doigts, balayez vers le haut pour effectuer un zoom arrière ou vers le bas pour effectuer un zoom avant. À l’aide de deux doigts, balayez vers la gauche ou vers la droite pour vous déplacer vers la droite.

Effectuer un zoom sur des parties d’un enregistrement et basculer entre les niveaux de zoom

La vue d’ensemble de la chronologie vous permet de zoomer successivement sur les parties de votre enregistrement et de créer des barres de navigation à chaque étape, ce qui vous permet de basculer entre ces niveaux de zoom.

Pour effectuer un zoom sur une partie de votre enregistrement et utiliser des barres de navigation :

1. Dans Vue d’ensemblede la chronologie, sélectionnez une partie de l’enregistrement (ci-dessus).

2. Pointez sur la sélection, puis cliquez sur le bouton N ms () :

   

   La sélection se développe pour remplir la vue d’ensemble de la chronologie. Une chaîne de barres de navigation commence à être généré en haut de la vue d’ensemble de la chronologie.

3. Répétez les deux étapes précédentes pour créer une autre barre de navigation imbriquée. Vous pouvez continuer à imbriquer des barres de navigation tant que la plage de sélection est supérieure à 5 millisecondes.

4. Pour accéder au niveau de zoom choisi, cliquez sur la barre de navigation correspondante dans la chaîne en haut de la vue d’ensemble de la chronologie.

Pour supprimer les enfants d’une barre de navigation, cliquez avec le bouton droit sur la barre de navigation parente, puis sélectionnez Supprimer la barre de navigation enfant :

Faire défiler un graphique à flammes longues

Pour faire défiler un graphique à flammes longues dans la piste principale ou l’un de ses voisins, cliquez et maintenez-le enfoncé, puis faites glisser dans n’importe quelle direction jusqu’à ce que ce que vous recherchez soit visible.

Activités de recherche

Vous pouvez effectuer des recherches dans les activités de la piste principale et les demandes dans la piste réseau .

Pour ouvrir la zone de recherche en bas de l’outil Performance :

1. Appuyez sur Ctrl+F (Windows, Linux) ou Cmd+F (macOS).

   La zone Rechercher s’affiche en bas de l’outil Performance :

   

2. Dans la zone Rechercher , entrez une requête, telle que « recalculer le style ».

   Les activités correspondantes sont mises en surbrillance dans la section Main au fur et à mesure que vous tapez, et le nombre total de correspondances s’affiche dans la zone de recherche. La première activité correspondante est sélectionnée, indiquée en bleu :

   

Pour naviguer parmi les activités qui correspondent à votre requête :

• Pour sélectionner l’activité suivante, appuyez sur Entrée ou cliquez sur le bouton Suivant ().

• Pour sélectionner l’activité précédente, appuyez sur Maj+Entrée ou cliquez sur le bouton Précédent ().

L’outil Performances affiche une info-bulle sur l’activité sélectionnée dans la zone de recherche.

Pour modifier les paramètres de requête :

• Pour utiliser une expression régulière dans votre requête, cliquez sur le bouton Activer les expressions régulières ( . Si vous sélectionnez le bouton Expression régulière, puis entrez ^E.* qui recherche toute activité qui commence par la lettre E.

• Pour que la requête respecte la casse, cliquez sur le bouton Activer la recherche sensible à la casse ( .

Pour masquer la zone de recherche, cliquez sur le bouton Annuler .

Modifier l’ordre des pistes et les masquer

Pour désencombrer la trace de performances, vous pouvez modifier l’ordre des pistes et masquer celles qui ne sont pas pertinentes en mode de configuration de suivi.

Pour déplacer et masquer des pistes :

1. Pour passer en mode de configuration, cliquez avec le bouton droit sur un nom de piste, puis sélectionnez Configurer les pistes.

2. Cliquez sur le bouton Déplacer la trace vers le haut () ou sur le bouton Déplacer la piste vers le bas () pour déplacer une trace vers le haut ou vers le bas. Cliquez sur le bouton Masquer la piste () pour la masquer.

3. Cliquez avec le bouton droit sur la piste, puis sélectionnez Terminer la configuration.

L’outil Performance applique également votre configuration de suivi aux nouvelles traces, sauf si vous fermez puis rouvrez DevTools.

Afficher main activité de thread

Utilisez la section Main pour afficher l’activité qui s’est produite sur le thread main de la page :

Sélectionnez un événement pour afficher plus d’informations à son sujet sous l’onglet Résumé . DevTools décrit l’événement sélectionné :

DevTools représente main’activité de thread avec un graphique à flammes :

L’axe x représente l’enregistrement dans le temps. L’axe y représente la pile des appels. Un événement qui se trouve près du haut provoque les événements qui se trouvent en dessous de celui-ci ; par exemple, dans la figure précédente, un input événement a provoqué un Function Call, qui a exécuté une fonction anonyme qui a appelé filterByCamera , puis populateGallery. La populateGallery fonction a ensuite apporté des modifications DOM en appelant set innerHTML.

DevTools attribue des couleurs aléatoires aux scripts. Dans la figure précédente, les demandes de fonction d’un script sont de couleur violette (rose violet). Le jaune foncé représente l’activité de script et l’événement violet représente l’activité de rendu. Ces événements jaunes et violets plus foncés sont cohérents dans tous les enregistrements.

Si vous souhaitez masquer le graphique de flamme détaillé des requêtes JavaScript, consultez Désactiver les exemples JavaScript ci-dessus. Lorsque les exemples JavaScript sont désactivés, seuls les événements de haut niveau sont affichés, tels que Event: input et Function Call de la figure précédente.

Lire le graphique de flammes

L’outil Performance représente main’activité de thread dans un graphique à flammes. L’axe x représente l’enregistrement dans le temps. L’axe y représente la pile des appels. Les événements en haut provoquent les événements ci-dessous.

L’outil Performance affecte des scripts de couleurs aléatoires pour décomposer le graphique de flammes et le rendre plus lisible.

Les tâches longues sont également mises en surbrillance avec un triangle rouge et la partie de plus de 50 millisecondes est ombrée en rouge.

En outre, la piste principale affiche des informations sur les profils de processeur démarrés et arrêtés avec profile() les fonctions de console et profileEnd() .

Pour masquer le graphique de flammes détaillé des appels JavaScript, consultez Désactiver les exemples JavaScript. Lorsque les exemples JS sont désactivés, vous voyez uniquement les événements de haut niveau tels que Event (click) et Function Call.

Suivre les initiateurs d’événements

La piste principale peut afficher des flèches qui connectent les initiateurs suivants et les événements qu’ils ont provoqués :

• Invalidation de style ou de disposition ->Recalculer les styles ou la disposition
• Frame d’animation de requête ->Image d’animation déclenchée
• Demander un rappel inactif ->Déclencher le rappel inactif
• Installer le minuteur ->Timer déclenché
• Créer webSocket ->Envoyer... et recevoir webSocket Handshake ou Destroy WebSocket
• Planifier postTask ->Fire postTask ou Abort postTask

Pour afficher les flèches, recherchez un initiateur ou l’événement qu’il a provoqué dans le graphique de flammes, puis sélectionnez-le.

Lorsqu’il est sélectionné, l’onglet Résumé affiche Initiateur pour les liens pour les initiateurs et Initié par des liens pour les événements qu’ils ont provoqués. Cliquez dessus pour passer d’un événement à l’autre.

Masquer les fonctions et leurs enfants dans le graphique de flammes

Pour désencombrer le graphique de flammes dans le thread principal , vous pouvez masquer les fonctions sélectionnées ou leurs enfants :

1. Dans la piste principale , cliquez avec le bouton droit sur une fonction et choisissez l’une des options suivantes ou appuyez sur le raccourci correspondant :

   • Masquer la fonction (H)
   • Masquer les enfants (C)
   • Masquer les enfants répétitifs (R)
   • Réinitialiser les enfants (U)
   • Réinitialiser la trace (T)
   • Ajouter un script pour ignorer la liste (I)

   Un bouton liste déroulante nombre masqué () s’affiche en regard du nom de la fonction avec des enfants masqués.

2. Pour afficher le nombre d’enfants masqués, pointez sur le bouton de liste déroulante nombre masqué ().

3. Pour réinitialiser une fonction avec des enfants masqués ou le graphique à flammes entier, sélectionnez la fonction et appuyez sur U ou cliquez avec le bouton droit sur une fonction et sélectionnez Réinitialiser la trace respectivement.

Ignorer les scripts dans le graphique de flammes

Pour ajouter un script à la liste ignorer, cliquez avec le bouton droit sur un script dans le graphique et sélectionnez Ajouter un script pour ignorer la liste.

Le graphique réduit les scripts ignorés, les marque comme Sur liste d’ignorer et les ajoute aux règles d’exclusion personnalisées dans Personnaliser et contrôler DevTools () >Paramètres>Ignorer. Les scripts ignorés sont enregistrés jusqu’à ce que vous les supprimiez de la trace ou des règles d’exclusion personnalisées.

Afficher les activités d’une table

Après l’enregistrement d’une page, en plus de la section Main pour analyser les activités, DevTools fournit également trois vues tabulaires pour analyser les activités. Chaque vue vous donne une perspective différente sur les activités :

• Pour afficher les activités où le plus de temps a été passé directement, utilisez l’onglet Bas vers le haut .

• Pour afficher les activités racine qui entraînent le plus de travail, utilisez l’onglet Arborescence des appels .

• Pour afficher les activités dans l’ordre dans lequel elles se sont produites pendant l’enregistrement, utilisez l’onglet Journal des événements .

Pour vous aider à trouver ce que vous recherchez plus rapidement, les trois onglets ont des boutons pour le filtrage avancé en regard de la barre de filtre :

• Bouton Activer les expressions régulières (

• Le bouton Activer la recherche sensible à la casse (

Chaque vue tabulaire dans l’outil Performances affiche des liens pour des activités telles que des appels de fonctions. Pour vous aider à déboguer, DevTools recherche les déclarations de fonction correspondantes dans les fichiers sources. En outre, si les mappages sources appropriés sont présents et activés, DevTools recherche automatiquement les fichiers d’origine.

Cliquez sur un lien pour ouvrir un fichier source dans l’outil Sources .

Les trois sections suivantes font toutes référence à la même démonstration. Vous pouvez exécuter la démonstration vous-même dans les onglets d’activité Démonstration et voir la source dans MicrosoftEdge / Demos > /devtools-performance-activitytabs/.

Activités racines

Voici une explication du concept d’activités racine mentionné dans les sections Onglet Arborescence des appels , Onglet Bas vers le haut et Journal des événements .

Les activités racines sont des activités qui amènent le navigateur à effectuer un certain travail. Par exemple, lorsque vous cliquez sur une page web, le navigateur exécute une Event activité en tant qu’activité racine. Cette Event activité peut entraîner l’exécution d’autres activités, telles qu’un gestionnaire.

Dans le graphique à flammes de la section Main , les activités racines se trouvent en haut du graphique. Dans les onglets Arborescence des appels et Journal des événements, les activités racines sont les éléments de niveau supérieur.

Pour obtenir un exemple d’activités racines, consultez l’onglet Arborescence des appels ci-dessous.

Onglet Arborescence des appels

Utilisez l’onglet Arborescence des appels pour voir quelles activités racine sont les plus à l’origine du travail.

L’onglet Arborescence des appels affiche uniquement les activités pendant la partie sélectionnée de l’enregistrement. Pour savoir comment sélectionner une partie d’un enregistrement, consultez Sélectionner une partie d’un enregistrement, ci-dessus.

Dans la figure précédente, les éléments de niveau supérieur dans la colonne Activité , tels que Event Timing, sont des activités racines. L’imbrication représente la pile des appels. Par exemple, dans la figure précédente, Event Timing a provoqué Event: mouseup, qui a provoqué Function Call, qui provoque (anonymous), et ainsi de suite.

Le temps libre représente le temps passé directement dans cette activité. Total Time représente le temps passé dans cette activité ou l’un des enfants.

Cliquez sur Temps libre, Temps total ou Activité pour trier la table en fonction de cette colonne.

Utilisez la zone de texte Filtrer pour filtrer les événements par nom d’activité.

Par défaut, le menu Regroupement est défini sur Aucun regroupement. Utilisez le menu Regroupement pour trier la table d’activités en fonction de différents critères.

Cliquez sur Afficher la pile la plus lourde () pour afficher une autre table à droite de la table Activité . Cliquez sur une activité pour remplir la table Stack la plus lourde . La table Stack la plus lourde affiche les enfants de l’activité sélectionnée qui ont mis le plus de temps à s’exécuter.

Onglet Bas vers le haut

Utilisez l’onglet Bas en haut pour afficher les activités directement qui ont pris le plus de temps dans l’ensemble.

L’onglet Bas vers le haut affiche uniquement les activités pendant la partie sélectionnée de l’enregistrement. Pour savoir comment sélectionner une partie d’un enregistrement, consultez Sélectionner une partie d’un enregistrement, ci-dessus.

Dans le graphique de flamme de la section principale de la figure précédente, presque tout le temps a été consacré à l’exécution des afonctions , bet c . Les principales activités de l’onglet Bas vers le haut de la figure précédente sont également a, bet c. Dans l’onglet Bas vers le haut , l’activité la plus coûteuse suivante est Minor GC.

La colonne Temps libre représente le temps agrégé passé directement dans cette activité, sur toutes les occurrences.

La colonne Durée totale représente le temps agrégé passé dans cette activité ou l’un des enfants.

Onglet Journal des événements

Utilisez l’onglet Journal des événements pour afficher les activités dans l’ordre dans lequel elles se sont produites pendant l’enregistrement.

L’onglet Journal des événements affiche uniquement les activités pendant la partie sélectionnée de l’enregistrement. Pour savoir comment sélectionner une partie d’un enregistrement, consultez Sélectionner une partie d’un enregistrement, ci-dessus.

La colonne Heure de début représente le point auquel cette activité a démarré, par rapport au début de l’enregistrement. Par exemple, l’heure de début de 925.0 ms pour l’élément sélectionné dans la figure précédente signifie que l’activité a démarré 925 ms après le démarrage de l’enregistrement.

La colonne Temps libre représente le temps passé directement dans cette activité.

La colonne Durée totale représente le temps passé directement dans cette activité ou dans l’un des enfants.

Cliquez sur l’en-tête de colonne Heure de début, Heure libre ou Temps total pour trier la table en fonction de cette colonne.

Utilisez la zone de texte Filtrer pour filtrer les activités par nom.

Utilisez le menu Durée pour filtrer les activités qui ont pris moins de 1 ms ou 15 ms. Par défaut, le menu Durée est défini sur Tous, ce qui signifie que toutes les activités sont affichées.

Décochez les cases Chargement, Script, Rendu ou Peinture pour filtrer toutes les activités de ces catégories.

Afficher les marqueurs de performances

Dans une superposition avec des lignes verticales sur la trace de performances, vous pouvez voir des marqueurs de performances importants, tels que :

• First Paint (FP)
• First Contentful Paint (FCP)
• La plus grande peinture contentfulante (LCP)
• DOMContentLoaded Event (DCL)
• Événement Onload (L)

Pointez sur un nom de marqueur en bas de la trace pour voir son horodatage.

Afficher les minutages personnalisés

Sur la piste Minutages , affichez vos marqueurs de performances personnalisés tels que :

• performance.mark() Appels.

• performance.measure() Appels.

Sélectionnez un marqueur pour afficher plus de détails dans l’onglet Résumé , y compris son horodatage, le temps total, le temps libre et l’objet detail . Pour performance.mark() les appels et performance.measure() , l’onglet affiche également les traces de pile.

Afficher les interactions

Utilisez la section Interactions pour rechercher et analyser les interactions utilisateur qui se sont produites pendant l’enregistrement :

Une ligne rouge au bas d’une interaction représente le temps passé à attendre le thread main.

Cliquez sur une interaction pour afficher plus d’informations à son sujet sous l’onglet Résumé .

Afficher les décalages de disposition

Affichez les décalages de disposition sur la piste Décalages de disposition. Les décalages sont affichés sous forme de diamants violets et sont regroupés en clusters (lignes violettes) en fonction de leur proximité sur les chronologie. Pour plus d’informations sur les clusters, consultez Évolution de la métrique CLS au web.dev.

Pour mettre en surbrillance un élément qui a provoqué un changement de disposition dans la fenêtre d’affichage, pointez sur le losange correspondant.

Pour afficher plus d’informations sur un décalage ou des décalages de disposition sous l’onglet Résumé avec les minutages, les scores, les éléments et les coupables potentiels, cliquez sur le losange ou le cluster correspondant.

Pour plus d’informations, consultez Cumulative Layout Shift (CLS) sur web.dev.

Afficher les animations

Affichez les animations sur la piste Animations . Les animations sont nommées en tant que propriétés ou éléments CSS correspondants, le cas échéant, par exemple ou transformmy-element. Les animations sans composition sont marquées par des triangles rouges dans le coin supérieur droit.

Sélectionnez une animation pour afficher plus de détails dans l’onglet Résumé , y compris les raisons des échecs de composition.

Afficher l’activité GPU

Affichez l’activité GPU dans la section GPU de l’outil Performances :

Afficher l’activité raster

Affichez l’activité raster dans la section Pool de threads .

Analyser les images par seconde (FPS)

DevTools offre deux façons d’analyser les images par seconde :

• Utilisez la section Frames pour voir la durée d’une image particulière. Consultez la section Frames ci-dessous.

• Utilisez le compteur FPS pour obtenir une estimation en temps réel de FPS pendant l’exécution de la page. Consultez Afficher des images par seconde en temps réel avec le compteur FPS ci-dessous.

La section Frames

La section Frames vous indique exactement combien de temps un cadre particulier a pris.

Pointez sur un cadre pour afficher une info-bulle avec plus d’informations à son sujet :

L’exemple ci-dessus montre une info-bulle lorsque vous pointez sur un cadre.

La section Frames peut afficher quatre types d’images :

• Cadre inactif (blanc). Aucune modification.

• Cadre (vert). Rendu comme prévu et dans le temps.

• Cadre partiellement présenté (jaune avec un motif de trait de tiret large épars). Microsoft Edge a fait de son mieux pour afficher au moins certaines mises à jour visuelles dans le temps. Par exemple, si le travail du main thread du processus de renderer (animation de canevas) est en retard, mais que le thread du compositeur (défilement) est dans le temps.

• Cadre supprimé (rouge avec un motif de ligne pleine dense). Microsoft Edge ne peut pas afficher la trame dans un délai raisonnable.

Cliquez sur un cadre pour afficher plus d’informations sur le cadre sous l’onglet Résumé en bas de l’outil Performances . DevTools présente le cadre sélectionné en bleu :

Afficher les demandes réseau

Développez la section Réseau pour afficher une cascade de requêtes réseau qui se sont produites pendant l’enregistrement :

Cliquez sur une demande pour afficher plus d’informations à son sujet sous l’onglet Résumé :

Les demandes de la section Réseau sont codées en couleur comme suit :

• Arrière-plan bleu : requête HTML.
• Arrière-plan violet : requête CSS.
• Arrière-plan jaune foncé : requête JS.
• Arrière-plan vert : demande d’image.

Les requêtes ont des carrés dans le coin supérieur gauche :

• Un carré bleu foncé en haut à gauche d’une requête signifie qu’il s’agit d’une requête de priorité plus élevée.
• Un carré bleu clair signifie une priorité inférieure.

Par exemple, dans la figure précédente, la demande de galerie de photos , dans le coin supérieur gauche de la section Réseau , est prioritaire.

Les requêtes peuvent avoir des lignes sur les côtés gauche et droit, et leurs barres peuvent être divisées en deux couleurs. Voici ce que ces lignes et couleurs représentent :

• La ligne de gauche est tout jusqu’au Connection Start groupe d’événements, inclus. En d’autres termes, il s’agit de tout Request Sentavant , exclusif.

• La partie légère de la barre est Request Sent et Waiting (TTFB) pour la réponse du serveur.

• La partie sombre de la barre est Content Download.

• La droite est essentiellement le temps passé à attendre le thread main. Cela n’est pas représenté sous l’onglet Minutage .

Afficher les métriques de mémoire

Cochez la case Mémoire pour afficher les métriques de mémoire dans un enregistrement des performances :

DevTools affiche un graphique mémoire , au-dessus de l’onglet Résumé . Il existe également un graphique sous le graphique NET , appelé HEAP. Le graphique HEAP fournit les mêmes informations que la ligne de tas JS dans le graphique mémoire :

Les lignes colorées du graphique correspondent aux cases à cocher colorées au-dessus du graphique. Décochez une case pour masquer cette catégorie du graphique.

Le graphique affiche uniquement la région de l’enregistrement actuellement sélectionnée. Par exemple, dans la figure précédente, le graphique mémoire affiche uniquement l’utilisation de la mémoire entre environ 3600 ms et 6 200 ms.

Voir aussi :

• Visualiser les fuites de mémoire (Outil de performances : case à cocher Mémoire) ci-dessous.

Afficher la durée d’une partie d’un enregistrement

Lors de l’analyse d’une section telle que Réseau ou Main, vous avez parfois besoin d’une estimation plus précise de la durée de certains événements. Maintenez la touche Maj enfoncée, cliquez longuement, puis faites glisser vers la gauche ou la droite pour sélectionner une partie de l’enregistrement. En bas de votre sélection, DevTools indique la durée de cette partie :

Afficher une capture d’écran

Pour savoir comment activer des captures d’écran, consultez Capturer des captures d’écran lors de l’enregistrement, ci-dessus.

Pour afficher une capture d’écran de l’affichage de la page pendant ce moment de l’enregistrement, pointez sur la vue d’ensemble. La vue d’ensemble est la section qui contient les graphiques PROCESSEUR et NET :

Vous pouvez également afficher des captures d’écran en sélectionnant un cadre dans la section Cadres . DevTools affiche une petite version de la capture d’écran sous l’onglet Résumé :

Pour effectuer un zoom avant sur la capture d’écran, cliquez sur la miniature sous l’onglet Résumé .

Afficher les informations sur les couches

Pour afficher les informations de couches avancées sur un frame :

1. Dans l’outil Performances, cliquez sur le bouton Paramètres de capture (), puis cochez la case Activer l’instrumentation de rendu avancée (lente).

2. Dans la section Cadres , sélectionnez un cadre. DevTools affiche des informations sur les couches sous l’onglet Calques en bas de l’outil Performances :

   

L’onglet Calques fonctionne comme l’onglet Calques composites de l’outil Vue 3D . Pour savoir comment interagir avec l’onglet Calques , consultez Naviguer dans les couches de page web, z-index et DOM à l’aide de l’outil Vue 3D.

Afficher le profileur de peinture

Pour afficher des informations avancées sur un événement de peinture :

1. Dans l’outil Performances, cliquez sur le bouton Paramètres de capture (), puis cochez la case Activer l’instrumentation de rendu avancée (lente).

2. Sélectionnez un événement Paint dans la section Main . DevTools affiche des informations sur l’événement de peinture sous l’onglet Paint Profiler :

   

Afficher les statistiques du sélecteur CSS

Pour afficher les statistiques sur les sélecteurs des règles CSS qui ont été recalculés lors d’un enregistrement des performances :

• Dans l’outil Performances, cliquez sur le bouton Paramètres de capture (), puis cochez la case Activer l’instrumentation de rendu avancée (lente).

  DevTools affiche des informations agrégées sur les sélecteurs des règles CSS qui ont été recalculées pendant l’enregistrement sous l’onglet Statistiques du sélecteur :

  

1. Dans la section Main , sélectionnez un événement Recalculer le style . Sous l’onglet Statistiques du sélecteur , DevTools affiche des informations sur les sélecteurs des règles CSS qui ont été recalculées pendant cet événement.

Voir aussi :

• Analyser les performances du sélecteur CSS pendant les événements recalculer le style

Afficher les messages entre les fenêtres, les iframes et les workers dédiés

Le panneau Performances de l’expérience DevTools : show postMessage dispatch and handling flows améliore la section Main de l’outil Performance pour vous aider à identifier rapidement les postMessage événements et les gestionnaires, en faisant la distinction entre les événements déclenchés par la postMessage méthode et les autres événements affichés dans l’outil Performance. Cette expérience vous aide à examiner les problèmes de performances liés à la publication de messages sur différents threads d’une application.

Sans cette expérience, les événements déclenchés par la distribution et la gestion des messages entre les threads d’une application apparaissent comme des événements d’appel de fonction de script générique. Avec cette expérience activée :

• postMessage les événements dispatch s’affichent sous la forme Schedule postMessage.
• postMessage Les événements de gestionnaire s’affichent sous la forme On Message :

Cette expérience vous permet d’examiner quand un postMessage appel s’est produit et combien de temps le message a été mis en file d’attente avant le démarrage du postMessage gestionnaire. Les événements de distribution sont liés aux événements de gestionnaire par des flèches d’initiateur qui s’affichent lorsque vous cliquez sur l’un ou l’autre type d’événement :

Pour utiliser cette fonctionnalité, dans DevTools, sélectionnez Personnaliser et contrôler DevTools () >Paramètres>Expériences, cochez la case Panneau Performances : afficher les flux de distribution et de gestion des messages, cliquez sur le bouton Fermer (X), puis cliquez sur le bouton Recharger DevTools .

Voir aussi :

• Informations de référence sur les événements d’enregistrement des performances
• démonstration des événements de trace postMessage (rendu)
• démonstration des événements de trace postMessage (code source)

Analyser les performances de rendu avec l’outil Rendu

Utilisez l’outil Rendu pour visualiser les performances de rendu de votre page. L’outil Rendu est un outil d’affichage rapide ; si vous l’ouvrez à partir du menu Commande, il s’ouvre en bas de DevTools.

Pour ouvrir l’outil Rendu :

1. Cliquez avec le bouton droit sur une page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

2. Dans la barre d’activité (ou l’affichage rapide), cliquez sur le bouton Autres outils (), puis sélectionnez Rendu.

   L’outil Rendu s’ouvre :

   

Voir aussi :

• Outil de rendu, pour voir à quoi ressemble une page web avec différentes options d’affichage ou déficiences visuelles

Afficher des images par seconde en temps réel avec le compteur FPS

Le compteur FPS est une superposition qui apparaît dans le coin supérieur gauche de la page web rendue. Il fournit une estimation en temps réel de FPS à mesure que la page s’exécute. Pour ouvrir le compteur FPS :

1. Ouvrez l’outil Rendu . Consultez Analyser les performances de rendu avec l’outil Rendu ci-dessus.

2. Cochez la case Frame Rendering Stats (Statistiques de rendu de trame ). La superposition du compteur FPS s’affiche dans la page web rendue :

   

Afficher les événements de peinture en temps réel avec Paint Flashing

Utilisez Paint Flashing pour obtenir une vue en temps réel de tous les événements de peinture sur la page. Chaque fois qu’une partie de la page est réappeinte, DevTools présente cette section en vert.

Pour activer paint flashing :

1. Ouvrez l’outil Rendu . Consultez Analyser les performances de rendu avec l’outil Rendu ci-dessus.

2. Cochez la case Paint Flashing (Clignotement de peinture ). Les contours verts apparaissent dans la page web rendue :

   

Afficher une superposition de couches avec des bordures de couches

Pour afficher une superposition de bordures de couche et de vignettes en haut de la page :

1. Ouvrez l’outil Rendu , comme décrit dans Analyser les performances de rendu avec l’outil Rendu, ci-dessus.

2. Cochez la case Bordures de couche. Les bordures de couche s’affichent dans la page web rendue :

   

Consultez les commentaires dans debug_colors.cc pour obtenir une explication des codages de couleur.

Rechercher les problèmes de performances de défilement en temps réel

Utilisez la case à cocher Problèmes de performances de défilement pour identifier les éléments de la page qui ont des écouteurs d’événements liés au défilement susceptibles de nuire aux performances de la page. DevTools décrit les éléments potentiellement problématiques dans le sarcelle.

Pour afficher les problèmes de performances de défilement :

1. Ouvrez l’outil Rendu , comme décrit dans Analyser les performances de rendu avec l’outil Rendu, ci-dessus.

2. Cochez la case Problèmes de performances de défilement . Les éléments potentiellement problématiques sont décrits :

   

Voir aussi :

• Rects à défilement lent (case à cocher) dans Parcourir les couches de page web, z-index et DOM à l’aide de l’outil Vue 3D.

Désactiver les polices locales

Dans l’outil Rendu , cochez la case Désactiver les polices locales pour émuler les sources manquantes local() dans @font-face les règles.

Par exemple, lorsque la police Rubik est installée sur votre appareil et que la règle l’utilise @font-face src comme local() police, Microsoft Edge utilise le fichier de police local de votre appareil.

Lorsque l’option Désactiver les polices locales est sélectionnée, DevTools ignore les local() polices et extrait chaque police à partir du réseau :

Cette fonctionnalité est utile si vous utilisez deux copies différentes de la même police pendant le développement, par exemple :

• Police locale pour vos outils de conception.
• Police web pour votre code.

Utilisez Désactiver les polices locales pour faciliter les opérations suivantes :

• Déboguer et mesurer les performances de chargement et l’optimisation des polices web.
• Vérifiez l’exactitude de vos règles CSS @font-face .
• Découvrez les différences entre les versions locales installées sur votre appareil et une police web.

Visualiser les fuites de mémoire (Outil de performances : case à cocher Mémoire)

Pour commencer à examiner l’utilisation de la mémoire de la page web, utilisez la case à cocher Mémoire de l’outil Performance. (Ou surveiller l’utilisation de la mémoire en temps réel (Gestionnaire des tâches du navigateur Microsoft Edge).)

L’outil Performance vous permet de visualiser l’utilisation de la mémoire d’une page au fil du temps.

1. Dans DevTools, ouvrez l’outil Performance .

2. Cochez la case Mémoire .

3. Effectuez un enregistrement, selon les performances d’enregistrement ci-dessus.

Il est recommandé de commencer et de terminer votre enregistrement avec un garbage collection forcé. Pour forcer le garbage collection, cliquez sur le bouton garbage lors de l’enregistrement.

Pour illustrer les enregistrements de mémoire, considérez le code suivant :

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Chaque fois que l’utilisateur clique sur le bouton référencé dans le code, 10 000 div nœuds sont ajoutés au corps du document et une chaîne de 1 000 000 x caractères est envoyée au x tableau. L’exécution du code précédent produit un enregistrement dans l’outil Performance :

Tout d’abord, une explication de l’interface utilisateur. Le graphe HEAP dans le volet Vue d’ensemble (sous NET) représente le tas JS. Sous le volet Vue d’ensemble se trouve le volet Compteur . L’utilisation de la mémoire est répartie par segment JS (identique au graphe HEAP dans le volet Vue d’ensemble ), documents, nœuds DOM, écouteurs et mémoire GPU. Décochez une case pour la masquer du graphique.

Maintenant, une analyse du code par rapport à la figure précédente. Si vous examinez le compteur de nœud (le graphe vert), il correspond proprement au code. Le nombre de nœuds augmente en étapes discrètes. Vous pouvez présumer que chaque augmentation du nombre de nœuds est un appel à grow().

Le graphique du tas JS (le graphe bleu) n’est pas aussi simple. Conformément aux bonnes pratiques, le premier creux est en fait un garbage collection forcé (cliquez sur le bouton garbage ).

À mesure que l’enregistrement progresse, les pics de taille de tas JS s’affichent. Ceci est naturel et attendu : le code JavaScript crée les nœuds DOM sur chaque bouton sur lequel vous cliquez et fait beaucoup de travail quand il crée la chaîne d’un million de caractères.

La chose clé ici est le fait que le tas JS se termine plus haut qu’il n’a commencé (le « début » ici étant le point après le garbage collection forcé). Dans le monde réel, si vous voyiez ce modèle d’augmentation de la taille du tas JS ou de la taille des nœuds, cela indiquerait potentiellement une fuite de mémoire.

Voir aussi :

• Affichez les métriques de mémoire ci-dessus.

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est créée par Kayce Basques.

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.