MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Avant Firefox 48 il s'agissait de la vue par défaut. Après Firefox 48, la vue "Carte proportionnelle" est la vue par défaut. Pour afficher la vue "Agrégats", il suffit de le sélectionner dans la liste déroulante "vue" :

Cette vue ressemble à ceci :

Cela représente un tableau qui affiche une liste triée du contenu de la heap. Il y a trois façons différentes de visualiser la heap :

Pour passer de l'une à l'autre, il suffit d'utiliser la liste déroulante "Trier par" en haut du panneau.

En haut à droite, se trouve le champ "Filtrer". Il permet de filtrer le contenu affiché, afin par exemple de pouvoir rapidement voir combien d'objets d'une classe ont été alloués.

Type

Il s'agit du tri par défaut qui ressemble à ceci :

Cette option regroupe la heap par grandes catégories :

  • JavaScript objects: tels que des Function ou des Array
  • DOM elements: tel que HTMLSpanElement ou Window
  • Strings: listées en tant que "strings"
  • JavaScript sources: listées en tant que "JSScript"
  • Internal objects: tels que "js::Shape". Ce type est préfixé de "js::".

Chaque type occupe une ligne du tableau. Les lignes sont triées par ordre décroissant d'utilisation mémoire. Par exemple dans la capture d'écran ci-dessus, il est possible de voir que les Objects JavaScriptoccupent la plus grande partie de la mémoire. Suivis par les stings.

  • La colone "Somme" affiche le nimbre total d'objets alloués dans chaque catégorie.
  • La colonne "Octets" affiche le nombre d'octets occupés par les objets de chaque catégorie, et le pourcentage de la taille totale de la heap que cela représente.
Les captures d'écran sur cette page montrent des instantanés capturés grâce à l'exemple "monster"

Par exemple, dans la capture d'écran ci-dessus, on peut voir que :

  • Il y a quatre objects Array
  • Ceux-ci représentent 15% de la heap totale.

A coté du nom de chaque type, on trouve une icône en forme de trois étoiles en triangle :

Cliquer sur cette icône affichera toutes les instances de ce type. Par exemple cliquer sur l'icône de Array affichera les quatre instances :

Pour chaque instance, on peut voir taille retenue et la taille de l'objet de cette instance. Dans ce cas, il est possible de voir que les trois premiers tableaux ont une taille importante (5% du total de la heap) et une traille retenue encore plus importante (26% du total).

Dans la partie droite, on retrouve un panneau qui affiche simplement une phrase. Sélectionner un noeud affichera chemins de rétention :

Call Stack

La pile d'allocation (call stack) affiche exactement ou dans le code sont faites des allocations sur la heap.

Cette option étant gourmande en terme de performances, elle n'est pas activée par défaut. Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations avant d'allouer la mémoire dans la capture.

Une liste de toutes les fonctions qui ont alloué des objets s'affichera alors. Cette liste est triée par la taille des allocations :


La structure de ce tri ressemble fortement à celle de l'Arbre d'appel, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :

  • 4,832,592 octets (93% de l'utilisation totale de la heap), ont été alloués dans une fonction à la ligne 35 du fichier "alloc.js", ou dans des fonctions appelées par cette fonction

Il est possible d'utiliser l'icône en forme de triangle pour avoir plus de précisions et trouver l'endroit exact d'où l'allocation à été faite.

Il est plus simple d'expliquer ce comportement avec un exemple. Cette page contient contient simplement un script qui génère un grand nombre de nœuds DOM (200 objets HTMLDivElement et 4000 objets HTMLSpanElement) :

Réalisons maintenant une allocation trace. Pour cela, il faut :

  1. Ouvrir l'outil Mémoire
  2. Cocher "Enregistrer les piles d'allocations"
  3. Charger la page https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html
  4. Prendre une capture
  5. Choisir la vue "Agrégats"
  6. Choisir le regroupement par "Call Stack"

Quelque chose comme ceci devrait apparaitre :

Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à createToolbars()).

Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :

C'est dans ce cas que les colonnes "Octets" et "Somme" sont utiles. Elles révèlent en effet la taille et le nombre des allocations faites à ce point précis.

Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans createToolbarButton(), à la ligne 9 de alloc.js, 4002 allocations ont été faites et que cela représente 89% de la heap totale. Il s'agit de l'endroit exact ou les éléments <span> sont crées.

Les noms de fichier et leur numéro de ligne sont des liens : cliquer dessus ouvrira la ligne en question dans le Débogueur :

Inverted Call Stack

La vue par défaut est une vue "top-down" : elle affiche les allocations qui arrivent à un point ou en des points plus loin dans l'arbre. C'est pratique pour avoir une vue d'ensemble des endroits ou le programme consomme beaucoup de mémoire. Cependant cette vue implique de devoir parcourir un long chemin pour trouver l'emplacement exact d'où les allocations sont faites.

L'option "Inverser l'arbre" aide à résoudre ce problème. Cela donne en effet une vue "bottom-up" du programme, affichant les endroits exacts d'où les allocations proviennent, ordonnés par taille d'allocation. L'icône en forme de triangle fait alors un retour au premier niveau de l'arbre.

Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :

Maintenant, la première ligne affiche directement l'appel createToolbarButton() qui correspond à l'allocation de 89% de la heap de la page.

(no stack available)

Dans l'exemple ci-dessus, il y a une ligne nommée "(no stack available)" qui correspond à 7% de la heap. La présence de cette ligne s'explique par le fait que toute l'utilisation de la heap n'est pas due au script JavaScript.

Exemples d'usage de la heap non alloué par un script :

  • Tous les scripts que la page charge occupent de l'espace dans la heap
  • Quelques fois, un objet est alloué lorsqu'il n'y a pas de JavaScript sur la stack. Par exemple, les objets DOM Event sont alloués avant que le JavaScript ne soit exécuté et avant que les évènements ne soient appelés.

Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore, solfen
 Dernière mise à jour par : maximelore,