Référence des fonctionnalités de performances

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

Pour un didacticiel pas à pas sur l’analyse des performances d’une page à l’aide de l’outil Performances, consultez Analyser les performances d’exécution (didacticiel).

Les images de cette page montrent DevTools déconnecté dans sa propre fenêtre dédiée. Pour en savoir plus sur le détachement de DevTools, consultez Désancrer DevTools dans une fenêtre séparée de Modifier le placement de DevTools (Undock, Dock to bottom, Dock to left).

Contenu détaillé :

• Ouvrir l’outil Performances
• Performances record
  • Performances d’exécution record
  • Performances de chargement record
  • Capture des captures d’écran lors de l’enregistrement
  • Forcer le nettoyage de la mémoire pendant l’enregistrement
  • Afficher les paramètres d’enregistrement
  • Désactiver les exemples JavaScript
  • Limiter le réseau pendant l’enregistrement
  • Limitation du processeur pendant l’enregistrement
  • Activer les statistiques de 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
  • Parcourir 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 en flammes longues
  • Rechercher dans les activités
  • Modifier l’ordre des pistes et les masquer
  • Afficher l’activité du thread principal
  • Lire le graphique en flammes
  • Suivre les initiateurs d’événements
  • Masquer les fonctions et leurs enfants dans le graphique en flammes
    • Ignorer les scripts dans le graphique en flammes
  • Afficher les activités dans un tableau
    • Activités racines
    • Onglet de bas en 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 shifts de disposition
  • Afficher les animations
  • Afficher l’activité GPU
  • Afficher l’activité raster
  • Analyser les images par seconde (FPS)
    • Section Cadres
  • Afficher les requêtes de 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
  • Voir le profileur de peinture
  • Afficher les statistiques du sélecteur CSS
  • Afficher les messages entre Windows, iframes et les travailleurs dédiés
  • Afficher les messages WebSocket
• Analyser les performances de rendu avec l’outil de rendu
  • Visualisez les 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 calques avec des bordures de calque
  • Trouver 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 performance : case à cocher de mémoire)

Ouvrir l’outil Performances

Pour ouvrir l’outil Performances dans DevTools :

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 Commande+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 Plus d’outils ().

Performances record

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

Performances d’exécution record

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, comme la démonstration Galerie de photos.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans la barre d’activité, sélectionnez l’outil Performances ().

4. Cliquez sur le bouton Enregistrer ().

   

5. Interagissez avec la page pendant un certain temps. DevTools enregistre toute l’activité de page qui se produit à la suite de vos interactions.

6. 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 record

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, comme la démonstration Galerie de photos.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans la barre d’activité, sélectionnez l’outil Performances ().

4. Cliquez sur le bouton Actualiser la ) :

   

   DevTools enregistre les mesures 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 un zoom avant sur la partie de l’enregistrement où la majeure partie de l’activité s’est produite :

   

Capture 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 nettoyage de la mémoire pendant 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 afficher 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 ( de capture).

  Les cases à cocher et les listes déroulantes sont affichées en haut de l’outil Performances :

  

Désactiver les exemples JavaScript

Par défaut, la section principale d’un enregistrement affiche les 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 ( de capture).

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

3. Effectuer un enregistrement de la page.

Les deux figures suivantes montrent la différence entre la désactivation et l’activation des exemples JavaScript. La section principale 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 échantillons JS sont désactivés :

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

Limiter le réseau pendant l’enregistrement

Pour limiter le réseau pendant l’enregistrement :

1. Dans l’outil Performances, cliquez sur le bouton Paramètres de capture ( de capture). Voir 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.

Limitation du processeur pendant l’enregistrement

Pour limiter le processeur pendant l’enregistrement :

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

2. Définissez le processeur 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 capacités de votre ordinateur. Par exemple, l’option de ralentissement x2 permet à votre processeur de fonctionner deux fois plus lentement que la normale. Les DevTools ne simulent 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 de sélecteur CSS

Pour afficher les statistiques de vos sélecteurs de règle CSS lors d’événements de recalcul de style de longue durée :

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

2. Activez la case à cocher Activer les statistiques de sélecteur CSS (lent).

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

