アロケーション タイムライン ツールの使用方法

Meggin Kearney
Meggin Kearney

割り当てタイムライン ツールを使用して、適切にガベージ コレクションされず、メモリを保持し続けているオブジェクトを見つけます。

ツールの仕組み

割り当てタイムライン レポートは、ヒープ プロファイラの詳細なスナップショット情報と、タイムライン パネルの増分更新とトラッキングを組み合わせたものです。これらのツールと同様に、ヒープ割り当てのトラッキングでは、記録を開始し、一連のアクションを実行してから、分析のために記録を停止します。

このツールは、録画中に定期的に（50 ms ごとに）ヒープ スナップショットを取得し、録画の最後に最後のスナップショットを 1 つ取得します。

割り当てタイムラインの例の録画。

アロケーション タイムライン レポートを記録する

割り当てタイムライン ツールの使用を開始する手順は次のとおりです。

  1. DevTools で [メモリ] パネルを開きます。
  2. [タイムラインへの割り当て] プロファイルを有効にします。
  3. [開始] ボタンを押して録画を開始します。

[タイムラインに割り当てを記録] オプションがハイライト表示されています。

ヒープ割り当てプロファイルを読み取る

ヒープ割り当てプロファイルには、オブジェクトが作成されている場所と保持パスが表示されます。次のスナップショットでは、上部のバーはヒープ内で新しいオブジェクトが検出されたタイミングを示しています。

各バーの高さは最近割り振られたオブジェクトのサイズに対応し、バーの色は、それらのオブジェクトが最終的なヒープ スナップショットでまだ存続しているかどうかを示します。青い棒は、タイムラインの終了時点でまだ有効なオブジェクトを示します。灰色の棒は、タイムライン中に割り当てられたが、その後ガベージ コレクションされたオブジェクトを示します。

割り当てタイムラインの記録例。

ズームインして [コンストラクタ] ペインをフィルタすると、指定した期間に割り振られたオブジェクトのみを表示できます。ズームインするには、タイムラインで注目する期間にマウスをドラッグします。

タイムラインが 1 つのバーにズームインされています。

[コンストラクタ] ペインで特定のコンストラクタをクリックすると、[保持] ペインに保持ツリーが表示されます。オブジェクトへの保持パスを調べることで、オブジェクトが収集されなかった理由を理解するのに十分な情報を得ることができます。また、不要な参照を削除するために必要なコード変更を行うこともできます。

関数ごとのメモリ割り当てを表示する

JavaScript 関数ごとのメモリ割り当てを表示することもできます。詳細については、関数によるメモリ割り当てを調査するをご覧ください。