initial commit

9 files changed, 688 insertions, 0 deletions

diff --git a/files/ja/tools/memory/aggregate_view/index.html b/files/ja/tools/memory/aggregate_view/index.html
new file mode 100644
index 0000000000..8517a99791
--- /dev/null
+++ b/files/ja/tools/memory/aggregate_view/index.html
@@ -0,0 +1,150 @@
+---
+title: 総計ビュー
+slug: Tools/Memory/Aggregate_view
+translation_of: Tools/Memory/Aggregate_view
+---
+<div>{{ToolsSidebar}}</div><p>Firefox 48 より前のバージョンでは、このビューがヒープスナップショットの既定のビューでした。Firefox 48 より既定のビューが<a href="/ja/docs/Tools/Memory/Tree_map_view"> ツリーマップビュー </a>になりましたが、"表示:" のドロップダウンリストで総計ビューに切り替えできます:</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>総計ビューは、以下のようなものです:</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>これは、ヒープの内容の内訳を表形式で表示します。データをグループ化する方法は、主に 3 つあります:</p>
+
+<ul>
+ <li>{{anch("Type")}}</li>
+ <li>{{anch("Call Stack")}}</li>
+ <li>{{anch("Inverted Call Stack")}}</li>
+</ul>
+
+<p>これらは、パネルの上部にある "グループ化" ドロップダウンリストで変更できます:</p>
+
+<p>また、ペインの右上に "フィルター" と表示されているボックスがあります。表示するスナップショットの内容をフィルタリングできますので、例えば特定のクラスのオブジェクトがいくつアロケートされているかをすばやく確認できます。</p>
+
+<h2 id="Type" name="Type">Type</h2>
+
+<p>これはデフォルトのビューであり、以下のようなものです:</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>このビューは、ヒープの内容を以下のタイプに分類します:</p>
+
+<ul>
+ <li><strong>JavaScript オブジェクト:</strong> <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> や <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> など。</li>
+ <li><strong>DOM 要素:</strong> <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> や <code><a href="/ja/docs/Web/API/Window">Window</a></code> など。</li>
+ <li><strong>文字列:</strong> <code>"strings"</code> として表示。</li>
+ <li><strong>JavaScript ソース:</strong> "<code>JSScript"</code> として表示。</li>
+ <li><strong>内部オブジェクト:</strong> "<code>js::Shape</code>" など。これらは接頭辞 <code>"js::"</code> がつきます。</li>
+</ul>
+
+<p>それぞれのタイプを表の行に表示して、これらの行は、そのタイプのオブジェクトが占めるメモリーの量の順に並べます。例えば前出のスクリーンショットでは、JavaScript の <code>Object</code> がもっとも多くのメモリ、また strings が 2 番目に多くのメモリーを占めていることがわかります。</p>
+
+<ul>
+ <li>"合計数" 列では、現時点で割り当てられているオブジェクトの数をカテゴリー別に表示します。</li>
+ <li>"合計バイト" 列でそれぞれのカテゴリーのオブジェクトが占めるメモリーのバイト数と、タブの合計ヒープサイズに対する割合を表示します。</li>
+</ul>
+
+<div class="pull-aside">
+<div class="moreinfo">このセクションのスクリーンショットは、<a href="/ja/docs/Tools/Memory/Monster_example">monster example page</a> のスナップショットから取得しました。</div>
+</div>
+
+<p>例えば前出のスクリーンショットでは、以下のことがわかります:</p>
+
+<ul>
+ <li><code>Array</code> オブジェクトが 4 個ある。</li>
+ <li>それらはヒープ全体の 15% を占める。</li>
+</ul>
+
+<p>タイプ名の隣に、3 つの星印が三角形のように配置されているアイコンがあります:</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>これをクリックすると、そのタイプのすべてのインスタンスを確認できます。例えば <code>Array</code> では、スナップショット内に <code>Array</code> オブジェクトが 4 個あると表示しています。3 つの星印をクリックすると、4 個の <code>Array</code> インスタンスを表示します:</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>それぞれのインスタンスで、<a href="/ja/docs/Tools/Memory/Dominators#Shallow_and_retained_size">保持サイズとシャローサイズ </a>を確認できます。このスクリーンショットでは、上から 3 個の配列のシャローサイズがかなり多く (ヒープ全体の 5%)、またより多くの保持サイズ (全体の 26%) を占めていることがわかります。</p>
+
+<p>右側には、"保持パスを表示するノードを選択してください" と表示されているペインがあります。項目を選択すると、その項目の<a href="/ja/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel"> 保持パスパネル</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" name="Call_Stack">Call Stack</h2>
+
+<p>Call Stack では、コードのどこでメモリーの割り当てを行っているかを表示します。</p>
+
+<p>メモリー割り当てのトレースは負荷が高いため、スナップショットでメモリー割り当てが行われる前に "割り当てスタックを記録" にチェックを入れて、明示的に有効化しなければなりません:</p>
+
+<p>オブジェクトの割り当てを行ったすべての関数を、割り当てたサイズ順に並べて表示します:</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>
+ <br>
+ このビューの構造は<a href="/ja/docs/Tools/Performance/Call_Tree"> コールツリー </a>の構造とよく似ていますが、プロセッサーのサンプルではなく割り当てのみ表示します。例えば、最初の項目では以下のことがわかります:</p>
+
+<ul>
+ <li>ヒープ全体の 93% を占める 4,832,592 バイトを、"alloc.js" の 35 行目にある関数<strong>またはその関数が呼び出した関数</strong>が割り当てました。</li>
+</ul>
+
+<p>展開用の三角印を使用してコールツリーの細分化が可能であり、コード内で割り当てを行った箇所を正確に知ることができます。</p>
+
+<p>シンプルな例を使用して、簡単に説明します。ここでは <a href="/ja/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a> を使用します。このページは大量の DOM ノード (200 個の <code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> オブジェクトと 4000 個の <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> オブジェクト) を生成するスクリプトを実行します。</p>
+
+<p>メモリ割り当てをトレースしてみましょう:</p>
+
+<ol>
+ <li>メモリツールを開きます。</li>
+ <li>"割り当てスタックを記録" にチェックを入れます。</li>
+ <li><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>スナップショットを採取します。</li>
+ <li>"表示/総計" を選択します。</li>
+ <li>"グループ化/Call Stack" を選択します。</li>
+</ol>
+
+<p>{{EmbedYouTube("DyLulu9eoKY")}}</p>
+
+<p>ビューは以下のようになるでしょう:</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>これは、ヒープスナップショット全体の 93% を "alloc.js" の 35 行目で呼び出した関数 (始めに呼び出す <code>createToolbars()</code>) が割り当てていることを示しています。</p>
+
+<p>展開用の三角印を使用してツリーを展開すると、どこでメモリーの割り当てを行っているかを正確に知ることができます:</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>ここでは "バイト" 列と "個数" 列が役に立ちます。これは割り当てたメモリーのサイズと、割り当て数を示します。</p>
+
+<p>前出の例では <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/dom-allocs/scripts/alloc.js#L9">alloc.js の 9 行目・23 桁目</a> にある <code>createToolbarButton()</code> で 4002 個のメモリー領域を割り当てており、それはヒープ全体の 84% を占めています。つまり正確な場所は、{{HTMLElement("span")}} 要素を生成している場所です。</p>
+
+<p>ファイル名と行番号はリンクになっています。クリックすると、デバッガーでその行を表示します:</p>
+
+<p>{{EmbedYouTube("zlnJcr1IFyY")}}</p>
+
+<h2 id="Inverted_Call_Stack" name="Inverted_Call_Stack">Inverted Call Stack</h2>
+
+<p>Call Stack ビューは、トップダウン型です。これは、メモリーの割り当てが発生した箇所を<strong>コールツリーの深部に表示します</strong>。よって、プログラムのどこでメモリーを大量に消費しているかの概要を知るのに適しています。しかし、このビューでは割り当てが発生した正確な場所を知るために、ツリーを長くたどらなければなりません。</p>
+
+<p>"Inverted Call Stack" ビューが役に立ちます。これはメモリー割り当てが発生した正確な場所を、割り当てサイズの順に並べたボトムアップ型のビューです。ツリーを展開すると、トップレベルに向かってコールツリーをたどります。</p>
+
+<p>上記の例で "Inverted Call Stack" を選択すると、どのようになるかを見てみましょう:</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>リストの最初に、ページでヒープの 89% を占めている <code>createToolbarButton()</code> があります。</p>
+
+<h2 id="(no_stack_available)" name="(no_stack_available)">(有効なスタックはありません)</h2>
+
+<p>前出の例で、ヒープの 7% が "(有効なスタックはありません)" であることに気づいているでしょう。これは、ヒープのすべてを JavaScript で使用しているわけではないためです。</p>
+
+<p>例えば、以下のようなものがあります:</p>
+
+<ul>
+ <li>ページで読み込んだスクリプトが、ヒープ領域を使用しています。</li>
+ <li>JavaScript がスタックに存在しないときに、オブジェクトが割り当てられる場合があります。例えば DOM の {{domxref("Event")}} は、JavaScript を実行してイベントハンドラーを呼び出す前に割り当てられます。</li>
+</ul>
+
+<p>実在するページの多くは、"(有効なスタックはありません)" の割合が 7% を超えます。</p>
diff --git a/files/ja/tools/memory/basic_operations/index.html b/files/ja/tools/memory/basic_operations/index.html
new file mode 100644
index 0000000000..0684ae5d1b
--- /dev/null
+++ b/files/ja/tools/memory/basic_operations/index.html
@@ -0,0 +1,64 @@
+---
+title: 基本操作
+slug: Tools/Memory/Basic_operations
+translation_of: Tools/Memory/Basic_operations
+---
+<div>{{ToolsSidebar}}</div><h2 id="Opening_the_Memory_tool" name="Opening_the_Memory_tool">メモリーツールを開く</h2>
+
+<p>Firefox 50 より前のバージョンでは、メモリーツールをデフォルトで無効化しています。有効化するには開発ツールのオプションを開き、"標準の Firefox 開発ツール" 配下の "メモリー" にチェックを入れてください:</p>
+
+<p>{{EmbedYouTube("qi-0CoCOXwc")}}</p>
+
+<p>Firefox 50 より、メモリーツールをデフォルトで有効化しています。</p>
+
+<h2 id="Taking_a_heap_snapshot" name="Taking_a_heap_snapshot">ヒープのスナップショットを採取する</h2>
+
+<p>" スナップショットを採取 " ボタンまたはツールの左側にあるカメラのアイコンをクリックすると、ヒープのスナップショットを採取します:</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>スナップショットは、右側にある大きなペインを占めています。左側には、新しいスナップショットの項目をタイムスタンプ、サイズ、保存や削除のためのコントロールとともに表示します:</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="Clearing_a_snapshot" name="Clearing_a_snapshot">スナップショットを削除する</h2>
+
+<p>" 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="Saving_and_loading_snapshots" name="Saving_and_loading_snapshots">スナップショットの保存と読み込み</h2>
+
+<p>メモリーツールを閉じると、保存していないスナップショットはすべて破棄されます。" 保存 " をクリックすると、スナップショットを保存します:</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>保存先やファイル名を求められます。そしてファイルは、<code>.fxsnapshot</code> という拡張子をつけて保存されます。</p>
+
+<p>既存の <code>.fxsnapshot</code> ファイルからスナップショットを読み込むには、四角形から上向きの矢印が出ているデザインのインポートボタン (Firefox 49 より前のバージョンでは、" Import... " というラベルがついていました) をクリックします:</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>ディスク上のファイルを選択するよう、求められます。</p>
+
+<h2 id="Comparing_snapshots" name="Comparing_snapshots">スナップショットを比較する</h2>
+
+<p>Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリーのアロケートや空き状態の違いを表示します。</p>
+
+<p>差分を作成するには、カメラのアイコンの隣にあるベン図のボタンを押下してください (Firefox 47 より前は、" +/- " 印のアイコンでした)。</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>始めにベースラインのスナップショット、続いて比較するスナップショットを選択するよう求められます。ツールが 2 つのスナップショットの差分を表示します:</p>
+
+<p>{{EmbedYouTube("3Ow-mdK6b2M")}}</p>
+
+<div class="note">
+<p>差分を表示しているとき、ドミネータービューやツリーマップは使用できません。</p>
+</div>
+
+<h2 id="Recording_call_stacks" name="Recording_call_stacks">コールスタックを記録する</h2>
+
+<p>メモリーツールは、コードのどこでメモリの割り当てを行っているかを表示できます。ただしこの情報の記録は実行時の負荷が高いため、スナップショット内でメモリー呼び出しを行った場所を確認したい場合は、メモリー割り当ての<em>前に</em>ツールに対してメモリー呼び出しを記録するよう要求しなければなりません。記録するには、"コールスタックを記録" (Firefox 49 より前は "割り当てスタックを記録" でした) にチェックを入れます:</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/ja/tools/memory/comparing_heap_snapshots/index.html b/files/ja/tools/memory/comparing_heap_snapshots/index.html
new file mode 100644
index 0000000000..ccd50f7618
--- /dev/null
+++ b/files/ja/tools/memory/comparing_heap_snapshots/index.html
@@ -0,0 +1,14 @@
+---
+title: ヒープのスナップショットを比較する
+slug: Tools/Memory/Comparing_heap_snapshots
+translation_of: Tools/Memory/Basic_operations
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>これは Firefox 45 の新機能です。</p>
+</div>
+
+<p>Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。</p>
+
+<p>差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。</p>
+
+<p>{{EmbedYouTube("rbDHVxCzqhU")}}</p>
diff --git a/files/ja/tools/memory/dom_allocation_example/index.html b/files/ja/tools/memory/dom_allocation_example/index.html
new file mode 100644
index 0000000000..e8449908ce
--- /dev/null
+++ b/files/ja/tools/memory/dom_allocation_example/index.html
@@ -0,0 +1,54 @@
+---
+title: DOMの割り当て例
+slug: Tools/Memory/DOM_allocation_example
+translation_of: Tools/Memory/DOM_allocation_example
+---
+<div>{{ToolsSidebar}}</div><p>この記事では、メモリーツールの機能を示すために使用するシンプルなページについて説明します。</p>
+
+<p>これは <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>このページは、大量の 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");
+  // stop Spidermonkey from sharing instances
+  toolbarButton[getRandomInt(0,5000)] = "foo";
+  return toolbarButton;
+}
+
+function createToolbar() {
+  var toolbar = document.createElement("div");
+  // stop Spidermonkey from sharing 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>このコードの動作を簡単に表現すると、以下のようになります:</p>
+
+<pre>createToolbars()
+    -&gt; createToolbar() // 200 回呼び出され、毎回 1 個の DIV 要素を生成します
+       -&gt; createToolbarButton() // Toolbar ごとに 20 回呼び出され、毎回 1 個の SPAN 要素を生成します</pre>
+
+<p>最終的に、200 個の <code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> オブジェクトと 4,000 個の <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> オブジェクトを生成します。</p>
diff --git a/files/ja/tools/memory/dominators/index.html b/files/ja/tools/memory/dominators/index.html
new file mode 100644
index 0000000000..3db9506921
--- /dev/null
+++ b/files/ja/tools/memory/dominators/index.html
@@ -0,0 +1,61 @@
+---
+title: ドミネーター
+slug: Tools/Memory/Dominators
+translation_of: Tools/Memory/Dominators
+---
+<div>{{ToolsSidebar}}</div><div class="summary" id="Concepts">
+<p>本記事では JavaScript のようなガベージコレクションを行う言語に適用される <em>到達可能性</em>、<em>シャロー</em>サイズと <em>保持</em>サイズ、支配ノードの概念を紹介します。</p>
+
+<p>オブジェクト自体は小さくても他の大きなオブジェクトを多数参照する場合があり、ガベージコレクターが多くのメモリーを解放できなくなる可能性があることから、この概念はメモリーの分析において重要です。</p>
+
+<p>メモリーツールの <a href="/ja/docs/Tools/Memory/Dominators_view">ドミネータービュー</a>を使用して、ページ内の支配ノードを確認できます。</p>
+</div>
+
+<p>JavaScript のようにガベージコレクションを行う言語では、通常プログラマーはメモリーの解放について悩む必要はありません。プログラマーはオブジェクトを作成および使用するだけでよく、オブジェクトが不要になればランタイムがクリーンアップを引き受けて、オブジェクトが占有していたメモリを解放します。</p>
+
+<h2 id="Reachability" name="Reachability">到達可能性</h2>
+
+<p>現代の JavaScript 実装では、ランタイムは <em>Reachability</em> に基づいてオブジェクトが不要であるかを判断します。このシステムでは、ヒープを 1 つ以上のグラフで表します。グラフ内の各ノードはオブジェクトを表し、ノード (の縁) 同士の接続はあるオブジェクトから別のオブジェクトへの参照を表します。グラフはルートノードから始まります。本記事の図ではルートノードを "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>ガベージコレクションを行うとき、ランタイムはグラフをルートから走査して、発見したすべてのオブジェクトに印をつけます。発見されないオブジェクトは到達性がないので、解放できます。</p>
+
+<p>従ってオブジェクトの到達性がなくなると (例えば、スコープから外れたローカル変数1個からしか参照されていないオブジェクト)、そのオブジェクトが参照するオブジェクトも、他のオブジェクトから参照されていなければ到達性がなくなります:</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>逆に、到達性がある他のオブジェクトがそれらを参照し続けている間は、維持され続けることになります。</p>
+
+<h2 id="Shallow_and_retained_size" name="Shallow_and_retained_size">シャローサイズと保持サイズ</h2>
+
+<p>この考え方から、オブジェクトのサイズを調べる方法が 2 つに区別されます:</p>
+
+<ul>
+ <li><em>シャローサイズ</em>: オブジェクト自体のサイズ</li>
+ <li><em>保持サイズ</em>: オブジェクト自体のサイズと、オブジェクトが維持し続けている他のオブジェクトのサイズを合算したサイズ</li>
+</ul>
+
+<p>通常、オブジェクトのシャローサイズは小さいのですが、保持サイズは参照により他のオブジェクトを含むために大きくなります。保持サイズは " このオブジェクトが存在しなくなると、メモリーがどれだけ解放されるか？ " という疑問への答えになりますので、メモリー使用量の分析において重要な概念です。</p>
+
+<h2 id="Dominators" name="Dominators">支配ノード</h2>
+
+<p>関連する概念として支配ノードがあります。ルートノードからノード A に至るすべてのパスがノード B を通るとき、ノード B はノード A を支配すると言います:</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>ノード A の支配ノードのいずれかが解放されると、ノード A 自体はガベージコレクションの対象に適した状態になります。</p>
+
+<p><a id="immediate_dominator" name="immediate_dominator">ノード B はノード A を支配しているが、ノード A の他の支配ノードが支配していないとき、ノード B はノード 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">オブジェクト A が別のオブジェクト B および C から参照されている場合は少々とらえにくいのですが、どちらも A の支配ノードではありません。</a>これは、B または C のどちらかをグラフから削除しても、A は他の参照元によって維持され続けるためです。代わりに A の隣接支配ノードは、最初の共通の祖先になります:<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="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Dominator_%28graph_theory%29">Dominators in graph theory</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Tracing_garbage_collection">Tracing garbage collection</a></li>
+</ul>
diff --git a/files/ja/tools/memory/dominators_view/index.html b/files/ja/tools/memory/dominators_view/index.html
new file mode 100644
index 0000000000..de2e20efd6
--- /dev/null
+++ b/files/ja/tools/memory/dominators_view/index.html
@@ -0,0 +1,154 @@
+---
+title: ドミネータービュー
+slug: Tools/Memory/Dominators_view
+translation_of: Tools/Memory/Dominators_view
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>ドミネータービューは、Firefox 46 の新機能です。</p>
+</div>
+
+<p>Firefox 46 より、メモリーツールに新たなビューであるドミネータービューが加わりました。これは、サイトによって割り当てられたオブジェクトの " 保持サイズ " を知るのに役立ちます。保持サイズはオブジェクト自身のサイズと、参照によって保持されているオブジェクトのサイズを合算したものです。</p>
+
+<p>シャローサイズ、保持サイズ、ドミネーターが何かを知っている場合は、ドミネーターの UI のセクションに進んでください。そうでない場合は、<a href="/ja/docs/Tools/Memory/Dominators">ドミネーターの概念</a>の記事でこれらを調べたいと思うかもしれません。</p>
+
+<h2 id="Dominators_UI" name="Dominators_UI">ドミネータの UI</h2>
+
+<p>" 表示 " のドロップダウンリストで " ドミネーター " を選択すると、ドミネータービューを表示します。以下のようなものです:</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>ドミネータービューは 2 つのパネルで構成されます:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Memory/Dominators_view#Dominators_Tree_panel">ドミネーターツリーパネル</a>は、スナップショット内でどのノードがもっとも多くのメモリーを保持しているかを表示します。</li>
+ <li><a href="/ja/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">保持パスパネル</a> (Firefox 47 の新機能) は、ひとつのノードに対して 5 つの最短保持パスを表示します。</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13629/dominators-2.png" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Dominators_Tree_panel" name="Dominators_Tree_panel">ドミネーターツリーパネル</h3>
+
+<p>ドミネーターツリーは、スナップショット内でどのオブジェクトがもっとも多くのメモリーを保持しているかを表示します。</p>
+
+<p>UI のメインエリアで、最初の行が "GC ルート" という名前になっています。この直下に、以下の項目が並びます:</p>
+
+<ul>
+ <li>すべての GC ルートノード。Gecko では複数のメモリーグラフが存在しますので、ルートも複数あります。多くの (たいていは一時的な) ルートが存在する場合があります。例えば、スタック内で割り当てられた変数はルートになる必要があります。また、内部キャッシュはそれらの要素のルートにする必要があるでしょう。</li>
+ <li>2 つの異なるルートから参照される、他のノード (この場合、どちらのルートもそのノードを支配しません)。</li>
+</ul>
+
+<p>それぞれの項目で、以下の内容を表示します:</p>
+
+<ul>
+ <li>ノードの保持サイズを、バイト数および合計に対するパーセント値で示す</li>
+ <li>ノードのシャローサイズを、バイト数および合計に対するパーセント値で示す</li>
+ <li>ノードの名前と、メモリー上のアドレス</li>
+</ul>
+
+<p>項目は、メモリーの保持サイズの大きさ順に並びます。例えば:</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>このスクリーンショットでは、" GC ルート " の配下に項目が 5 つあることがわかります。始めの 2 つは Call オブジェクトと Window オブジェクトであり、それぞれスナップショットの総メモリ量の 21% と 8% を保持しています。また、これらのオブジェクトは " シャローサイズ " が比較的小さく、保持サイズのほぼすべては、支配しているオブジェクト内にあることもわかります。</p>
+
+<p>各 GC ルートの直下に、そのルートが <a href="/ja/docs/Tools/Memory/Dominators#immediate_dominator">隣接支配ノード </a>であるすべてのノードを配置します。これらのノードも、保持サイズ順に並びます。</p>
+
+<p>例えば、最初の Window オブジェクトをクリックします:</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>この Window は CSS2Properties オブジェクトを支配しており、その保持サイズはスナップショット全体の 2% であることがわかります。やはりシャローサイズはとても小さく、保持サイズのほぼすべてが、支配しているノード内にあります。Function の隣にある展開用の三角印をクリックすると、それらのノードを確認できます。</p>
+
+<p>この方法で、スナップショット内でどのオブジェクトがもっとも多くのメモリーを保持しているかを、すばやく把握できます。</p>
+
+<p><kbd>Alt</kbd> + クリックで、ノード配下のグラフ全体を展開できます。</p>
+
+<h4 id="Call_Stack" name="Call_Stack">コールスタック</h4>
+
+<p>ツール上部のツールバーに、"ラベル" という名称のドロップダウンリストがあります:</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>デフォルトでは " Type " に設定されています。一方、これを " Call Stack " に切り替えると、コードの中でオブジェクトを割り当てている場所はどこかを表示します。</p>
+
+<div class="note">
+<p>Firefox 46 では、このオプションの名称は " Allocation Stack " でした。</p>
+</div>
+
+<p>ビューを表示するには、オブジェクトを割り当てるコードを実行する<em>前に</em> " コールスタックを記録 " のチェックボックスにチェックを入れなければなりません。そしてスナップショットを採取して、" ラベル " ドロップダウンリストで " Call Stack " を選択します。</p>
+
+<p>するとノードを割り当てた関数の名前、およびその関数が存在するファイルの名前、行番号、何文字目かをノードの名前に含めて表示します。ファイル名をクリックすると、デバッガーで該当箇所を表示します。</p>
+
+<p>{{EmbedYouTube("qTF5wCSD124")}}</p>
+
+<div class="note">
+<p>ここに " (有効なスタックはありません) " と表示される場合があります。特に、現在割り当てスタックはオブジェクトのみ記録しており、配列、文字列、内部構造は記録していません。</p>
+</div>
+
+<h3 id="Retaining_Paths_panel" name="Retaining_Paths_panel">保持パスパネル</h3>
+
+<div class="geckoVersionNote">保持パスパネルは Firefox 47 の新機能です。</div>
+
+<p>保持パスパネルではあるノードについて、そのノードから GC ルートに戻る最短パスを 5 つ表示します。これによって、そのノードがガベージコレクションの対象にならないようにしているすべてのノードを知ることができます。オブジェクトがリークしていると思われる場合に、どのオブジェクトが参照を保持しているかを的確に示します。</p>
+
+<p>ドミネータツリーパネルでノードを選択すると、ノードの保持パスを表示します:</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>ここでは Object を選択しており、GC ルートに戻るパスが 1 つあることがわかります。</p>
+
+<p>GC ルート <code>Window</code> は <code>HTMLDivElement</code> オブジェクトへの参照を保持しており、またそのオブジェクトが <code>Object</code> への参照を保持しています。ドミネーターツリーパネルを見ると、同じパスをたどることができます。これらの参照のどちらかが削除されると、配下のアイテムはガベージコレクションの対象になるでしょう。</p>
+
+<p>グラフ内の各接続に、参照されるオブジェクト用の変数の名称がついています。</p>
+
+<p>ノードから戻る保持パスが複数存在することがあります:</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>この図では、<code>DocumentPrototype</code> ノードから GC ルートに戻るパスが 3 つあります。ひとつが削除されても、ほかのパスが維持されていますので <code>DocumentPrototype</code> はガベージコレクションの対象になりません。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>シンプルなコードがどのようにドミネータービューへ反映されるかを見ていきましょう。</p>
+
+<p>ここでは <a href="/ja/docs/Tools/Memory/Monster_example">monster allocation example</a> を使用します。これは 3 個の配列を生成しており、それぞれに 5,000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。</p>
+
+<h3 id="Taking_a_snapshot" name="Taking_a_snapshot">スナップショットを採取する</h3>
+
+<p>これがドミネータービューでどのように見えるかを確認します:</p>
+
+<ul>
+ <li>ページを読み込みます。</li>
+ <li>メモリーツールを有効化していない場合は、<a href="/ja/docs/Tools/Tools_Toolbox#Settings">オプション </a>で有効化します。</li>
+ <li>メモリーツールを開きます。</li>
+ <li>"コールスタックを記録" にチェックを入れます。</li>
+ <li>"Make monsters!" ボタンを押します。</li>
+ <li>スナップショットを採取します。</li>
+ <li>" ドミネーター " ビューに切り替えます。</li>
+</ul>
+
+<p>{{EmbedYouTube("HiWnfMoMs2c")}}</p>
+
+<h3 id="Analyzing_the_Dominators_Tree" name="Analyzing_the_Dominators_Tree">ドミネーターツリーを分析する</h3>
+
+<p>上位 3 件の GC ルートが Array であり、それぞれ総メモリー使用量の約 23% を保持しています:</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>Array を展開すると、含まれているオブジェクト (モンスター) を表示します。それぞれのモンスターは、シャローサイズが 160 バイトと比較的小さくなっています。これは、目の数と触手の数の整数値を含んでいます。また各モンスターの保持サイズは大きく、これはモンスターの名前の文字列が占めています:</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>これらはすべて、<a href="/ja/docs/Tools/Memory/Monster_example#allocation-graph">予想したメモリーグラフ</a> に近い形で並んでいます。しかし、ひとつ不思議に思う点があるでしょう。3 つの Array を保持するトップレベルオブジェクトはどこにあるのでしょうか？ ある Array の保持パスを確認すると、以下のようになっているでしょう:</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>ここでは保持するオブジェクトが見えており、またオブジェクト固有の Array は <code>fierce</code> モンスターの Array です。しかし Array はルートでもあるため、オブジェクトが Array を参照しなくなってもガベージコレクションの対象にはならないでしょう。</p>
+
+<p>これはオブジェクトが Array を支配していないため、ドミネータツリービューに表示されないということです。<a href="/ja/docs/Tools/Memory/Dominators#multiple-paths">ドミネータの概念の記事で関連する章をご覧ください</a>。</p>
+
+<h3 id="Using_the_Call_Stack_view" name="Using_the_Call_Stack_view">コールスタックビューを使用する</h3>
+
+<p>最後に、Call Stack ビューへ切り替えると、オブジェクトがどこで割り当てられたかを確認できます。また、デバッガーでその場所にジャンプできます:</p>
+
+<p>{{EmbedYouTube("qTF5wCSD124")}}</p>
diff --git a/files/ja/tools/memory/index.html b/files/ja/tools/memory/index.html
new file mode 100644
index 0000000000..5ead5856b4
--- /dev/null
+++ b/files/ja/tools/memory/index.html
@@ -0,0 +1,65 @@
+---
+title: メモリー
+slug: Tools/Memory
+tags:
+  - DevTools
+  - Firefox
+  - Mozilla
+  - Tools
+translation_of: Tools/Memory
+---
+<div>{{ToolsSidebar}}</div><p>メモリーツールを使用して、カレントタブのメモリー <a href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap">ヒープ</a> のスナップショットを取得できます。そして、どのオブジェクトがどれだけメモリーを使用しているかや、コードのどこでメモリーを割り当てているかを表示可能な、ヒープのさまざまなビューを提供します。</p>
+
+<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p>
+
+<hr>
+<h3 id="The_basics" name="The_basics">基礎</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/ja/docs/Tools/Memory/Basic_operations#Opening_the_Memory_tool">メモリーツールを開く</a></li>
+ <li><a href="/ja/docs/Tools/Memory/Basic_operations#Taking_a_heap_snapshot">ヒープのスナップショットを採取する</a></li>
+ <li><a href="/ja/docs/Tools/Memory/Basic_operations#Comparing_snapshots">スナップショットを比較する</a></li>
+ <li><a href="/ja/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">スナップショットを削除する</a></li>
+ <li><a href="/ja/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">スナップショットの保存と読み込み</a></li>
+ <li><a href="/ja/docs/Tools/Memory/Basic_operations#Recording_call_stacks">コールスタックを記録する</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="Analyzing_snapshots" name="Analyzing_snapshots">スナップショットを分析する</h3>
+
+<div class="geckoVersionNote">
+<p>ツリーマップビューは Firefox 48 の新機能、ドミネータービューは Firefox 46 の新機能です。</p>
+</div>
+
+<p>スナップショットを採取すると、メモリーツールは 3 つの主要なビューを提供します:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Memory/Tree_Map_view">ツリーマップビュー </a>はメモリーの使用状況を、<a href="https://en.wikipedia.org/wiki/Treemapping">ツリーマップ</a> で表示します。</li>
+ <li><a href="/ja/docs/Tools/Memory/Aggregate_view">総計ビュー</a> はメモリーの使用状況を、割り当てられた型による表形式で表示します。</li>
+ <li><a href="/ja/docs/Tools/Memory/Dominators_view">ドミネータービュー </a>は、オブジェクトの "保持サイズ" を表示します。これはオブジェクトのサイズと、そのオブジェクトが参照しているために維持されているオブジェクトのサイズを合算したものです。</li>
+</ul>
+
+<p>スナップショットで割り当てスタックの記録を有効にすると、コードのどこで割り当てが行われたかを総計ビューとドミネータービューで表示できます。</p>
+
+<hr>
+<h3 id="Concepts" name="Concepts">概念</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/ja/docs/Tools/Memory/Dominators">ドミネーター</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="Example_pages" name="Example_pages">サンプルページ</h3>
+
+<p>メモリーツールのドキュメントで使用しているサンプルです。</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/ja/docs/Tools/Memory/Monster_example">Monster example</a></li>
+ <li><a href="/ja/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a></li>
+</ul>
+</div>
diff --git a/files/ja/tools/memory/monster_example/index.html b/files/ja/tools/memory/monster_example/index.html
new file mode 100644
index 0000000000..3458550a5f
--- /dev/null
+++ b/files/ja/tools/memory/monster_example/index.html
@@ -0,0 +1,81 @@
+---
+title: Monster example
+slug: Tools/Memory/Monster_example
+translation_of: Tools/Memory/Monster_example
+---
+<div>{{ToolsSidebar}}</div><p>この記事では、メモリツールの機能を示すために使用するシンプルなページについて説明します。</p>
+
+<p>これは <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> で試すことができます。コードは以下のとおりです:</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>このページにはボタンがあります。このボタンを押すと、コードがモンスターを生成します。詳細は以下のとおりです:</p>
+
+<ul>
+ <li>コードが 3 つのプロパティを持つオブジェクトを生成します。それぞれのプロパティは配列です:
+  <ul>
+   <li>どう猛なモンスター</li>
+   <li>友好的なモンスター</li>
+   <li>タイプがわかっていないモンスター</li>
+  </ul>
+ </li>
+ <li>コードはそれぞれの配列に、ランダムに初期化したモンスター 5000 体を生成および追加します。それぞれのモンスターは以下の属性を持ちます:
+  <ul>
+   <li>モンスターの名前を示す文字列</li>
+   <li>モンスターの目の数を表す数値</li>
+   <li>モンスターの触手の数を表す数値</li>
+  </ul>
+ </li>
+</ul>
+
+<p>従って、JavaScript のヒープ上に割り当てられるメモリの構造は、3 つの配列を持つオブジェクトになります。それぞれの配列は 5000 個のオブジェクト (モンスター) を持ち、そのオブジェクトが文字列と 2 つの数値を持ちます:</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/ja/tools/memory/tree_map_view/index.html b/files/ja/tools/memory/tree_map_view/index.html
new file mode 100644
index 0000000000..2001846a58
--- /dev/null
+++ b/files/ja/tools/memory/tree_map_view/index.html
@@ -0,0 +1,45 @@
+---
+title: ツリーマップビュー
+slug: Tools/Memory/Tree_map_view
+translation_of: Tools/Memory/Tree_map_view
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>ツリーマップビューは、Firefox 48 の新機能です。</p>
+</div>
+
+<p>ツリーマップビューはスナップショットを視覚的に表現して、どのオブジェクトがもっとも多くのメモリを使用しているかの見解をすばやく得る助けになります。</p>
+
+<p>ツリーマップは、<a href="https://en.wikipedia.org/wiki/Treemapping">"入れ子の長方形で表現した階層型 (木構造) のデータ"</a> を表示します。長方形のサイズは、データの量的な比率に対応します。</p>
+
+<p>メモリツールのツリーマップは、ヒープの内容物をトップレベルで 4 つのカテゴリに分類します:</p>
+
+<ul>
+ <li><strong>objects</strong>: JavaScript および DOM のオブジェクト。例えば <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> や、<code><a href="/ja/docs/Web/API/Window">Window</a></code>、<code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> などの DOM 型。</li>
+ <li><strong>scripts</strong>: ページで読み込んだ JavaScript ソース。</li>
+ <li><strong>strings</strong></li>
+ <li><strong>other</strong>: 内部の <a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> オブジェクトを含みます。</li>
+</ul>
+
+<p>それぞれのカテゴリを長方形で表現して、長方形のサイズはカテゴリ内のアイテムがヒープ内で占める割合に対応します。よって、あなたのサイトでどの種類のものがもっとも多くのメモリを使用しているかについて、おおまかな見解をすばやく得ることができます。</p>
+
+<p>トップレベルのカテゴリ内では、以下のように分割します:</p>
+
+<ul>
+ <li><strong>objects</strong> は、オブジェクトの型で分類します。</li>
+ <li><strong>scripts</strong> は、スクリプトの生成元で分類します。これは JIT で最適化されたコードなど、ファイルに関連付けることができないコードも、別の長方形として含まれます。</li>
+ <li><strong>other</strong> は、オブジェクトの型で分類します。</li>
+</ul>
+
+<p>こちらが、ツリーマップビューで表示したスナップショットのサンプルです:</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="/ja/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a> で取得しました。このページは大量の DOM ノード (200 個の <code><a href="/ja/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> オブジェクトと 4000 個の <code><a href="/ja/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="/ja/docs/Tools/Memory/Monster_example">monster allocation example</a> で取得しました。これは 3 個の配列を生成しており、それぞれに 5000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。ヒープのほとんどがモンスターの名前で使用する文字列と、モンスターの他の属性を収めるために使用するオブジェクトで占められていることがわかります。</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> で取得しました。前出のサンプルより現実的な見本であるといえるでしょう。ヒープの多くがスクリプトで占められており、それらは多数の生成元から読み込まれていることがわかります。</p>