Activer l’instrumentation de peinture avancée

Pour afficher les instruments de peinture détaillés :

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

2. Activez la case à cocher Activer l’instrumentation de peinture avancée (lent).

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 le suivi des performances enregistré, 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 illustré 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 le suivi des performances, double-cliquez sur l’élément, entrez-le dans la zone de texte, puis appuyez sur Entrée.

• Connecter deux éléments : Pour dessiner une flèche entre deux éléments du suivi des performances, double-cliquez sur le premier élément, cliquez sur l’icône en forme de flèche en regard de celui-ci, puis sur le deuxième élément.

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

Par exemple, ouvrez la page web de 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 en forme de flèche reliant deux annotations.
• Intervalle de temps annoté surligné 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 sur celle-ci dans l’onglet Annotations , puis cliquez sur le bouton Supprimer en regard de celle-ci.

Pour masquer les annotations de la trace des 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 performance annotés, dans la barre d’action située en haut de l’outil Performances , 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’un enregistrement, puis sélectionner Enregistrer le profil :

Charger un enregistrement

Pour charger un enregistrement à partir d’un fichier, cliquez sur le bouton Profil de chargement () dans la barre d’action située en haut de l’outil Performances .

L’outil Performance affiche les annotations si elles sont présentes dans le tracé.

Ou cliquez avec le bouton droit dans l’outil Performances , puis sélectionnez Charger le profil :

Vous pouvez cliquer avec le bouton droit dans un enregistrement existant ou sur l’écran qui s’affiche dans l’outil Performance lorsqu’il n’y a aucun enregistrement.

Effacer l’enregistrement précédent

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

Analyser un enregistrement de performances

Une fois que vous avez enregistré les performances d’exécution ou enregistré les performances de chargement, l’outil Performance affiche une grande quantité 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 Performances extrait des informations actionnables à partir des données de performances enregistrées. Ces informations sont des moyens par lesquels vous pouvez améliorer les performances de votre site web. Les informations incluent :

• INP par phase
• LCP par phase
• Découverte de demande LCP
• Coupables du changement de disposition
• Demande de blocage du rendu
• Arborescence des dépendances réseau
• Améliorer la remise des images
• Latence des demandes de documents
• Affichage de la police
• Optimiser la fenêtre d’affichage pour mobile
• Optimiser la taille du DOM
• Tierces parties
• Coûts du sélecteur CSS
• Redistribution 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.

Après avoir 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 Insights transmis .

Pour utiliser les insights :

1. Effectuez un enregistrement de performance, par Record performance, 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. L’outil Performances met en surbrillance les événements correspondants dans le suivi :

   

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

Parcourir l’enregistrement

Pour inspecter de près votre enregistrement de performance, vous pouvez sélectionner une partie d’un enregistrement, faire défiler un long graphique en flammes, 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 afin de naviguer rapidement dans l’enregistrement, choisissez d’abord le style de navigation clavier que vous préférez, comme suit :

• Dans le coin supérieur droit de l’outil Performances , 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.

Lorsque le bouton d’option Moderne est sélectionné :

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

Lorsque le bouton d’option Classique est sélectionné :

• Pour effectuer un zoom : molette de la souris ou pavé tactile vers le haut ou vers le bas.
• Pour faire défiler verticalement : Maj + molette de la souris.
• Pour le défilement horizontal : décalage + vers la gauche flèche|vers la droite

Raccourcis supplémentaires :

• Zoom, en appuyant sur W ou S.

• Effectuez un panoramique vers la gauche et la droite en appuyant sur A ou D.

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 CPU 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-vous sur la piste principale ou sur l’un de ses voisins.

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

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

1. Pointez sur la section de vue d’ensemble de la chronologie ou sur l’une des pistes (principale et ses voisines).

2. Avec 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 CPU et NET :

Pour faire défiler un graphique en flammes longues dans la section principale ou dans l’une des sections adjacentes, cliquez longuement 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 qui est 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 Principale ou sélectionnez l’arrière-plan d’une section située à côté de la section Principale , comme Interactions, Réseau ou GPU. Ce flux de travail clavier ne fonctionne que lorsqu’une de ces sections est active.

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 trackpad :

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, CPU et NET . La section Détails est la zone contenant la section principale et la section Interactions .

