ツリーマップビュー

ツリーマップビューはスナップショットを視覚的に表現して、どのオブジェクトがもっとも多くのメモリを使用しているかの見解をすばやく得る助けになります。

ツリーマップは、"入れ子の長方形で表現した階層型 (木構造) のデータ" を表示します。長方形のサイズは、データの量的な比率に対応します。

メモリツールのツリーマップは、ヒープの内容物をトップレベルで 4 つのカテゴリに分類します:

• objects: JavaScript および DOM のオブジェクト。例えば Function、Object、Array や、Window、HTMLDivElement などの DOM 型。
• scripts: ページで読み込んだ JavaScript ソース。
• strings
• other: 内部の SpiderMonkey オブジェクトを含みます。

それぞれのカテゴリを長方形で表現して、長方形のサイズはカテゴリ内のアイテムがヒープ内で占める割合に対応します。よって、あなたのサイトでどの種類のものがもっとも多くのメモリを使用しているかについて、おおまかな見解をすばやく得ることができます。

トップレベルのカテゴリ内では、以下のように分割します:

• objects は、オブジェクトの型で分類します。
• scripts は、スクリプトの生成元で分類します。これは JIT で最適化されたコードなど、ファイルに関連付けることができないコードも、別の長方形として含まれます。
• other は、オブジェクトの型で分類します。

こちらが、ツリーマップビューで表示したスナップショットのサンプルです:

このツリーマップは DOM allocation example で取得しました。このページは大量の DOM ノード (200 個の HTMLDivElement オブジェクトと 4000 個の HTMLSpanElement オブジェクト) を生成するスクリプトを実行します。ヒープのほとんどすべてが、スクリプトで生成した HTMLSpanElement オブジェクトであることがわかります。

このツリーマップは、monster allocation example で取得しました。これは 3 個の配列を生成しており、それぞれに 5000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。ヒープのほとんどがモンスターの名前で使用する文字列と、モンスターの他の属性を収めるために使用するオブジェクトで占められていることがわかります。

このツリーマップは https://www.bbc.com/ で取得しました。前出のサンプルより現実的な見本であるといえるでしょう。ヒープの多くがスクリプトで占められており、それらは多数の生成元から読み込まれていることがわかります。