unslug fr: move

8 files changed, 679 insertions, 0 deletions

diff --git a/files/fr/tools/memory/aggregate_view/index.html b/files/fr/tools/memory/aggregate_view/index.html
new file mode 100644
index 0000000000..add2eb1979
--- /dev/null
+++ b/files/fr/tools/memory/aggregate_view/index.html
@@ -0,0 +1,149 @@
+---
+title: Vue "Agrégats"
+slug: Outils/Memory/Aggregate_view
+translation_of: Tools/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>
diff --git a/files/fr/tools/memory/basic_operations/index.html b/files/fr/tools/memory/basic_operations/index.html
new file mode 100644
index 0000000000..e132baed90
--- /dev/null
+++ b/files/fr/tools/memory/basic_operations/index.html
@@ -0,0 +1,64 @@
+---
+title: Opérations de base
+slug: Outils/Memory/Basic_operations
+translation_of: Tools/Memory/Basic_operations
+---
+<div>{{ToolsSidebar}}</div><h2 id="Ouvrir_l'outil_Mémoire">Ouvrir l'outil Mémoire</h2>
+
+<p>L'outil Mémoire n'est pas activé par défaut. Pour l'activer, il faut ouvrir et cocher la case "Mémoire" dans la catégorie "Outils de développement pas défaut" :</p>
+
+<p>{{EmbedYouTube("qi-0CoCOXwc")}}</p>
+
+<p>Depuis Firefox 50, l'outil mémoire est activé par défaut.</p>
+
+<h2 id="Capturer_un_instantané">Capturer un instantané</h2>
+
+<p>Pour capturer un instantané de la heap il faut cliquer sur le bouton "Capturer un instantané" ou sur l'icône en forme d'appareil photo, en haut à gauche :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13651/memory-1-small.png" style="display: block; height: 244px; margin: 0px auto; width: 900px;"></p>
+
+<p>L'instantané, occupera une large partie du panneau de droite. Sur la gauche, il y aura une liste des instantanés capturée. Ce panneau inclut le timestamp, la taille et les actions supprimer/enregistrer :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13653/memory-2-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<h2 id="Supprimer_un_instantané">Supprimer un instantané</h2>
+
+<p>Pour supprimer un instantané, il suffit de cliquer sur l'icône "X" :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13655/memory-3-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<h2 id="Sauvegarder_et_charger_des_instantanés">Sauvegarder et charger des instantanés</h2>
+
+<p>Fermer l'outil, supprimera tous les instantanés non sauvegardés. Pour sauvegarder un instantané, il suffit de cliquer sur "Enregistrer" :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13657/memory-4-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<p>Il vous sera ensuite demandé un nom et un emplacement. Le fichier sera alors enregistré avec une extension <code>.fxsnapshot</code></p>
+
+<p>Pour charger un instantané depuis un fichier <code>.fxsnapshot</code>, il faut de cliquer sur le bouton en forme de rectangle avec un flèche pointée vers le haut (avant Firefox le bouton avait le texte "Importer") :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13659/memory-5-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<p>Il suffit ensuite de sélectionner un instantané précédemment enregistré sur votre disque.</p>
+
+<h2 id="Comparer_des_instantanés">Comparer des instantanés</h2>
+
+<p>À partir de Firefox 45, il est possible de comparer deux instantanés. Le diff affiche les endroits ou de la mémoire a été allouée, et où de la mémoire a été libéré entre les deux instantanés.</p>
+
+<p>Pour créer une diff, il faut cliquer sur l'icône en forme de diagramme de Venn en haut à gauche (note: avant Firefox 47, l'icône ressemblait à un "+/-") :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13661/memory-6-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<p>Il faut ensuite sélectionner l'instantané qui sert de base de comparaison puis l'instantané à comparer. L'outil affiche alors les différences entre les deux instantanés :</p>
+
+<p>{{EmbedYouTube("3Ow-mdK6b2M")}}</p>
+
+<div class="note">
+<p>Lors d'une comparaison, il n'est pas possible d'utiliser la vue "Dominants" ou "Carte proportionnelle"</p>
+</div>
+
+<h2 id="Enregistrer_les_piles_d'allocations">Enregistrer les piles d'allocations</h2>
+
+<p>L'outil Mémoire permet de savoir exactement où dans le code la mémoire est allouée. Cependant, enregistrer ces informations a un cout en performance. Il faut donc activer manuellement l'enregistrement <em>avant </em>de faire les allocations mémoires. Pour cela, il suffit de cocher la case "Enregistrer les pilles d'allocations" :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13663/memory-7-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
diff --git a/files/fr/tools/memory/dom_allocation_example/index.html b/files/fr/tools/memory/dom_allocation_example/index.html
new file mode 100644
index 0000000000..0f3a4b04d6
--- /dev/null
+++ b/files/fr/tools/memory/dom_allocation_example/index.html
@@ -0,0 +1,54 @@
+---
+title: Exemple d'allocation DOM
+slug: Outils/Memory/DOM_allocation_example
+translation_of: Tools/Memory/DOM_allocation_example
+---
+<div>{{ToolsSidebar}}</div><p>Cet article décrit une page web très simple qui sera utilisée pour illustrer certaines fonctionnalités de l'outil Mémoire.</p>
+
+<p>Il est possible de visiter le site à l'adresse : <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a>.</p>
+
+<p>Cette page contient simplement un script qui crée un grand nombre de noeuds DOM :</p>
+
+<pre class="brush: js">var toolbarButtonCount = 20;
+var toolbarCount = 200;
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function createToolbarButton() {
+  var toolbarButton = document.createElement("span");
+  toolbarButton.classList.add("toolbarbutton");
+  // empêche Spidermonkey de partager les instances
+  toolbarButton[getRandomInt(0,5000)] = "foo";
+  return toolbarButton;
+}
+
+function createToolbar() {
+  var toolbar = document.createElement("div");
+  // empêche Spidermonkey de partager les instances
+  toolbar[getRandomInt(0,5000)] = "foo";
+  for (var i = 0; i &lt; toolbarButtonCount; i++) {
+    var toolbarButton = createToolbarButton();
+    toolbar.appendChild(toolbarButton);
+  }
+  return toolbar;
+}
+
+function createToolbars() {
+  var container = document.getElementById("container");
+  for (var i = 0; i &lt; toolbarCount; i++) {
+    var toolbar = createToolbar();
+    container.appendChild(toolbar);
+  }
+}
+
+createToolbars();</pre>
+
+<p>Voici une représentation en pseudo-code de ce que fait ce code :</p>
+
+<pre>createToolbars()
+    -&gt; createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois
+       -&gt; createToolbarButton() // appelé 20 fois par <em>toolbar</em>, crée un élément SPAN à chaque fois</pre>
+
+<p>Ainsi, au total ce code crée 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>
diff --git a/files/fr/tools/memory/dominators/index.html b/files/fr/tools/memory/dominators/index.html
new file mode 100644
index 0000000000..30dee2db22
--- /dev/null
+++ b/files/fr/tools/memory/dominators/index.html
@@ -0,0 +1,62 @@
+---
+title: Dominants
+slug: Outils/Memory/Dominators
+translation_of: Tools/Memory/Dominators
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary" id="Concepts">
+<p>Cet article fournit une introduction aux concepts d'<em>Accessibilité</em>, de taille <em>Objet</em> et de taille <em>Retenue</em>, ainsi que des <em>Dominants</em>, et de comment ses concepts s'appliquent dans des langages à ramasse-miette (garbage-collector) comme le JavaScript.</p>
+
+<p>Ces concepts sont importants pour l'analyse mémoire, car souvent, un objet peut être en lui même petit, mais contenir des références à des objets beaucoup plus gros et cela empêche le ramasse-miette de collecter ces objets et de libérer de la mémoire.</p>
+
+<p>Il est possible de voir les dominants d'une page en utilisant la <a href="/fr/docs/Tools/Memory/Dominators_view">Vue "Dominants"  </a>dans l'outil Mémoire.</p>
+</div>
+
+<p>Dans un langage comme JavaScript, les programmeurs n'ont généralement pas à se soucier de la gestion de la mémoire. Ils peuvent simplement créer des objets, les utiliser, et lorsque ceux-ci ne sont plus nécessaires, le runtime se charge de faire le nettoyage, et libère la mémoire que les objets utilisaient.</p>
+
+<h2 id="Accessibilité"><em>Accessibilité</em></h2>
+
+<p>Dans les implémentations modernes de JavaScript, le runtime décide de quand un objet n'est plus nécessaire en se basant sur <em>l'accessibilité</em>. Dans ce système, la heap est représentée par un ou plusieurs graphes. Chaque noeud dans le graphe représente un objet, et chaque connexion entre les noeuds (edge) représente une référence d'un objet à un autre. Le graphe commence au noeud racine, indiqué dans les diagrammes suivant par un "R" :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12383/memory-graph.svg" style="display: block; height: 268px; margin-left: auto; margin-right: auto; width: 384px;"></p>
+
+<p>Lors du passage du ramasse-miette, le runtime parcourt le graphe à partir de la racine et marque chaque objet qu'il trouve. Tous les objets qui ne sont pas trouvés dans ce parcours, ne sont pas accessibles et peuvent être désalloués.</p>
+
+<p>Donc lorsqu'un objet devient inaccessible (par exemple parce qu'il était référencé par une seule variable locale qui sort du scope actuel) alors tout objet qu'il référence devient également inaccessible à son tour (sauf s’il était référencé par d'autres objets qui sont eux toujours accessibles) :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12375/memory-graph-unreachable.svg" style="display: block; height: 267px; margin-left: auto; margin-right: auto; width: 383px;"></p>
+
+<p>A l'inverse, cela veut dire que des objets sont gardés en vie tant qu'un autre objet accessible comporte une référence à cet objet.</p>
+
+<h2 id="Taille_de_lobjet_et_taille_retenue">Taille de l'objet et taille retenue</h2>
+
+<p>Tout cela donne naissance à deux façons différentes de considérer la taille d'un objet :</p>
+
+<ul>
+ <li><em>taille de l'objet</em>: la taille de l'objet lui-même</li>
+ <li><em>taille retenue </em>: la taille de l'objet lui-même ainsi que la raille de tous les objets qui sont gardés en vie grâce à cet objet.</li>
+</ul>
+
+<p>Souvent, les objets auront une taille d'objet faible, mais une bien plus grande taille retenue, à cause de ses références à d'autres objets. La taille retenue est un concept important dans l'analyse de l'utilisation mémoire, car cela répond à la question "si cet objet cesse d'exister, quelle est la taille de mémoire libérée ?".</p>
+
+<h2 id="Dominants">Dominants</h2>
+
+<p>Un concept lié à cela est le concept de <em>dominants</em>. Un noeud B "domine" le noeud A si tous les chemins depuis la racine jusqu'à A passent par B :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12379/memory-graph-dominators.svg" style="display: block; height: 309px; margin-left: auto; margin-right: auto; width: 471px;"></p>
+
+<p>Si un des noeuds dominants du noeud A est libéré, alors le noeud A lui-même devient éligible au ramasse-miette.</p>
+
+<p><a id="immediate_dominator" name="immediate_dominator">Si le noeud B domine le noeud A mais ne domine aucun des dominants de A, alors B est le <em>dominant immédiat </em>de A :</a></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12381/memory-graph-immediate-dominator.svg" style="display: block; height: 309px; margin-left: auto; margin-right: auto; width: 467px;"></p>
+
+<p><a id="multiple-paths" name="multiple-paths">Une subtilité ici est que si un objet A est référencé par deux autres objets B et C, alors aucun de ces deux objets n'est un dominant de A</a>, car il est possible de retirer soit B soit C du graphe et A serait alors toujours référencé par son autre référent. À la place, le dominant immédiat de A est le premier ancêtre commun :<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/12331/memory-graph-dominator-multiple-references.svg" style="display: block; height: 283px; margin-left: auto; margin-right: auto; width: 211px;"></p>
+
+<h2 id="Voir_Aussi">Voir Aussi</h2>
+
+<p><a href="https://en.wikipedia.org/wiki/Dominator_%28graph_theory%29">Les dominants dans la théorie des graphes</a>.</p>
+
+<p><a href="https://en.wikipedia.org/wiki/Tracing_garbage_collection">Tracing garbage collection</a>.</p>
diff --git a/files/fr/tools/memory/dominators_view/index.html b/files/fr/tools/memory/dominators_view/index.html
new file mode 100644
index 0000000000..bfa472bded
--- /dev/null
+++ b/files/fr/tools/memory/dominators_view/index.html
@@ -0,0 +1,156 @@
+---
+title: Vue "Dominants"
+slug: Outils/Memory/Dominators_view
+translation_of: Tools/Memory/Dominators_view
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>La vue "Dominants" est une des nouveautés de Firefox 46.</p>
+</div>
+
+<p>À partir de Firefox 46, l'outil Mémoire inclut une nouvelle vue nommée "Dominants". Celle-ci est utile pour comprendre la "Taille retenue" des objets d'un site : il s'agit de la taille des objets eux-mêmes ainsi que la taille des objets qu'ils gardent en vie par référence.</p>
+
+<p>Si vous n'êtes pas familier avec la "taille de l'objet", la "taille retenue" et les Dominants, il est recommandé de lire l'article sur les <a href="/fr/docs/Tools/Memory/Dominators">concepts des Dominants</a>.</p>
+
+<h2 id="Interface_utilisateur_des_Dominants">Interface utilisateur des Dominants</h2>
+
+<p>Pour afficher la vue des Dominants, il faut sélectionner "Dominants" dans le menu déroulant "Afficher" :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13627/dominators-1.png" style="display: block; height: 230px; margin: 0px auto; width: 800px;"></p>
+
+<p>Cette vue est constituée de deux panneaux:</p>
+
+<ul>
+ <li>Le panneau de <a href="/fr/docs/Tools/Memory/Dominators_view#Dominators_Tree_panel">l'arbre des Dominants</a> qui affiche quel sont les noeuds de la capture qui retiennent le plus de mémoire.</li>
+ <li>Le panneau des <a href="/fr/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">Chemins de rétention</a> (depuis Firefox 47) affiche les 5 plus courts chemins de rétention pour un noeud.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13629/dominators-2.png" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Arbre_des_Dominants">Arbre des Dominants</h3>
+
+<p>Ce panneau affiche les objets de la capture qui retiennent le plus de mémoire.</p>
+
+<p>Dans la partie principale de l'UI, la première ligne est nommée "Racines GC". En dessous de cette ligne, il y a une ligne pour :</p>
+
+<ul>
+ <li>Chaque noeud racine GC. Dans Gecko, il y a plusieurs graph mémoire, et donc plusieurs racines. Il peut y avoir beaucoup de racines (souvent temporaires). Par exemple, les variables allouées sur la stack ont besoin d'être enracinées, les caches internes peuvent eux aussi avoir besoin d'enraciner leurs éléments.</li>
+ <li>Chaque autre noeud qui est référencé depuis deux racines différentes (vu que dans ce cas, aucune des deux racines ne le domine).</li>
+</ul>
+
+<p>Pour chacune de ces lignes, seront affichés :</p>
+
+<ul>
+ <li>La taille retenue du noeud, en octets et en pourcentage total.</li>
+ <li>La taille de l'objet du noeud en octets et en pourcentage total.</li>
+ <li>Le nom du noeud et son adresse mémoire.</li>
+</ul>
+
+<p>Les lignes sont classées par la taille de mémoire retenue. Par exemple :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13631/dominators-3.png" style="display: block; height: 228px; margin: 0px auto; width: 700px;"></p>
+
+<p>Dans cette capture d'écran, il est possible de voir qu'il y a cinq linges en dessus de "GC roots". Les deux premiers objets sont "Call" et "Window", et retiennent respectivement 21% et 8% de la mémoire totale de la capture. Il est également possible de voir qu'ils ont une taille (shallow) réduite, donc quasiment toute la mémoire retenue vient d'objets qu'ils dominent.</p>
+
+<p>Juste en dessous de chaque racine GC, tout les noeuds pour lequel cette racine est le <a href="https://developer.mozilla.org/fr/docs/Tools/Memory/Dominators#immediate_dominator">dominant immédiat</a> sont affichés et triés par taille retenue.</p>
+
+<p>Par exemple, cliquer sur le premier objet "Window" affichera ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13633/dominators-4.png" style="display: block; height: 292px; margin: 0px auto; width: 700px;"></p>
+
+<p>Il est possible de voir que "Window" domine un objet "CSS2Properties", dont la taille retenue est de 2ù de la capture. Encore une fois, la taille de l'objet est faible, quasiment toute sa taille retenue est due aux objets dominés. En cliquant sur l'icone en fore de triangle à coté de la fonction, il est possible de voir ces noeuds.</p>
+
+<p>Il est ainsi possible de se faire rapidement une idée de quels objets retiennent le plus de mémoire dans la capture.</p>
+
+<p>Il est possible d'utiliser <kbd>Alt</kbd> + clic pour étendre le graph entier d'un noeud.</p>
+
+<h4 id="Pile_d'allocations">Pile d'allocations</h4>
+
+<p>Dans la barre d'outils, il y a une liste déroulante : "Nommer selon" :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13635/dominators-5.png" style="display: block; height: 224px; margin: 0px auto; width: 800px;"></p>
+
+<p>Par défaut, l'option sélectionnée est "Type". Il est possible de choisir "Call Stack" à la place pour savoir exactement d'ou dans le code les objets sont alloués.</p>
+
+<div class="note">
+<p>Cette option est appelée "Allocation Stack" dans Firefox 46.</p>
+</div>
+
+<p>Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations" <em>avant</em> de lancer le coder qui alloue les objets. Il faut ensuite prendre une capture, puis sélectionner "Call Stack" dans le menu déroulant "Nommer selon".</p>
+
+<p>Maintenant, le nom du noeud contient le nom de la fonction qui l'a alloué, ainsi que le fichier, la ligne et la position exacte d'ou dans la fonction l'allocation a été faite. Cliquer sur le nom du fichier ouvrira cette position dans le Débogueur.</p>
+
+<p>{{EmbedYouTube("qTF5wCSD124")}}</p>
+
+<div class="note">
+<p>Parfois, une ligne nommée "(no stack available)" est présente. Les piles d'allocations ne sont actuellement enregistrées que pour les objets, pas pour les tableaux, les strings ou les structures internes.</p>
+</div>
+
+<h3 id="Chemins_de_rétention">Chemins de rétention</h3>
+
+<div class="geckoVersionNote">Ce panneau est une des nouveautés de Firefox 47.</div>
+
+<p>Ce panneau affiche, pour un noeud sélectionné les 5 plus courts chemins depuis ce noeud jusqu'a une racine GC. Cela permet de voir tous les noeuds qui empêchent ce noeud d'être détruit par le garbage collector (ramasse-miette en <s>bon </s>français). Si un objet est soupçonné de cause une fuite mémoire, ce panneau affichera les objets qui réfrènent l'objet soupçonné.</p>
+
+<p>Pour voir le chemin de rétention, il suffit de sélectionner un noeud dans le panneau de l'arbre des Dominants :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13637/dominators-6.png" style="display: block; height: 415px; margin: 0px auto; width: 800px;"></p>
+
+<p>Ici, un objet a été sélectionné et l'on peut voir un unique chemin jusqu'a la racine GC.</p>
+
+<p>La racine GC <code>Window</code> contient une référence à un objet <code>HTMLDivElement</code>. Cet objet contient lui une référence à un <code>Object</code>, et ainsi de suite. Il est possible de retracer le chemin juste en regardant le panneau de l'arbre des Dominants. Si une seule de ces références venait à être supprimée, les objets en dessous seraient détruits par le garbage collector.</p>
+
+<p>Chaque connexion dans le graph est annoté avec le nom de la variable qui référence l'objet.</p>
+
+<p>Parfois, il y a plus d'un seul chemin de rétention :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13639/dominators-7.png" style="display: block; height: 455px; margin: 0px auto; width: 700px;"></p>
+
+<p>Ici, il y a deux chemins depuis le noeud <code>DocumentPrototype</code> vers la racine GC. Si seulement l'un des des deux venait à être supprimé, le noeud ne serait pas détruit par le garbage collector, puisqu'il serait toujours retenu par l'autre chemin.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Pour tester l'outil, il est plus simple d'utiliser un exemple</p>
+
+<p><br>
+ Nous utiliserons <a href="/fr/docs/Tools/Memory/Monster_example">l'exemple d'allocation de monstres</a>. Cet exemple crée trois tableaux chacun contenant 5000 monstres, chaque monstre possède un nom généré aléatoirement.<br>
+  </p>
+
+<h3 id="Prendre_une_capture">Prendre une capture</h3>
+
+<p>Pour voir à quoi cela ressemble avec la vue "Dominants", il faut :</p>
+
+<ul>
+ <li>Charger la page</li>
+ <li>Activer l'outil Mémoire dans les <a href="/fr/docs/Tools/Tools_Toolbox#Settings">Options</a>, s’il n'est pas encore activé.</li>
+ <li>Ouvir l'outil Mémoire</li>
+ <li>Cocher la case " Enregistrer les piles d'allocations"</li>
+ <li>Appuyer sur le bouton "Make monsters!"</li>
+ <li>Prendre une capture</li>
+ <li>Passer à la vue "Dominants"</li>
+</ul>
+
+<p>{{EmbedYouTube("HiWnfMoMs2c")}}</p>
+
+<h3 id="Analyse_de_l'arbre_des_dominants">Analyse de l'arbre des dominants</h3>
+
+<p>Les trois tableaux seront les trois premières racines GC, chacun retenant à peu près 23% de la mémoire totale de la capture :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13641/dominators-8.png" style="display: block; height: 165px; margin: 0px auto; width: 700px;"></p>
+
+<p>Étendre un tableau affichera les objets (monstres) qu'il contient. Chaque monstre à une taille réduite de 160 octets. Cette taille inclut les variables int "eye" et "tentacle-count". Chaque monstre à une taille retenue plus grande, car ils retiennent la string utilisée pour stocker le nom du monstre :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13643/dominators-9.png" style="display: block; height: 327px; margin: 0px auto; width: 700px;"></p>
+
+<p>Tout cela se rapproche précisément du <a href="/fr/docs/Tools/Memory/Monster_example#allocation-graph">graph mémoire attendu</a>. Une chose curieuse cependant, où est passé l'objet qui contient ces trois tableaux ? En regardant le chemin de rétention pour un des tableaux, il est possible de le voir :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13645/dominators-10.png" style="display: block; height: 467px; margin: 0px auto; width: 700px;"></p>
+
+<p>Ici, il est possible de voir l'objet retenant le tableau; et même qu'il s'agit du tableau de monstres <code>friendly</code>. Dans la capture d'écran ci-dessus, ce n'est pas visible, cependant ce tableau est aussi enraciné directement à la racine GC. Donc si l'objet arrête de référencer le tableau, celui-ci ne serait toujours pas éligible au garbage collector.</p>
+
+<p>Cela veut dire que l'objet ne domine pas le tableau et donc n'est pas affiché dans l'arbre des Dominants. À voir également,  <a href="/fr/docs/Tools/Memory/Dominators#multiple-paths">l'article sur le concept des Dominants.</a></p>
+
+<h3 id="Utiliser_la_vue_Call_Stack">Utiliser la vue Call Stack</h3>
+
+<p>Enfin, il est possible de passer à la vue "Call Stack", afin de voir quels objets sont alloués et de se rendre à ce point dans le Débogueur :</p>
+
+<p>{{EmbedYouTube("qTF5wCSD124")}}</p>
diff --git a/files/fr/tools/memory/index.html b/files/fr/tools/memory/index.html
new file mode 100644
index 0000000000..017e5b69c5
--- /dev/null
+++ b/files/fr/tools/memory/index.html
@@ -0,0 +1,68 @@
+---
+title: Mémoire
+slug: Outils/Memory
+tags:
+  - DevTools
+  - Firefox
+  - Mozilla
+  - Tools
+  - outils de développement
+translation_of: Tools/Memory
+---
+<div>{{ToolsSidebar}}</div><p>L'outil Mémoire permet de prendre une capture de l'état actuel de la <a class="external external-icon" href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap wikipedia page">heap</a> de la mémoire. Il fournit plusieurs manières de visualiser la heap. Cela permet de voir la taille mémoire que prennent les objets et les endroits exacts du code d'où la mémoire est allouée.</p>
+
+<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p>
+
+<hr>
+<h3 id="La_base">La base</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/fr/docs/Tools/Memory/Open_the_memory_tool">Ouvrir l'outil Mémoire</a></li>
+ <li><a href="/fr/docs/Tools/Memory/Take_a_heap_snapshot">Prendre une capture de la heap</a></li>
+ <li><a href="/fr/docs/Tools/Memory/Basic_operations#Comparing_snapshots">Comparer deux captures</a></li>
+ <li><a href="/fr/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">Supprimer des captures</a></li>
+ <li><a href="/fr/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">Sauvegarder et charger des captures</a></li>
+ <li><a href="/fr/docs/Tools/Memory/Basic_operations#Recording_call_stacks">Capturer la pile d'exécution</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="Analyser_les_captures">Analyser les captures</h3>
+
+<div class="geckoVersionNote">
+<p>La vue "carte proportionnelle" est une nouveauté de Firefox 48, la vue "Dominants" est une nouveauté de Firefox 46.</p>
+</div>
+
+<p>Une fois qu'une capture est prise, il y a deux vues principales que l'outil fournit :</p>
+
+<ul>
+ <li><a href="/fr/docs/Tools/Memory/Tree_Map_view">La vue "Carte proportionnelle"</a> affiche l'usage mémoire sous forme de <a href="https://fr.wikipedia.org/wiki/Treemapping">carte proportionnelle</a>.</li>
+ <li><a href="/fr/docs/Tools/Memory/Aggregate_view">La vue "Agrégats"</a> affiche l'usage mémoire trié par type alloué (objets JavaScript, chaines de caractères, et scripts ).</li>
+ <li><a href="/fr/docs/Tools/Memory/Dominators_view">La vue "Dominants"</a> affiche la "taille retenue" des objets : Il s'agit de la taille des objets plus la taille des objets celles des objets qu'ils gardent vivant par leurs références.</li>
+</ul>
+
+<p>Si l'option "Enregistrer les piles d'allocations" est cochée, les deux vues affichent d'où exactement dans le code les allocations sont originaires.</p>
+
+<p>Enfin, il est possible de <a href="/fr/docs/Tools/Memory/Comparing_heap_snapshots">comparer deux captures</a>, et d'analyser le résultat de la différence.</p>
+
+<hr>
+<h3 id="Concepts">Concepts</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/fr/docs/Tools/Memory/Dominators">Dominants</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="Pages_d'exemples">Pages d'exemples</h3>
+
+<p>Exemples utilisés dans la documentation de l'outil Mémoire :</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/fr/docs/Tools/Memory/Monster_example">Exemple "Monstres"</a></li>
+ <li><a href="/fr/docs/Tools/Memory/DOM_allocation_example">Exemple "Allocations DOM"</a></li>
+</ul>
+</div>
diff --git a/files/fr/tools/memory/monster_example/index.html b/files/fr/tools/memory/monster_example/index.html
new file mode 100644
index 0000000000..48357b8d8b
--- /dev/null
+++ b/files/fr/tools/memory/monster_example/index.html
@@ -0,0 +1,81 @@
+---
+title: Exemple d'allocation de monstres
+slug: Outils/Memory/Monster_example
+translation_of: Tools/Memory/Monster_example
+---
+<div>{{ToolsSidebar}}</div><p>Cet article décrit une page web très simple que nous utilisons pour illustrer certaines fonctionnalités de l'outil <a href="/fr/docs/Outils/Memory">Mémoire</a>.</p>
+
+<p>Il est possible de l'essayer sur le site : <a class="external external-icon" href="https://mdn.github.io/performance-scenarios/js-allocs/alloc.html">https://mdn.github.io/performance-scenarios/js-allocs/alloc.html</a>. Voici le code :</p>
+
+<pre class="brush: js">var MONSTER_COUNT = 5000;
+var MIN_NAME_LENGTH = 2;
+var MAX_NAME_LENGTH = 48;
+
+function Monster() {
+
+  function randomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+  function randomName() {
+    var chars = "abcdefghijklmnopqrstuvwxyz";
+    var nameLength = randomInt(MIN_NAME_LENGTH, MAX_NAME_LENGTH);
+    var name = "";
+    for (var j = 0; j &amp;lt; nameLength; j++) {
+      name += chars[randomInt(0, chars.length-1)];
+    }
+    return name;
+  }
+
+  this.name = randomName();
+  this.eyeCount = randomInt(0, 25);
+  this.tentacleCount = randomInt(0, 250);
+}
+
+function makeMonsters() {
+  var monsters = {
+    "friendly": [],
+    "fierce": [],
+    "undecided": []
+  };
+
+  for (var i = 0; i &amp;lt; MONSTER_COUNT; i++) {
+    monsters.friendly.push(new Monster());
+  }
+
+  for (var i = 0; i &amp;lt; MONSTER_COUNT; i++) {
+    monsters.fierce.push(new Monster());
+  }
+
+  for (var i = 0; i &amp;lt; MONSTER_COUNT; i++) {
+    monsters.undecided.push(new Monster());
+  }
+
+  console.log(monsters);
+}
+
+var makeMonstersButton = document.getElementById("make-monsters");
+makeMonstersButton.addEventListener("click", makeMonsters);</pre>
+
+<p>Cette page contient un bouton : Lorsque celui-ci est activé, le code crée des monstres plus précisément :</p>
+
+<ul>
+ <li>Le code crée un objet avec trois propriétés, chacune étant un tableau :
+  <ul>
+   <li>Un pour les monstres "méchants" (fierce).</li>
+   <li>Un pour les monstres "gentils" (friendly).</li>
+   <li>UIn pour les monstres qui n'ont pas encore décidé (undecided).</li>
+  </ul>
+ </li>
+ <li>Pour chaque tableau, le code crée 5000 monstres générés aléatoirement. Chaque monstre a :
+  <ul>
+   <li>Une chaine de caractères, pour le nom du monstre.</li>
+   <li>Un nombre représentant le nombre d'yeux qu'il possède.</li>
+   <li>Un nombre représentant le nombre de tentacules qu'il possède.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Ainsi, la structure de la mémoire allouée sur la heap JavaScript est un objet contenant trois tableaux contenant chacun 5000 objets (les monstres) chaque objet contient une string et deux int :</p>
+
+<p><a name="allocation-graph"><img alt="" src="https://mdn.mozillademos.org/files/12369/monsters.svg" style="display: block; height: 521px; margin-left: auto; margin-right: auto; width: 500px;"></a></p>
diff --git a/files/fr/tools/memory/tree_map_view/index.html b/files/fr/tools/memory/tree_map_view/index.html
new file mode 100644
index 0000000000..a009e59a7a
--- /dev/null
+++ b/files/fr/tools/memory/tree_map_view/index.html
@@ -0,0 +1,45 @@
+---
+title: Vue carte proportionnelle
+slug: Outils/Memory/Tree_map_view
+translation_of: Tools/Memory/Tree_map_view
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>Cette vue est une des nouveautés de Firefox 48.</p>
+</div>
+
+<p>La vue carte proportionnelle fournit une représentation visuelle d'une capture instantané de la mémoire. Cela aide à avoir rapidement une idée de quels objets occupent le plus de mémoire.</p>
+
+<p>Une carte affiche :  <a href="https://fr.wikipedia.org/wiki/Treemapping">"Une représentation de données hiérarchiques dans un espace limité" </a>sous la forme de rectangles imbriqués. La taille de ces rectangles correspond à un aspect quantitatif des données (plus c'est gros, plus le rectangle l'est).</p>
+
+<p>Pour les cartes affichées dans l'outil Mémoire, la heap (le tas) est divisé en quatre grandes catégories :</p>
+
+<ul>
+ <li><strong>objects</strong>: Les objets JavaScript et DOM, tels que <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, ou <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, et les types DOM tels que <code><a href="/fr/docs/Web/API/Window">Window</a></code> et <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code>.</li>
+ <li><strong>scripts</strong>: Les sources JavaScript chargés par la page.</li>
+ <li><strong>strings</strong></li>
+ <li><strong>other</strong>: Cela inclut les objets internes de <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>.</li>
+</ul>
+
+<p>Chaque catégorie, est représentée dans un rectangle, et la taille de ce rectangle correspond à la portion de la heap occupée par les éléments de cette catégorie. Cela signifie qu'il est facile d'avoir rapidement une idée de ce qui prend le plus de place mémoire.</p>
+
+<p>A l’intérieur des grandes catégories :</p>
+
+<ul>
+ <li><strong>objects</strong> est ensuite divisé par type d'objet.</li>
+ <li><strong>scripts</strong> est ensuite divisé par origine de script. Cela inclut un rectangle séparé pour le code qui n'a put être associé à une origine, tel que le code optimisé pour le <a href="https://fr.wikipedia.org/wiki/Compilation_%C3%A0_la_vol%C3%A9e">JIT</a>.</li>
+ <li><strong>other</strong> est ensuite divisé selon le type d'objet.</li>
+</ul>
+
+<p>Voici quelques captures d'exemple, tel qu'elles apparaissent dans la vue carte proportionnelle :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13048/treemap-domnodes.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p>
+
+<p>Cette carte provient de l'exemple <a href="/fr/docs/Tools/Memory/DOM_allocation_example"> d'allocation DOM</a>, qui crée simplement 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>). Il est possible de voir que quasiment tout l'espace occupé dans la heap l'est par les objets <code>HTMLSpanElement</code> crées.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13046/treemap-monsters.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p>
+
+<p>Cette carte vient de l'exemple <a href="/fr/docs/Tools/Memory/Monster_example">allocation de monstres</a>, qui représente trois tableaux contenant chacun 5000 monstres. Chaque monstre possède un nom aléatoire. Il est possible de voir que la heap est occupée principalement par les strings utilisés pour le nom des monstres, ainsi que par les objets utilisé pour contenir les autres attributs des monstres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13050/treemap-bbc.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p>
+
+<p>Cette carte provient de <a href="http://www.bbc.com/">http://www.bbc.com/</a>, et est probablement plus représentative de la vie réelle que les exemples. Il est possible de voir qu'une partie beaucoup plus importante de la heap est occupée par les scripts qui sont chargés depuis un grand nombre d'origines.</p>