path: root/files/ja/tools/memory/dominators_view/index.html

---
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>