2. Avec deux doigts, balayez vers le haut pour effectuer un zoom arrière ou vers le bas pour effectuer un zoom avant. Avec deux doigts, balayez vers la gauche pour vous déplacer 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 des parties de votre enregistrement et de créer des barres de navigation à chaque étape, ce qui vous permet de passer d’un niveau de zoom à l’autre.

Pour effectuer un zoom sur une partie de votre enregistrement et utiliser le fil d’Ariane :

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

2. Survolez 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 fil d’Arianie commence à s’accumuler en haut de la vue d’ensemble de la chronologie.

3. Répétez les deux étapes précédentes pour créer un autre fil d’Ariane imbriqué. Vous pouvez continuer à imbriquer le fil d’Ariane tant que la plage de sélection est supérieure à 5 millisecondes.

4. Pour atteindre le niveau de zoom choisi, cliquez sur le fil d’Ariane correspondant dans la chaîne en haut de la vue d’ensemble de la chronologie.

Pour supprimer les enfants d’un fil d’Ariane, cliquez avec le bouton droit sur le fil d’Ariane parent, puis sélectionnez Supprimer le fil d’Ariane enfant :

Faire défiler un graphique en flammes longues

Pour faire défiler un graphique en flammes longues dans la piste principale ou l’une de ses voisines, cliquez longuement, puis faites glisser dans n’importe quelle direction jusqu’à ce que ce que vous recherchez apparaisse.

Rechercher dans les activités

Vous pouvez effectuer une recherche dans les activités de la piste principale et les requêtes dans la piste réseau .

Pour ouvrir la zone de recherche au bas de l’outil Performances :

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

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

   

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

   Les activités correspondantes sont mises en surbrillance dans la section principale à mesure que vous tapez, et le nombre total de correspondances apparaît dans la zone de recherche. La première activité correspondante est sélectionnée, entouré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 Regex puis entrez ^E.* qui trouve 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 des performances, vous pouvez modifier l’ordre des pistes et masquer celles qui ne sont pas pertinentes en mode de configuration de piste.

Pour déplacer et masquer des pistes :

1. Pour entrer dans le 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 piste vers le haut () ou sur Déplacer la piste vers le bas () pour déplacer une piste 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 Performances applique également votre configuration de piste aux nouvelles traces, sauf si vous fermez puis rouvrez DevTools.

Afficher l’activité du thread principal

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

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

DevTools représente l’activité du thread principal avec un graphique en courbes :

L’axe des x représente l’enregistrement au fil du temps. L’axe y représente la pile des appels. Un événement proche du sommet provoque les événements qui se trouvent en dessous ; Par exemple, dans la figure précédente, un input événement a provoqué A Function Call, qui a exécuté une fonction anonyme qui a appelé filterByCamera THEN 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 colorées en fuchsia (violet-rose). Le jaune plus foncé représente l’activité de script et l’événement violet l’événement 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 en flammes détaillé des requêtes JavaScript, consultez la section 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 à partir de la figure précédente.

Lire le graphique en flammes

L’outil Performances représente l’activité du thread principal dans un graphique en flammes. L’axe des x représente l’enregistrement au fil du temps. L’axe y représente la pile des appels. Les événements en haut provoquent les événements en dessous.

L’outil Performances attribue des couleurs aléatoires aux scripts pour décomposer le graphique en flammes et le rendre plus lisible.

Les tâches longues sont également mises en évidence par un triangle rouge et la partie de plus de 50 millisecondes 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() et profileEnd() les fonctions de la console.

Pour masquer le graphique en flammes détaillé des appels JavaScript, consultez Désactiver les exemples JavaScript. Lorsque les exemples JS sont désactivés, seuls 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 relient les initiateurs suivants et les événements qu’ils ont provoqués :

• Invalidation du style ou de la disposition ->Recalculer les styles ou la disposition
• Demander une image d’animation ->Image d’animation déclenchée
• Demander un rappel d’inactivité ->Déclencher un rappel d’inactivité
• Minuterie d’installation ->Minuterie déclenchée
• Créer un WebSocket ->Send... et recevoir une poignée de main WebSocket ou détruire le WebSocket
• Planifier une postTask ->Déclencher une postTask ou Abandonner une tâche

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

