タイムラインでアロケーション インストルメンテーションを使用する (プロファイリングの種類 「タイムライン上でのアロケーション」)

メモリ ツールで、タイムラインでの割り当てプロファイリングの種類を使用して、適切にガベージ コレクションされていないオブジェクトを見つけ、メモリを保持し続けます。

タイムラインでのアロケーション インストルメンテーションの仕組み

メモリ ツールのタイムラインでの割り当てプロファイリング タイプは、ヒープ プロファイラーの詳細なスナップショット情報と、パフォーマンス ツールの増分更新と追跡を組み合わせたものです。 同様に、オブジェクトのヒープ割り当ての追跡には、記録の開始、一連のアクションの実行、分析のための記録の停止が含まれます。

タイムラインの割り当ては、レコーディング全体を通して定期的にヒープ スナップショットを取得し (最大頻度で 50 ミリ秒ごと)、レコーディングの終了時に最後のスナップショットを 1 つ取得します。

タイムラインでの割り当てのインストルメンテーション

@後の数字は、記録セッション中に取得された複数のスナップショットにわたって保持されるオブジェクト ID です。 永続的なオブジェクト ID を使用すると、ヒープの状態を正確に比較できます。 オブジェクトはガベージ コレクション中に移動されるため、オブジェクトのアドレスを表示しても意味がありません。

タイムラインでアロケーション インストルメンテーションを有効にする

タイムラインでの割り当ての使用を開始するには:

  1. Detached Elements demo Web ページなどの Web ページを新しいウィンドウまたはタブで開きます。

  2. Web ページを右クリックし、[ 検査] を選択します。 あるいは、Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。

    DevTools が開きます。

  3. DevTools の アクティビティ バーで、 メモリ (メモリ ツール アイコン) ツールを選択します。

    そのタブが表示されない場合は、[ その他のツール] ([その他のツール] アイコン) ボタンをクリックし、[ メモリ] を選択します。 メモリ ツールが開きます。

    メモリ ツールを開く

  4. [タイムラインでの割り当て] オプション ボタンを選択します。

    プロフィールが既に表示されているために、[タイムラインでの割り当て] オプション ボタンが表示されない場合は、左上の [プロフィール] ([プロフィール] アイコン) をクリックします。

  5. メモリ ツールの下部にある [スタート] ボタンをクリックします。

  6. Web ページを操作します。たとえば、デモ Web ページで [ 高速トラフィック ] ボタンをクリックし、次に [停止 ] ボタンをクリックします。 分析対象に応じて、ページを更新したり、ページを操作したり、単にページを実行したままにしたりできます。

  7. メモリ ツールの左上にある [記録ヒープ プロファイルの停止] ([記録ヒープ プロファイルの停止] アイコン) ボタンをクリックします。

    プロファイル リストの [割り当てタイムライン] セクションに新しいスナップショットが作成されます。

    [プロファイル] リストの [割り当てタイムライン] セクションに一覧表示されている新しいスナップショット

タイムラインに割り当てを記録する

メモリ ツールで、タイムラインでの割り当てプロファイリングの種類を使用します。 これは、JS ヒープのメモリ リークを追跡するための DevTools 機能の 1 つです。

次のコードが指定されます。

var x = [];
function grow() {
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

コードで参照されているボタンがクリックされるたびに、100 万文字の文字列が x 配列に追加されます。

タイムラインに割り当てを記録するには:

  1. デモ Web ページなどの Web ページを開きます。

  2. DevTools を開き、 メモリ ツールを選択します。

  3. [タイムラインでの割り当て] オプション ボタンをクリックし、[開始] ボタンをクリックします。

  4. メモリ リークの原因と思われるアクションを実行します。

  5. 完了したら、[記録の停止ヒープ プロファイル] の [記録の停止] ボタンをクリックします。

  6. 記録中に、タイムラインの割り当てインストルメンテーションに青いバーが表示されているかどうかを確認します。

    新しい割り当て

    これらの青いバーは、新しいメモリ割り当てを表します。 これらの新しいメモリ割り当ては、メモリ リークの候補となります。

  7. バーを拡大してコン ストラクター ウィンドウをフィルター処理し、指定した期間に割り当てられたオブジェクトのみを表示します。

    拡大された割り当てタイムライン

  8. オブジェクトを展開して値を選択すると、[ オブジェクト] ウィンドウに詳細が表示されます。

    たとえば、新しく割り当てられたオブジェクトの詳細では、Window スコープ内の x 変数に割り当てられたことを示します。

    オブジェクトの詳細

ヒープ割り当てタイムラインを読み取る

ヒープ割り当てタイムラインには、オブジェクトが作成されている場所が表示され、保持パスが識別されます。 次の図では、上部のバーは、ヒープ内で新しいオブジェクトが見つかったタイミングを示しています。

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

タイムライン スナップショットでの割り当てのインストルメンテーション

上のタイムラインのスライダーを使用して、その特定のスナップショットを拡大し、その時点で最近割り当てられたオブジェクトを確認できます。

スナップショットを拡大

ヒープ内の特定のオブジェクトをクリックすると、ヒープ スナップショットの下部に保持ツリーが表示されます。 オブジェクトへの保持パスを調べることで、オブジェクトが収集されなかった理由を理解するのに十分な情報が得られるはずです。また、必要なコード変更を行って不要な参照を削除する必要があります。

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

JavaScript 関数別のメモリ割り当てを表示できます。 JavaScript ランタイムの高速化 (「割り当てサンプリング」プロファイリングの種類) を参照してください。

注:

このページの一部の情報は、 Google によって 作成および共有されている著作物に基づいており、 Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここ にあり、Meggin Kearney によって作成されています。

Creative Commons ライセンス この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。

  • 最終更新: