ツリーマップビューは、Firefox 48 の新機能です。
ツリーマップビューはスナップショットを視覚的に表現して、どのオブジェクトがもっとも多くのメモリを使用しているかの見解をすばやく得る助けになります。
ツリーマップは、"入れ子の長方形で表現した階層型 (木構造) のデータ" を表示します。長方形のサイズは、データの量的な比率に対応します。
メモリツールのツリーマップは、ヒープの内容物をトップレベルで 4 つのカテゴリに分類します:
Function、Object、Array や、Window、HTMLDivElement などの DOM 型。それぞれのカテゴリを長方形で表現して、長方形のサイズはカテゴリ内のアイテムがヒープ内で占める割合に対応します。よって、あなたのサイトでどの種類のものがもっとも多くのメモリを使用しているかについて、おおまかな見解をすばやく得ることができます。
トップレベルのカテゴリ内では、以下のように分割します:
こちらが、ツリーマップビューで表示したスナップショットのサンプルです:
このツリーマップは DOM allocation example で取得しました。このページは大量の DOM ノード (200 個の HTMLDivElement オブジェクトと 4000 個の HTMLSpanElement オブジェクト) を生成するスクリプトを実行します。ヒープのほとんどすべてが、スクリプトで生成した HTMLSpanElement オブジェクトであることがわかります。
このツリーマップは、monster allocation example で取得しました。これは 3 個の配列を生成しており、それぞれに 5000 体のモンスターが含まれています。また、それぞれのモンスターはランダムに生成された名前を持っています。ヒープのほとんどがモンスターの名前で使用する文字列と、モンスターの他の属性を収めるために使用するオブジェクトで占められていることがわかります。
このツリーマップは http://www.bbc.com/ で取得しました。前出のサンプルより現実的な見本であるといえるでしょう。ヒープの多くがスクリプトで占められており、それらは多数の生成元から読み込まれていることがわかります。