Lorsque cette option est sélectionnée, l’onglet Résumé affiche Initiateur pour les liens pour les initiateurs et Initié par pour les 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 en flammes

Pour désencombrer le graphique en 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écidivistes (R)
   • Réinitialiser les enfants (U)
   • Réinitialiser la trace (T)
   • Ajouter un script pour ignorer la liste (I)

   Un bouton déroulant de nombres masqués () apparaît à côté du nom de la fonction avec des enfants masqués.

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

3. Pour réinitialiser une fonction avec des enfants masqués ou l’ensemble du graphique en flammes, 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 en flammes

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

Le graphique réduit les scripts ignorés, les marque comme Liste d’exclusion à ignorer et les ajoute aux Règles d’exclusion personnalisées dans laliste Ignorer les paramètres>DevTools (). > 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 dans un tableau

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

• Pour afficher les activités pour lesquelles le plus de temps a été directement consacré, utilisez l’onglet De bas en haut .

• Pour afficher les activités racines qui causent le plus de travail, utilisez l’onglet Arborescence des appels .

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

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

• Le bouton Activer les expressions régulières (

• Le bouton Activer la recherche sensible à la casse (

Chaque vue tabulaire de l’outil Performances affiche des liens pour des activités telles que les appels de fonctions. Pour vous aider à déboguer, DevTools trouve 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 trouve 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émo. Vous pouvez exécuter la démo vous-même sur Activity Tabs Demo et voir la source sur MicrosoftEdge / Demos > /devtools-performance-activitytabs/.

Activités racines

Voici une explication du concept d’activités racines mentionné dans les sections Onglet Arborescence des appels , Onglet de bas en haut et Journal des événements .

Les activités racines sont des activités qui entraînent le fonctionnement du navigateur. 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, par exemple un gestionnaire.

Dans le graphique en flammes de la section Principale , les activités racines sont 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 afficher les activités principales qui entraînent le plus de 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 de 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 causé Event: mouseup, qui a causé Function Call, quelle cause (anonymous), etc.

Le temps de soi représente le temps directement consacré à cette activité. Le temps total représente le temps consacré à cette activité ou à l’un des enfants.

Cliquez sur Temps personnel, Temps total ou Activité pour trier le tableau 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 le tableau 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 de la pile la plus lourde . La table Pile la plus lourde affiche les enfants de l’activité sélectionnée qui ont mis le plus de temps à s’exécuter.

Onglet de bas en haut

Utilisez l’onglet De bas en haut pour afficher les activités qui ont directement pris le plus de temps dans l’agrégation.

L’onglet de bas en 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 en flammes 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 De bas en haut de la figure précédente sont également a, b, et c. Dans l’onglet De bas en haut , l’activité la plus coûteuse suivante est Minor GC.

La colonne Temps personnel représente le temps agrégé consacré directement à cette activité, sur l’ensemble des occurrences.

La colonne Temps total représente le temps agrégé consacré à 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 de début de cette activité par rapport au début de l’enregistrement. Par exemple, l’heure de début de 925.0 ms l’élément sélectionné dans la figure précédente signifie que l’activité a commencé 925,0 ms après le début de l’enregistrement.

La colonne Temps personnel représente le temps consacré directement à cette activité.

La colonne Temps total représente le temps consacré directement à cette activité ou à l’un des enfants.

Cliquez sur l’en-tête de colonne Heurede début, Temps personnel ou Temps total pour trier le tableau 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 Toutes, 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 le suivi des performances, vous pouvez voir des marqueurs de performances importants, tels que :

• Première peinture (FP)
  • Première peinture (FP) dans le glossaire de MDN.
• First Contentful Paint (FCP)
  • Première peinture contentful (FCP) dans le glossaire de MDN.
  • PerformancePaintTiming sur MDN.
• Largest Contentful Paint (LCP)
  • La plus grande peinture de contenu (LCP) dans le glossaire de MDN.
  • LargestContentfulPaint sur MDN.
• Événement DOMContentLoaded (DCL)
  • Événement DOMContentLoaded (DCL) au niveau MDN.
• Événement de chargement (L)
  • Événement de chargement (L) sur MDN.

Placez le curseur sur le nom d’un marqueur au bas du suivi pour afficher son horodatage.

Afficher les minutages personnalisés

Dans la piste Chronométrage , affichez vos marqueurs de performance personnalisés tels que :

• performance.mark() d’appels.

• performance.measure() d’appels.

Sélectionnez un marqueur pour afficher plus de détails dans l’onglet Résumé , notamment son horodatage, le temps total, le temps personnel et l’objet detail . For performance.mark() and performance.measure() calls, 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 en bas d’une interaction représente le temps passé à attendre le thread principal.

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

Afficher les shifts de disposition

Afficher les shifts de disposition sur la piste Shifts de disposition. Les shifts sont représentés par des losanges violets et sont regroupés en clusters (lignes violettes) en fonction de leur proximité sur la chronologie.

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

Pour afficher plus d’informations sur un ou plusieurs changements de disposition dans l’onglet Résumé avec le minutage, 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) à MDN.

Afficher les animations

Affichez les animations de la piste Animations . Les animations sont nommées en tant que propriétés CSS correspondantes ou éléments (le cas échéant), transform par exemple ou my-element. Les animations non composées sont signalé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 propose deux façons d’analyser les images par seconde :

• Utilisez la section Images pour afficher la durée d’une image particulière. Voir la section Cadres, ci-dessous.

• Utilisez le compteur FPS pour obtenir une estimation en temps réel du FPS au fur et à mesure que la page s’exécute. Voir Afficher des images par seconde en temps réel avec le compteur FPS, ci-dessous.

Section Cadres

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

Placez le curseur 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 une image.

La section Cadres peut afficher quatre types d’images :

• Cadre inactif (blanc). Aucun changement.

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

• Cadre partiellement présenté (jaune avec un motif clairsemé de tirets larges). Microsoft Edge a fait de son mieux pour afficher au moins quelques mises à jour visuelles à temps. Par exemple, si le travail du thread principal du processus de rendu (animation sur toile) est en retard mais que le thread du compositeur (défilement) est dans le temps.

• Cadre supprimé (rouge avec un motif dense de lignes pleines). Microsoft Edge ne peut pas afficher le cadre dans un délai raisonnable.

Cliquez sur un cadre pour afficher plus d’informations sur le cadre dans l’onglet Résumé au bas de l’outil Performances . DevTools contourne l’image sélectionnée en bleu :

Afficher les requêtes de réseau

Développez la section Réseau pour afficher une cascade des demandes réseau qui se sont produites pendant l’enregistrement :

Cliquez sur une requête pour afficher plus d’informations à son sujet dans l’onglet Résumé :

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

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

Les demandes comportent des carrés dans le coin supérieur gauche :

• Un carré bleu plus foncé en haut à gauche d’une demande signifie qu’il s’agit d’une demande de priorité supérieure.
• Un carré bleu plus 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 demandes 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 ces couleurs représentent :

• La ligne de gauche représente tout ce qui se trouve jusqu’au Connection Start groupe d’événements, inclus. En d’autres termes, c’est tout ce qui précède Request Sent, exclusif.

• La partie claire 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 bonne ligne est essentiellement le temps passé à attendre le fil conducteur. Ceci n’est pas représenté dans 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 de performance :

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 segment de mémoire JS dans le graphique Mémoire :

Les lignes colorées sur le graphique correspondent aux cases à cocher colorées au-dessus du graphique. Décochez une case pour masquer cette catégorie dans le 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 3 600 ms et 6 200 ms environ.

Voir aussi :

• Visualisez les fuites de mémoire (Outil de performance : case à cocher de mémoire), ci-dessous.

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

Lors de l’analyse d’une section comme Réseau ou Principal, 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 et faites glisser vers la gauche ou la droite pour sélectionner une partie de l’enregistrement. Au bas de votre sélection, DevTools indique la durée de cette partie :

Afficher une capture d’écran

Pour savoir comment activer les captures d’écran, voir Capture de captures d’écran lors de l’enregistrement, ci-dessus.

Pour afficher une capture d’écran de l’apparence de la page à ce moment de l’enregistrement, pointez sur la vue d’ensemble. La vue d’ensemble est la section qui contient les graphiques CPU 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 dans 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 calques avancées sur une image :

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

2. Dans la section Cadres , sélectionnez un cadre. DevTools affiche des informations sur les calques dans l’onglet Calques au bas de l’outil Performance :

   

L’onglet Couches fonctionne comme l’onglet Couches composites de l’outil Affichage 3D . Pour savoir comment interagir avec l’onglet Couches , consultez Naviguer dans les couches de pages web, z-index et DOM à l’aide de l’outil d’affichage 3D.

Voir 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 ( de capture), puis cochez la case Activer l’instrumentation de rendu avancée (lent).

2. Sélectionnez un événement Paint dans la section principale . DevTools affiche des informations sur l’événement paint dans l’onglet Paint Profiler :

   

Afficher les statistiques du sélecteur CSS

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

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

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

  

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

Voir aussi :

• Analyser les performances du sélecteur CSS pendant les événements de recalcul de style

Afficher les messages entre Windows, iframes et les travailleurs dédiés

L’expérience DevTools Panneau Performances : afficher les flux de distribution et de gestion postMessage Amélioration de la section principale de l’outil Performances pour vous aider à identifier postMessage rapidement les événements et les gestionnaires, en distinguant les événements déclenchés par la postMessage méthode des autres événements affichés dans l’outil Performances. Cette expérience vous permet d’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 le traitement des messages entre les threads d’une application s’affichent sous forme d’événements génériques d’appel de fonction de script. Avec cette expérience activée :

• postMessage les événements de répartition s’affichent en tant que planifier postMessage.
• postMessage Les événements du gestionnaire apparaissent comme Dans le message :

Cette expérience vous permet d’examiner quand un appel s’est postMessage 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 du gestionnaire par des flèches initiateur qui apparaissent lorsque vous cliquez sur l’un ou l’autre des types d’événements :

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

Voir aussi :

• Référence d’événement d’enregistrement des performances
• postMessage Trace Events demo (rendered)
• postMessage Trace Events demo (code source)

Afficher les messages WebSocket

Les activités WebSocket sont affichées dans la piste réseau de l’outil Performances , afin de mettre en corrélation l’activité JavaScript avec les messages WebSocket. Cela peut aider à identifier si les problèmes de latence proviennent de l’analyse d’un message par le client ou de la réponse du serveur.

Pour afficher les messages WebSocket dans l’outil Performances :

1. Accédez à une page web qui envoie des messages WebSocket, telle que l’application de conversation simple, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans la barre d’activité, sélectionnez l’outil Performances ().

4. Dans l’angle supérieur gauche de l’outil Performances , cliquez sur le bouton Enregistrement ().

5. Sur la page web de conversation, dans la zone de texte Nom d’utilisateur , entrez un nom tel que « John », puis cliquez sur le bouton Connexion .

   En bas du formulaire de conversation, un message s’affiche, tel que "John :v8g... connecté."

6. Dans la zone de texte Envoyer un message , saisissez un message, tel que « Bonjour », puis cliquez sur le bouton Envoyer .

   Dans l’application de conversation, un message tel que « Bonjour » s’affiche :

   

   Le trafic WebSocket est généré.

7. Dans l’angle supérieur gauche de l’outil Performances , cliquez sur le bouton Arrêter ().

   Ou bien, au milieu de l’outil Performances , cliquez sur le bouton Arrêter .

   Dans l’outil Performances, la chronologie s’affiche.

8. Développez la piste réseau .

9. Cliquez sur une ligne dorée verticale.

10. En bas de l’outil Performances , dans l’onglet Résumé , des informations sur le message WebSocket sélectionné sont affichées, telles que :

    • Envoyer une poignée de main WebSocket
    • Recevoir une poignée de main WebSocket
    • Recevoir le message WebSocket :

    

Voir aussi :

• Analyser les messages d’une connexion WebSocket dans la référence desfonctionnalités réseau.
• Suivez les initiateurs d’événements, ci-dessus.
• Analyser les performances runtime (didacticiel)

Analyser les performances de rendu avec l’outil de 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 de commande, il s’ouvre en bas de DevTools.

Pour ouvrir l’outil Rendu :

1. Ouvrez une page web, telle que Animation lente, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Si le panneau Affichage rapide n’est pas affiché, sélectionnez Personnaliser et contrôler DevTools () >Activer/désactiver le panneau Affichage rapide.

   Ou appuyez sur Échap.

4. Dans la barre d’outils Affichage rapide , cliquez sur le bouton Plus d’outils (), puis sélectionnez Rendu.

   L’outil Rendu s’ouvre dans le panneau Affichage rapide :

   

Voir aussi :

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

Visualisez les 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 la fréquence d’images par seconde au fur et à mesure que la page s’exécute. Pour ouvrir le compteur FPS :

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

2. Cochez la case Statistiques de rendu d’images . La superposition du compteur FPS apparaît 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 repeinte, DevTools souligne cette section en vert.

Pour activer la peinture clignotante :

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

2. Cochez la case Peinture clignotante . Les contours verts apparaissent sur la page web rendue :

   

Afficher une superposition de calques avec des bordures de calque

Pour afficher une superposition de bordures de couches et de tuiles en haut de la page :

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

2. Cochez la case Bordures de calque . Les bordures de calque apparaissent sur la page web rendue :

   

Voir les commentaires dans debug_colors.cc pour une explication des codes couleurs.

Trouver 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 dont les écouteurs d’événements liés au défilement peuvent nuire aux performances de la page. DevTools décrit les éléments potentiellement problématiques dans Teal.

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

1. Ouvrez l’outil de rendu , comme décrit dans Analyser les performances de rendu avec l’outil de 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 :

• Faire défiler lentement les rectangles (case à cocher) dans Naviguer dans les couches de pages web, z-index et DOM à l’aide de l’outil d’affichage 3D.

Désactiver les polices locales

Dans l’outil Rendu , utilisez la case à cocher 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 Désactiver les polices locales est sélectionné, DevTools ignore les local() polices et récupère chaque police sur le réseau :

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

• Une police locale pour vos outils de conception.
• Une 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 performance : case à cocher de mémoire)

