ヒープ スナップショットを記録する

[Memory] > [Profiles] > [Heap Snapshot] でヒープのスナップショットを記録し、メモリリークを見つける方法を学習します。

ヒープ プロファイラには、ページの JavaScript オブジェクトと関連する DOM ノードのメモリ分布が表示されます。このツールを使用して、JS ヒープのスナップショットの取得、メモリグラフの分析、スナップショットの比較、メモリリークの検出を行います。詳細については、オブジェクト保持ツリーをご覧ください。

スナップショットを撮影

ヒープ スナップショットを取得するには:

1. プロファイリングするページで DevTools を開き、[メモリ] パネルに移動します。
2. プロファイリング タイプに radio_button_checked [ヒープ スナップショット] を選択し、JavaScript VM インスタンスを選択して [スナップショットを取得] をクリックします。

[メモリ] パネルでスナップショットが読み込まれて解析されると、[ヒープ スナップショット] セクションのスナップショット タイトルの下に、到達可能な JavaScript オブジェクトの合計サイズが表示されます。

スナップショットには、グローバル オブジェクトから到達可能なメモリグラフ内のオブジェクトのみが表示されます。スナップショットの取得は、必ずガベージ コレクションから始まります。

スナップショットを消去する

すべてのスナップショットを削除するには、[ブロック] [すべてのプロファイルを消去] をクリックします。

スナップショットを表示

目的に応じてさまざまな視点からスナップショットを検査するには、上部のプルダウン メニューからいずれかのビューを選択します。

表示	コンテンツ	目的
概要	コンストラクタ名別にグループ化されたオブジェクト。	このビューでは、型に基づいてオブジェクトとそのメモリ使用量を追跡します。DOM リークのトラッキングに役立ちます。
比較	2 つのスナップショットの違い。	このビューでは、操作前後の 2 つ（またはそれ以上）のスナップショットを比較します。解放されたメモリと参照カウントの差を調べて、メモリリークの存在と原因を確認します。
封じ込め	ヒープの内容	オブジェクト構造に適したビューが提供されるため、グローバル名前空間 "(window)" で参照されるオブジェクトを分析し、保持内容を調べるのに役立ちます。このビューでは、クロージャを分析して下位レベルのオブジェクトまで踏み込んで調査します。
統計情報	メモリ割り当ての円グラフ	コード、文字列、JS 配列、型付き配列、システム オブジェクトに割り当てられたメモリ部分の相対サイズを確認します。

概要ビュー

最初に、ヒープ スナップショットが [Summary] ビューに表示され、列に Constructors がリストされます。コンストラクタを展開すると、インスタンス化されたオブジェクトを確認できます。

関連性のないコンストラクタを除外するには、[概要] ビューの上部にある [クラスフィルタ] に、検査する名前を入力します。

コンス���ラクタ名の横の数字は、そのコンストラクタで作成されたオブジェクトの総数を示します。[概要] ビューには、次の列も表示されます。

• 距離は、ノードの最短単純パスを使用したルートまでの距離を示します。
• [浅いサイズ] には、特定のコンストラクタによって作成されたすべてのオブジェクトの浅いサイズの合計が表示されます。浅いサイズとは、オブジェクト自体が保持するメモリサイズです。一般に、配列と文字列の浅いサイズは大きくなります。オブジェクト サイズもご覧ください。
• [Retained size] には、同じオブジェクトセットの最大保持サイズが表示されます。保持サイズは、オブジェクトを削除してその依存オブジェクトに到達できなくすることで解放できるメモリのサイズです。オブジェクト サイズもご覧ください。

コンストラクタを展開すると、[概要] ビューにそのすべてのインスタンスが表示されます。各インスタンスの浅いサイズと保持サイズの内訳が対応する列に表示されます。@ 文字の後の数字はオブジェクトの一意の ID です。オブジェクト単位でヒープのスナップショットを比較できます。

コンストラクタ フィルタ

[概要] ビューを使用すると、メモリ使用量が非効率的になる一般的なケースに基づいてコンストラクタをフィルタできます。

これらのフィルタを使用するには、アクションバーの右端のプルダウン メニューから次のいずれかのオプションを選択します。

