diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/tools/memory | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/tools/memory')
-rw-r--r-- | files/ru/tools/memory/index.html | 71 | ||||
-rw-r--r-- | files/ru/tools/memory/tree_map_view/index.html | 50 |
2 files changed, 121 insertions, 0 deletions
diff --git a/files/ru/tools/memory/index.html b/files/ru/tools/memory/index.html new file mode 100644 index 0000000000..3cec3f7248 --- /dev/null +++ b/files/ru/tools/memory/index.html @@ -0,0 +1,71 @@ +--- +title: Память +slug: Tools/Memory +tags: + - DevTools + - Firefox + - Mozilla + - NeedsTranslation + - Tools + - TopicStub +translation_of: Tools/Memory +--- +<div>{{ToolsSidebar}}</div> + +<div>Инструмент "Память" позволяет вам делать снимки выделенной на <a class="external external-icon" href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap">куче</a> памяти текущей вкладкой. Он так же предоставляет несколько представлений кучи, которые могут показать какие объекты используют память и где именно в коде происходит выделение.</div> + +<div></div> + +<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p> + +<hr> +<h3 id="Основы">Основы</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Opening_the_Memory_tool">Открываем инструмент "Память"</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Taking_a_heap_snapshot">Получаем снимок использования кучи</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Comparing_snapshots">Сравниваем два снимка</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">Удаляем снимки</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">Сохраняем и загружаем снимки</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Recording_call_stacks">Записываем стэк вызовов</a></li> +</ul> +</div> + +<hr> +<h3 id="Анализ_снимков">Анализ снимков</h3> + +<div class="geckoVersionNote"> +<p>The Tree map view is new in Firefox 48, and the Dominators view is new in FIrefox 46.</p> +</div> + +<p>После того, как вы сделали снимок, есть три главных вида (для просмотра снимка), предоставляемых инструментом "Память".</p> + +<ul> + <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">the Tree map view</a> показывает использование памяти в виде <a href="https://en.wikipedia.org/wiki/Treemapping">treemap</a>.</li> + <li><a href="/en-US/docs/Tools/Memory/Aggregate_view">the Aggregate view</a> показывает использование памяти в виде таблицы выделенных типов.</li> + <li><a href="/en-US/docs/Tools/Memory/Dominators_view">the Dominators view</a> показывает "удерживаемый размер" объектов: то есть, размер самих объектов плюс размер других, удерживаемых через ссылки, объектов.</li> +</ul> + +<p>If you've opted to record allocation stacks for the snapshot, the Aggregate and Dominators views can show you exactly where in your code allocations are happening.</p> + +<hr> +<h3 id="Concepts">Concepts</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Dominators">Доминаторы</a></li> +</ul> +</div> + +<hr> +<h3 id="Примеры">Примеры</h3> + +<p>Используемые примеры в документации инструмента "Память".</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Monster_example">Monster example</a></li> + <li><a href="/en-US/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a></li> +</ul> +</div> diff --git a/files/ru/tools/memory/tree_map_view/index.html b/files/ru/tools/memory/tree_map_view/index.html new file mode 100644 index 0000000000..b37817036a --- /dev/null +++ b/files/ru/tools/memory/tree_map_view/index.html @@ -0,0 +1,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> |