Comme point de départ pour examiner l’utilisation de la mémoire d’une page web, utilisez la case à cocher Mémoire de l’outil Performances. (Ou surveillez l’utilisation de la mémoire en temps réel (Gestionnaire des tâches du navigateur).)

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

1. Dans DevTools, ouvrez l’outil Performances .

2. Cochez la case Mémoire .

3. Effectuez un enregistrement, par Record performance, ci-dessus.

Il est recommandé de commencer et de terminer votre enregistrement par un nettoyage forcé de la mémoire. Pour forcer le nettoyage de la mémoire, cliquez sur le bouton Collecter les ordures de la mémoire lors de l’enregistrement.

Pour illustrer les enregistrements de mémoire, tenez compte du 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 placée sur le 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 graphique HEAP dans le volet Vue d’ensemble (sous NET) représente le segment de mémoire JS. Sous le volet Vue d’ensemble se trouve le volet Compteur . L’utilisation de la mémoire est répartie par segment de mémoire JS (identique au graphique HEAP dans le volet Vue d’ensemble ), documents, nœuds DOM, écouteurs et mémoire GPU. Décochez une case pour le masquer du graphique.

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

Le graphique de tas JS (le graphique bleu) n’est pas aussi simple. Conformément aux meilleures pratiques, le premier plongeon est en fait un ramassage forcé des ordures (cliquez sur le bouton ramasser les ordures ).

Au fur et à mesure de l’enregistrement, les pics de taille de segment de mémoire JS s’affichent. C’est naturel et attendu : le code JavaScript crée les nœuds DOM à chaque bouton sur lequel vous cliquez, et fait beaucoup de travail lorsqu’il crée la chaîne d’un million de caractères.

L’élément 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 ramassage forcé des ordures). Dans le monde réel, si vous voyiez ce modèle d’augmentation de la taille du tas JS ou de la taille du nœud, cela indiquerait potentiellement une fuite de mémoire.

Voir aussi :

• Afficher les métriques de mémoire, ci-dessus.

Ce travail est sous licence Creative Commons Attribution 4.0 International.