1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: Vue "Agrégats"
slug: Tools/Memory/Aggregate_view
translation_of: Tools/Memory/Aggregate_view
original_slug: Outils/Memory/Aggregate_view
---
<div>{{ToolsSidebar}}</div><p>Avant Firefox 48 il s'agissait de la vue par défaut. Après Firefox 48, la <a href="/fr/docs/Tools/Memory/Tree_map_view">vue "Carte proportionnelle"</a> est la vue par défaut. Pour afficher la vue "Agrégats", il suffit de le sélectionner dans la liste déroulante "vue" :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13028/memory-tool-switch-view.png" style="display: block; height: 270px; margin-left: auto; margin-right: auto; width: 716px;"></p>
<p>Cette vue ressemble à ceci :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13030/memory-tool-aggregate-view.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p>
<p>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 :</p>
<ul>
<li>{{anch("Type")}}</li>
<li>{{anch("Call Stack")}}</li>
<li>{{anch("Inverted Call Stack")}}</li>
</ul>
<p>Pour passer de l'une à l'autre, il suffit d'utiliser la liste déroulante "Trier par" en haut du panneau.</p>
<p>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.</p>
<h2 id="Type">Type</h2>
<p>Il s'agit du tri par défaut qui ressemble à ceci :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13030/memory-tool-aggregate-view.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p>
<p>Cette option regroupe la heap par grandes catégories :</p>
<ul>
<li><strong>JavaScript objects:</strong> tels que des <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> ou des <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code></li>
<li><strong>DOM elements:</strong> tel que <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> ou <code><a href="/fr/docs/Web/API/Window">Window</a></code></li>
<li><strong>Strings:</strong> listées en tant que <code>"strings"</code></li>
<li><strong>JavaScript sources:</strong> listées en tant que "<code>JSScript"</code></li>
<li><strong>Internal objects:</strong> tels que "<code>js::Shape</code>". Ce type est préfixé de <code>"js::"</code>.</li>
</ul>
<p>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 <code>Object</code>s JavaScriptoccupent la plus grande partie de la mémoire. Suivis par les stings.</p>
<ul>
<li>La colone "Somme" affiche le nimbre total d'objets alloués dans chaque catégorie.</li>
<li>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.</li>
</ul>
<div class="pull-aside">
<div class="moreinfo">Les captures d'écran sur cette page montrent des instantanés capturés grâce à <a href="/fr/docs/Tools/Memory/Monster_example">l'exemple "monster"</a></div>
</div>
<p>Par exemple, dans la capture d'écran ci-dessus, on peut voir que :</p>
<ul>
<li>Il y a quatre objects <code>Array</code></li>
<li>Ceux-ci représentent 15% de la heap totale.</li>
</ul>
<p>A coté du nom de chaque type, on trouve une icône en forme de trois étoiles en triangle :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13054/memory-tool-in-group-icon.png" style="display: block; height: 136px; margin-left: auto; margin-right: auto; width: 496px;"></p>
<p>Cliquer sur cette icône affichera toutes les instances de ce type. Par exemple cliquer sur l'icône de <code>Array</code> affichera les quatre instances :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13032/memory-tool-in-group.png" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 716px;"></p>
<p>Pour chaque instance, on peut voir <a href="/fr/docs/Tools/Memory/Dominators#Shallow_and_retained_size"> taille retenue et la taille de l'objet</a> 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).</p>
<p>Dans la partie droite, on retrouve un panneau qui affiche simplement une phrase. Sélectionner un noeud affichera <a href="/fr/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel"> chemins de rétention :</a></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13034/memory-tool-in-group-retaining-paths.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 716px;"></p>
<p>{{EmbedYouTube("uLjzrvx_VCg")}}</p>
<h2 id="Call_Stack">Call Stack</h2>
<p>La pile d'allocation (call stack) affiche exactement ou dans le code sont faites des allocations sur la heap.</p>
<p>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 <em>avant</em> d'allouer la mémoire dans la capture.</p>
<p>Une liste de toutes les fonctions qui ont alloué des objets s'affichera alors. Cette liste est triée par la taille des allocations :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"><br>
La structure de ce tri ressemble fortement à celle de <a href="/fr/docs/Tools/Performance/Call_Tree">l'Arbre d'appel</a>, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :</p>
<ul>
<li>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", <strong>ou dans des fonctions appelées par cette fonction</strong></li>
</ul>
<p>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.</p>
<p>Il est plus simple d'expliquer ce comportement avec un exemple. <a href="/fr/docs/Tools/Memory/DOM_allocation_example">Cette page contient</a> contient simplement un script qui génère un grand nombre de nœuds DOM (200 objets <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> et 4000 objets <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>) :</p>
<p>Réalisons maintenant une allocation trace. Pour cela, il faut :</p>
<ol>
<li>Ouvrir l'outil Mémoire</li>
<li>Cocher "Enregistrer les piles d'allocations"</li>
<li>Charger la page <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a></li>
<li>Prendre une capture</li>
<li>Choisir la vue "Agrégats"</li>
<li>Choisir le regroupement par "Call Stack"</li>
</ol>
<p>{{EmbedYouTube("aZ5Rq9lXD80")}}</p>
<p>Quelque chose comme ceci devrait apparaitre :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"></p>
<p>Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à <code>createToolbars()</code>).</p>
<p>Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13042/memory-tool-call-stack-expanded.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 762px;"></p>
<p>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.</p>
<p>Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans <code>createToolbarButton()</code>, à <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/dom-allocs/scripts/alloc.js#L9">la ligne 9 de alloc.js</a>, 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.</p>
<p>Les noms de fichier et leur numéro de ligne sont des liens : cliquer dessus ouvrira la ligne en question dans le Débogueur :</p>
<p>{{EmbedYouTube("zlnJcr1IFyY")}}</p>
<h2 id="Inverted_Call_Stack">Inverted Call Stack</h2>
<p>La vue par défaut est une vue "top-down" : elle affiche les allocations qui arrivent à un point <strong>ou en des points plus loin dans l'arbre</strong>. 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.</p>
<p>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.</p>
<p>Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13044/memory-tool-inverted-call-stack.png" style="display: block; height: 141px; margin-left: auto; margin-right: auto; width: 762px;"></p>
<p>Maintenant, la première ligne affiche directement l'appel <code>createToolbarButton()</code> qui correspond à l'allocation de 89% de la heap de la page.</p>
<h2 id="(no_stack_available)">(no stack available)</h2>
<p>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.</p>
<p>Exemples d'usage de la heap non alloué par un script :</p>
<ul>
<li>Tous les scripts que la page charge occupent de l'espace dans la heap</li>
<li>Quelques fois, un objet est alloué lorsqu'il n'y a pas de JavaScript sur la stack. Par exemple, les objets DOM {{domxref("Event")}} sont alloués avant que le JavaScript ne soit exécuté et avant que les évènements ne soient appelés.</li>
</ul>
<p>Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.</p>
|
