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
|
---
title: Vue carte proportionnelle
slug: Tools/Memory/Tree_map_view
translation_of: Tools/Memory/Tree_map_view
original_slug: Outils/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>
|