• すべてのオブジェクト: 現在のスナップショットでキャプチャされたすべてのオブジェクト。デフォルトで設定されます。
• スナップショット 1 の前に割り振られたオブジェクト: 最初のスナップショットが作成される前に作成され、メモリ内に残ったオブジェクト。
• Objects Allocated of Snapshots 1 and Snapshots 2: 最新のスナップショットと前のスナップショットの間のオブジェクトの違いを表示します。新しいスナップショットを作成するたびに、このフィルタの増分値がプルダウン リストに追加されます。
• 重複する文字列: メモリに複数回保存されている文字列の値。
• デタッチされたノードで保持されているオブジェクト: デタッチされた DOM ノードが参照しているため存続しているオブジェクト。
• DevTools コンソールによって保持されるオブジェクト: DevTools コンソールで評価または操作したため、メモリ内に保持されるオブジェクト。

[概要] の特別なエントリ

概要ビューでは、コンストラクタによるグループ化に加えて、次の条件でもオブジェクトがグループ化されます。

• Array や Object などの組み込み関数。
• タグ（<div>、<a>、<img> など）でグループ化された HTML 要素。
• コードで定義した関数。
• コンストラクタに基づかない特殊なカテゴリ。

(array)

このカテゴリには、JavaScript で表示されるオブジェクトに直接対応していない、さまざまな内部配列のようなオブジェクトが含まれます。

たとえば、JavaScript Array オブジェクトの内容は、サイズ変更を容易にするために、(object elements)[] という名前のセカンダリ内部オブジェクトに保存されます。同様に、JavaScript オブジェクトの名前付きプロパティは、(array) カテゴリにも表示される (object properties)[] という名前のセカンダリ内部オブジェクトに格納されることがよくあります。

(compiled code)

このカテゴリには、JavaScript または WebAssembly で定義された関数を実行するために V8 が必要とする内部データが含まれます。各関数は、小さなものから遅いものまで、大きくて速いものまで、さまざまな方法で表現できます。

V8 は、このカテゴリのメモリ使用量を自動的に管理します。関数が複数回実行されると、V8 では実行速度を上げるために、その関数により多くのメモリが使用されます。関数がしばらく実行されていない場合、V8 はその関数の内部データを消去することがあります。

(concatenated string)

V8 が 2 つの文字列を連結する場合（JavaScript の + 演算子など）、結果を内部で「連結文字列」（ロープ データ構造）として表現することがあります。

V8 は、2 つのソース文字列のすべての文字を新しい文字列にコピーするのではなく、2 つのソース文字列を指す first と second という内部フィールドを持つ小さなオブジェクトを割り振ります。これにより、V8 で時間とメモリを節約できます。JavaScript コードの観点から、これらは単なる通常の文字列であり、他の文字列と同様に動作します。

InternalNode

このカテゴリは、Blink で定義された C++ オブジェクトなど、V8 の外部に割り当てられたオブジェクトを表します。

C++ クラス名を表示するには、Chrome for Testing を使用して次の操作を行います。

1. DevTools を開く 設定 [設定] > [試験運用版] > チェックボックス [ヒープ スナップショットで内部を公開するオプションを表示] をオンにします。
2. [メモリ] パネルを開き、[radio_button_checked ヒープ スナップショット] を選択し、[check_box 内部データを表示する（実装に固有の追加情報を含む）] をオンにします。
3. InternalNode が大量のメモリを保持する原因となった問題を再現します。
4. ヒープのスナップショットを取得する。このスナップショットでは、オブジェクトに InternalNode ではなく C++ クラス名が付けられています。

(object shape)

V8 の高速プロパティで説明されているように、V8 は非表示クラス（またはシェイプ）を追跡し、同じプロパティを持つ複数のオブジェクトを同じ順序で効率的に表現できるようにします。このカテゴリには、system / Map という名前の非表示クラス（JavaScript の Map とは無関係）と関連データが含まれます。

(sliced string)

JavaScript コードが String.prototype.substring() を呼び出す場合など、V8 がサブ文字列を取得する必要がある場合、V8 は元の文字列から関連する文字をすべてコピーするのではなく、スライスされた文字列オブジェクトを割り当てることを選択する場合があります。この新しいオブジェクトには、元の文字列へのポインタが含まれ、元の文字列のどの範囲の文字を使用するかを記述します。

JavaScript コードの観点から見ると、これらは通常の文字列であり、他の文字列と同様に動作します。スライスされた文字列が大量のメモリを保持している場合、プログラムが Issue 2869 をトリガーしている可能性があります。この場合は、スライスされた文字列を「フラット化」するための意図的な手順を踏むことで、問題を解決できる可能性があります。

system / Context

system / Context 型の内部オブジェクトには、クロージャ（ネストされた関数がアクセスできる JavaScript スコープ）のローカル変数が含まれます。

