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
|
---
title: Просмотр дерева объектов памяти
slug: Tools/Memory/Tree_map_view
tags:
- Debug
- memory
- Отладка
- Память
translation_of: Tools/Memory/Tree_map_view
---
<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
<p>Вид "Дерево объектов" (Tree map view) - новая возможность в Firefox 48.</p>
</div>
<p>Вид "<em>Дерево объектов</em>" (<em>Карта объектов</em>,<em> Tree map view</em>) даёт визуальное представление снимка памяти (snapshot), который поможет быстро определить, какие из объектов используют больше оперативной памяти.</p>
<p>Данный вид - это <a href="https://en.wikipedia.org/wiki/Treemapping">"иерархическое (древовидное) представление данных, представленное в виде набора вложенных прямоугольников"</a>. Размер прямоугольников соответствует некоторому относительному количественному представлению о данных.</p>
<p>В Дереве, показываемом в "<a href="/ru/docs/Tools/Memory">Memory tool</a>", объекты в куче (heap) разделены на четыре верхнеуровневых категории:</p>
<ul>
<li><strong>objects (объекты)</strong>: JavaScript и DOM-объекты, такие как <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a> </code>или <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, а также типы DOM, такие как <code><a href="/en-US/docs/Web/API/Window">Window</a></code> и <code><a href="/en-US/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code>.</li>
<li><strong>scripts (скрипты)</strong>: скрипты JavaScript, загруженные на страницу.</li>
<li><strong>strings (строки)</strong></li>
<li><strong>other (другое)</strong>: включает внутренние объекты <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>.</li>
</ul>
<p>Каждая категория представлена прямоугольником, размер каждого их которых пропорционален размеру занимаемой памяти объектами в "куче". Это значит, что вы можете быстро сообразить, какие виды объектов используют больше памяти.</p>
<p>Подкатегории верхнего уровня:</p>
<ul>
<li><strong>objects - </strong>дополнительно делятся по типам объектов.</li>
<li><strong>scripts - </strong>дополнительно разделены по источнику происхождения. Также добавлены отдельные прямоугольники для кода, который не коррелирует с файлами, такие как <a href="https://ru.wikipedia.org/wiki/JIT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F"> JIT</a>-оптимизированный код.</li>
<li><strong>other -</strong> делится по типам объектов.</li>
</ul>
<p>Вот несколько примеров снимков памяти (snapshots) в древовидном виде:</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>Это дерево создано по скрипту в начале страницы <a href="/en-US/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a>, создающем большое число DOM-узлов (200 объектов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> и 4000 объектов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>). Вы видите, как почти вся "куча" используется элементами <code>HTMLSpanElement</code>, которые уже создались.</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>Это дерево после выполнения скрипта со страницы <a href="/en-US/docs/Tools/Memory/Monster_example">monster allocation example</a>, который создаёт три массива, каждый содержащий 5000 монстров (персонажей), каждый из которых имеет случайно-сгенерированное имя. Вы заметите, что большая часть "кучи" занята строками (strings), используемых для имён, и объектов, используемых для хранения других атрибутов монстров.</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>Это дерево со страницы <a href="http://www.bbc.com/">http://www.bbc.com/</a>, и, вероятно, является примером из жизни лучшим, чем предыдущие примеры. Вы видите, что большую часть занимают скрипты (scripts), которые загружены из множества разных источников.</p>
|
