blob: 2001846a58f090182e6d3c2e67fa85d01e660117 (
plain)
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
|
---
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>
|
