aboutsummaryrefslogtreecommitdiff
path: root/files/ru/tools/memory
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/tools/memory
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-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.html71
-rw-r--r--files/ru/tools/memory/tree_map_view/index.html50
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>