すべての関数インスタンスには、実行される Context への内部ポインタが含まれているため、これらの変数にアクセスできます。Context オブジェクトは JavaScript から直接は表示されませんが、ユーザーが直接制御できます。

(system)

このカテゴリには、（まだ）意味のある方法で分類されていないさまざまな内部オブジェクトが含まれています。

比較ビュー

[比較] ビューでは、複数のスナップショットを相互に比較して、リークされたオブジェクトを見つけることができます。たとえば、ドキュメントを開いて閉じるといった操作を実行して元に戻す場合、余分なオブジェクトが残ることはありません。

特定のオペレーションでリークが作成されないことを確認するには:

1. オペレーションを実行する前にヒープ スナップショットを取得します。
2. オペレーションを実行します。つまり、リークの原因と思われる何らかの方法でページを操作します。
3. 逆オペレーションを実行します。つまり、反対のやり取りを数回繰り返します。
4. 2 つ目のヒープ スナップショットを取得し、ビューを [Comparison] に変更して [Snapshot 1] と比較します。

[比較] ビューには、2 つのスナップショットの違いが表示されます。集計エントリを展開すると、オブジェクトの追加されたインスタンスと削除されたインスタンスが表示されます。

Containment ビュー

Containment ビューは、アプリケーションのオブジェクト構造の「鳥瞰図」です。関数クロージャの内部を見て、JavaScript オブジェクトを構成する VM の内部オブジェクトを観察し、アプリケーションが非常に下位レベルで使用するメモリ量を把握できます。

ビューには複数のエントリ ポイントがあります。

• DOMWindow オブジェクト。JavaScript コードのグローバル オブジェクト。
• GC ルート。VM のガベージ コレクタによって使用される GC ルート。GC ルートは、組み込みオブジェクトのマップ、シンボルテーブル、VM スレッドスタック、コンパイル キャッシュ、ハンドルスコープ、グローバル ハンドルから構成されます。
• ネイティブ オブジェクト。自動化を可能にするために、JavaScript 仮想マシン内に「プッシュされる」ブラウザ オブジェクトです。たとえば、DOM ノードや CSS ルールなどがあります。

[Retainers] セクション

[メモリ] パネルの下部にある [保持] セクションには、ビューで選択したオブジェクトを参照するオブジェクトが表示されます。[統計情報] 以外のビューで別のオブジェクトを選択すると、[メモリ] パネルの [保持] セクションが更新されます。

この例では、選択された文字列は Item インスタンスの x プロパティで保持されます。

リテーナーを無視する

保持子を非表示にして、選択したオブジェクトを保持している他のオブジェクトがあるかどうかを確認できます。このオプションを使用すると、コードからこの保持ツールを削除してからヒープ スナップショットを再取得する必要がなくなります。

保持子を非表示にするには、保持子を右クリックして [この保持子を無視] を選択します。無視された保持子は、[距離] 列に ignored とマークされます。すべての保持を無視しないようにするには、上部にあるアクションバーで [playlist_remove 無視された保持を復元] をクリックします。

特定のオブジェクトを見つける

ガベージ コレクションが行われたヒープ内でオブジェクトを見つけるには、Ctrl+F を使用してオブジェクト ID を入力します。

関数に名前を付けてクロージャを区別する

スナップショット内のクロージャを区別できるように、関数に名前を付けると非常に役立ちます。

たとえば、次のコードは名前付きの関数を使用していません。

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function() { // this is NOT a named function
    return largeStr;
  };

  return lC;
}

上記の例を以下のようにします。

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function lC() { // this IS a named function
    return largeStr;
  };

  return lC;
}

DOM リークの検出

ヒープ プロファイラには、ブラウザネイティブ オブジェクト（DOM ノード、CSS ルール）と JavaScript オブジェクト間の双方向の依存関係を反映する機能があります。これにより、デタッチされ、忘れられた DOM サブツリーがあるために発生する、目に見えないリークを検出するのに役立ちます。

DOM リークは予想以上に大きくなることがあります次の例をご覧ください。#tree はいつガベージ コレクションされますか？

  var select = document.querySelector;
  var treeRef = select("#tree");
  var leafRef = select("#leaf");
  var body = select("body");

  body.removeChild(treeRef);

  //#tree can't be GC yet due to treeRef
  treeRef = null;

  //#tree can't be GC yet due to indirect
  //reference from leafRef

  leafRef = null;
  //#NOW #tree can be garbage collected

#leaf は、親（parentNode）への参照を保持し、再帰的に #tree まで参照するため、leafRef が Null フィールドになる場合のみ、#tree の下のツリー全体が GC の候補になります。