Remarque
L’accès à cette page requiert une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page requiert une autorisation. Vous pouvez essayer de modifier des répertoires.
Pour identifier les fonctions coûteuses, utilisez l’outil Mémoire :
Enregistrez exactement quelles fonctions ont été appelées et la quantité de mémoire requise par chacune d’elles à l’aide de l’échantillonnage d’allocation dans l’outil Mémoire .
Visualisez vos profils sous forme de graphique en flammes.
Utilisez le type de profilage « Échantillonnage d’allocation » pour afficher l’allocation de mémoire par la fonction JavaScript
Si vous remarquez des à-coups (interruptions de rendu) dans votre code JavaScript, collectez un profil d’échantillonnage d’allocation de mémoire à l’aide du type de profilage d’échantillonnage d’allocation . Un profil d’échantillonnage indique les fonctions allouées le plus de mémoire.
Pour utiliser le type de profilage d’échantillonnage d’allocation pour afficher l’allocation de mémoire par la fonction JavaScript :
Ouvrez une page web, telle que la page web de démonstration Detached Elements, dans une nouvelle fenêtre ou un nouvel onglet.
Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.
Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Commande+Option+I (macOS). DevTools s’ouvre.
Dans DevTools, dans la barre d’activité, sélectionnez l’outil Mémoire (
) :
Si l’outil Mémoire n’est pas visible, cliquez sur le bouton Autres outils (
), puis sélectionnez Mémoire.Sélectionnez le bouton d’option Échantillonnage d’allocation .
Si le bouton d’option Échantillonnage d’allocation n’est pas affiché parce qu’un profil est déjà affiché, dans le coin supérieur gauche, cliquez sur Profils (
).Dans la section Sélectionner une instance de machine virtuelle JavaScript, s’il y a un travail sur la page, vous pouvez le sélectionner comme cible de profilage.
Dans la partie inférieure de l’outil Mémoire , cliquez sur le bouton Démarrer .
interagir avec la page web. Par exemple, cliquez sur le bouton Trafic rapide , puis sur le bouton Arrêter sur la page web de démonstration.
En fonction de ce que vous essayez d’analyser, vous pouvez soit actualiser la page, interagir avec la page ou simplement laisser la page s’exécuter.
Dans le coin supérieur gauche de l’outil Mémoire, cliquez sur le bouton Arrêter le profilage du tas (
Ou, au bas de l’outil Mémoire , cliquez sur le bouton Arrêter . Un nouveau profil est ajouté dans la section Profils d’échantillonnage de la barre latérale Profils :
Le profil d’échantillonnage présente une répartition de l’allocation de mémoire par fonction. L’affichage par défaut est Lourd (de bas en haut). Vous pouvez passer à l’affichage Graphique ou Arborescence (de haut en bas), conformément à la section ci-dessous.
Vous pouvez également utiliser l’API Utilitaires de la console pour enregistrer et regrouper des profils à partir de la ligne de commande.
Modifier l’affichage d’un profil d’échantillonnage
Pour modifier l’ordre de tri dans un profil d’échantillonnage d’allocation de mémoire, utilisez la liste déroulante Mode d’affichage du profil , qui indique initialement Lourd (bas en haut) :
Menuitems :
- Graphique - Tableau chronologique de l’enregistrement.
- Lourd (de bas en haut) : répertorie les fonctions appelées de l’application par ordre d’allocation de mémoire et indique le chemin d’appel de chaque fonction. Vue par défaut.
- Arborescence (de haut en bas) : affiche la structure des appels, en commençant par le haut de la pile des appels.
Graphique
Le mode d’affichage Graphique affiche un graphique chronologique de l’enregistrement :
Lourd (bas en haut)
Le mode d’affichage intensif (de bas en haut) répertorie les fonctions en fonction de leur impact sur les performances et vous permet d’examiner les chemins d’appel vers les fonctions. Il s’agit de l’affichage par défaut :
Arbre (de haut en bas)
Le mode d’affichage Arborescence (de haut en bas) affiche une vue d’ensemble de la structure appelante, en commençant par le haut de la pile des appels :
Exclure des fonctions
Lorsque l’option Lourd (de bas en haut) ou Arborescence (de haut en bas) est sélectionnée (et non Graphique), plusieurs boutons sont disponibles (non grisés) lorsque vous sélectionnez une ligne :
-
Fonction Focus sélectionnée (
-
Exclure la fonction sélectionnée (
) -
Restaurer toutes les fonctions (
)
Pour exclure une fonction d’un profil d’échantillonnage d’allocation de mémoire, sélectionnez le profil d’échantillonnage, puis cliquez sur le bouton Exclure la fonction sélectionnée (). La fonction requérante (parent) de la fonction exclue (enfant) est chargée de la mémoire allouée affectée à la fonction exclue (enfant).
Cliquez sur le bouton Restaurer toutes les fonctions () pour restaurer toutes les fonctions exclues dans l’enregistrement.
Afficher un profil d’échantillonnage d’allocation de mémoire sous forme de graphique
La vue graphique fournit une représentation visuelle du profil d’échantillonnage au fil du temps.
Après avoir enregistré un profil d’échantillonnage d’allocation de mémoire, visualisez l’enregistrement sous forme de graphique en flammes. Sélectionnez Graphique dans la liste déroulante du mode d’affichage Profil (qui indique initialement Lourd (bas vers le haut)) :
Le graphique en flammes est divisé en deux parties :
| Index | Élément | Description |
|---|---|---|
| 1 | Vue d’ensemble | Vue aérienne de l’ensemble de l’enregistrement. La hauteur des barres correspond à la profondeur de la pile d’appels. Ainsi, plus la barre est haute, plus la pile des appels est profonde. |
| 2 | Piles d’appels | Il s’agit d’une vue détaillée des fonctions qui ont été appelées pendant l’enregistrement. L’axe horizontal correspond à l’heure et l’axe vertical à la pile des appels. Les piles sont organisées de haut en bas. Ainsi, la fonction en haut appelée celle en dessous, et ainsi de suite. |
Les fonctions sont colorées de façon aléatoire. Il n’y a aucune corrélation avec les couleurs utilisées dans les autres panneaux. Toutefois, les fonctions sont toujours de la même couleur entre les appels, afin que vous puissiez observer des modèles dans chaque exécution.
Une pile d’appels importante n’est pas nécessairement importante ; cela pourrait simplement signifier que de nombreuses fonctions ont été appelées. Mais une barre large signifie qu’une fonction a pris beaucoup de temps, ce sont donc des candidats à l’optimisation.
Zoom avant sur des parties spécifiques de l’enregistrement
Pour zoomer sur des parties particulières de la pile des appels, cliquez et faites glisser vers la gauche et la droite sur la vue d’ensemble. Une fois que vous avez zoomé, la pile des appels affiche automatiquement la partie de l’enregistrement que vous avez sélectionnée.
Afficher les détails de la fonction
Cliquez sur une fonction pour l’afficher dans l’outil Sources .
Placez le curseur sur une fonction pour afficher le nom et les données de minutage :
| Détails | Description |
|---|---|
| Name | Nom de la fonction. |
| Taille de soi | Taille de l’appel actuel de la fonction, y compris uniquement les instructions de la fonction. |
| Taille totale | Taille de l’appel actuel de cette fonction et de toutes les fonctions qu’elle a appelées. |
| URL | L’emplacement de la définition de fonction sous la forme de base.js:261 où base.js est le nom du fichier dans lequel la fonction est définie et 261 est le numéro de ligne de la définition. |
Étudiez l’allocation de mémoire, avec moins de déchets (cases à cocher « Inclure les objets »)
Par défaut, le type de profilage d’échantillonnage d’allocation signale uniquement les allocations qui sont encore actives à la fin de la session d’enregistrement. Les objets créés, supprimés, puis ramassés (GC’d) ne sont pas affichés dans l’outil Mémoire lors du profilage à l’aide des types de profilage d’échantillonnage d’allocation ou d’allocations sur la chronologie.
Vous pouvez faire confiance au navigateur pour propre les déchets de votre code. Cependant, il est important de tenir compte du fait que le GC lui-même est une opération coûteuse et que plusieurs GC peuvent ralentir l’expérience de votre utilisateur de votre site Web ou de votre application. Lors de l’enregistrement dans l’outil Performance avec la case à cocher Mémoire activée, vous pouvez voir l’opération GC se produire sur les falaises abruptes (diminutions soudaines) dans le graphique de segment de mémoire :
En réduisant la quantité de déchets que votre code crée, vous pouvez réduire le coût de chaque GC individuel et le nombre d’opérations du GC.
Suivre les objets rejetés par GC
Pour suivre les objets mis au rebut par le nettoyage de la mémoire :
Dans l’outil Mémoire , sélectionnez le bouton d’option d’échantillonnage d’allocation .
Cliquez sur les paramètres Inclure les objets rejetés par le GC principal et Inclure les objets rejetés par le GC mineur .
Cliquez sur le bouton Démarrer.
Sur la page web, effectuez les actions que vous souhaitez examiner.
Cliquez sur le bouton Arrêter lorsque vous avez terminé toutes vos actions.
DevTools effectue désormais le suivi de tous les objets qui ont été ramassés par la mémoire pendant l’enregistrement. Utilisez ces paramètres pour comprendre la quantité de déchets générés par votre site web ou votre application. Les données rapportées par l’échantillonnage d’allocation vous aideront à identifier les fonctions qui génèrent le plus de déchets.
Si vous examinez des objets qui n’ont été utilisés que lors d’opérations de GC majeures ou mineures, configurez les paramètres appropriés pour suivre l’opération qui vous intéresse. Pour en savoir plus sur les différences entre GC majeur et mineur, voir Trash talk : le ramasse-miettes de l’Orénoque | V8 Blog des développeurs du moteur JavaScript.
Remarque
Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Kayce Basques et Meggin Kearney.
Ce travail est sous licence Creative Commons Attribution 4.0 International.