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.
Il s'agit du tri par défaut qui ressemble à ceci :
Cette option regroupe la heap par grandes catégories :
Function ou des ArrayHTMLSpanElement ou Window"strings"JSScript"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.
Par exemple, dans la capture d'écran ci-dessus, on peut voir que :
ArrayA 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 :
{{EmbedYouTube("uLjzrvx_VCg")}}
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 :
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 :
{{EmbedYouTube("aZ5Rq9lXD80")}}
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 {{HTMLElement("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 :
{{EmbedYouTube("zlnJcr1IFyY")}}
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.
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 :
Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.