パフォーマンス機能リファレンス

このページでは、パフォーマンスの分析に関連する DevTools 機能の包括的なリファレンスについて説明します。

パフォーマンス ツールを使用してページのパフォーマンスを分析する方法に関するステップバイステップのチュートリアルについては、「ランタイム パフォーマンスの分析 (チュートリアル)」を参照してください。

このページの画像では、DevTools が専用ウィンドウにドッキングされていない状態を示しています。 DevTools のドッキング解除の詳細については、「DevTools の配置の変更 (装着解除、下にドッキング、左にドッキング)」の「DevTools を別のウィンドウにドッキング解除する」を参照してください。

詳細な内容:

• パフォーマンス ツールを開く
• パフォーマンスを記録する
  • ランタイム パフォーマンスを記録する
  • 記録的な読み込みパフォーマンス
  • 記録中にスクリーンショットをCapture
  • 記録中にガベージ コレクションを強制する
  • レコーディング設定の表示
  • JavaScript サンプルを無効にする
  • 録画中にネットワークを調整する
  • 記録中に CPU の調整
  • CSS セレクター統計を有効にする
  • 高度なペイント インストルメンテーションを有効にする
• レコーディングに注釈を付けて共有する
  • レコーディングを保存して共有する
  • 記録を読み込む
• 直前の記録をクリアする
• パフォーマンス記録を分析する
  • 実用的な分析情報を取得する
  • 記録内を移動する
    • キーボード ショートカットを使用して移動する
    • レコーディングの一部を選択する
    • 録画の一部を拡大し、ズーム レベルを切り替える
    • 長いフレーム グラフをスクロールする
  • アクティビティの検索
  • トラックの順序を変更して非表示にする
  • メイン スレッド アクティビティを表示する
  • フレーム グラフを読み取る
  • イベント イニシエーターの追跡
  • フレーム グラフで関数とその子を非表示にする
    • フレーム グラフ内のスクリプトを無視する
  • テーブル内のアクティビティを表示する
    • ルート アクティビティ
    • ボトムアップ タブ
    • [通話ツリー] タブ
    • [イベント ログ] タブ
  • パフォーマンス マーカーを表示する
  • カスタム タイミングを表示する
  • 対話式操作の表示
  • レイアウト シフトを表示する
  • アニメーションを表示する
  • GPU アクティビティの表示
  • ラスター アクティビティの表示
  • 1 秒あたりのフレーム数 (FPS) を分析する
    • [フレーム] セクション
  • ネットワーク要求の表示
  • メモリ メトリックの表示
  • 記録の一部の継続時間を表示する
  • スクリーンショットを表示する
  • レイヤー情報の表示
  • ペイント プロファイラーの表示
  • CSS セレクター統計を表示する
  • ウィンドウ、iframe、専用ワーカー間のメッセージを表示する
  • WebSocket メッセージの表示
• レンダリング ツールを使用してレンダリング パフォーマンスを分析する
  • FPS メーターを使用して 1 秒あたりのフレーム数をリアルタイムで表示する
  • ペイント点滅を使用してリアルタイムでペイント イベントを表示する
  • レイヤー罫線を使用してレイヤーのオーバーレイを表示する
  • スクロール パフォーマンスの問題をリアルタイムで検出する
  • ローカル フォントを無効にする
• メモリ リークを視覚化する (パフォーマンス ツール: [メモリ] チェック ボックス)

パフォーマンス ツールを開く

DevTools で パフォーマンス ツールを開くには:

1. Web ページを右クリックし、[ 検査] を選択します。

   あるいは、Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。

   DevTools が開きます。

2. DevTools の アクティビティ バーで、[ パフォーマンス ] ) タブを選択します。

   そのタブが表示されていない場合は、[ その他のツール ] () ボタンをクリックします。

パフォーマンスを記録する

以下のセクションでは、DevTools で Web ページのパフォーマンスを記録する方法について説明します。

ランタイム パフォーマンスを記録する

Web ページのパフォーマンスを (読み込み中ではなく) 実行中に分析するには:

1. 分析する Web ページ ( フォト ギャラリーのデモなど) に移動します。

2. Web ページを右クリックし、[ 検査] を選択します。

   DevTools が開きます。

3. アクティビティ バーで、[パフォーマンス] ) ツールを選択します。

4. [ 記録 ] ) ボタンをクリックします。

   

5. しばらくページを操作します。 DevTools は、操作の結果として発生するすべてのページ アクティビティを記録します。

6. もう一度 [録音] をクリックします。 または、[ 停止] をクリックして記録を停止します。

   パフォーマンス ツールには、記録が表示されます。

記録的な読み込みパフォーマンス

Web ページのパフォーマンスを (実行中ではなく) 読み込み中に分析するには:

1. 分析する Web ページ ( フォト ギャラリーのデモなど) に移動します。

2. Web ページを右クリックし、[ 検査] を選択します。

   DevTools が開きます。

3. アクティビティ バーで、[パフォーマンス] ) ツールを選択します。

4. ページの 更新 () ボタンをクリックします。

   

   DevTools はページの更新中にパフォーマンス メトリックを記録し、読み込みが完了してから数秒後に記録を自動的に停止します。 次に、DevTools に記録が表示され、アクティビティのほとんどが発生した記録の部分が自動的に拡大表示されます。

   

記録中にスクリーンショットをCapture

録画中にすべてのフレームのスクリーンショットをキャプチャするには、[ スクリーンショット] チェックボックスを選択します。

スクリーンショットを操作する方法については、以下の「 スクリーンショットを表示する」を参照してください。

記録中にガベージ コレクションを強制する

ページの記録中にガベージ コレクションを強制するには、[ ガベージの収集 ] ) ボタンをクリックします。

レコーディング設定の表示

DevTools がパフォーマンスの記録をキャプチャする方法に関連するその他の設定を表示するには:

• パフォーマンスツールで、Capture settings(設定)ボタンをクリックします。

  チェックボックスとドロップダウン リストは、 パフォーマンス ツールの上部に表示されます。

  

JavaScript サンプルを無効にする

既定では、レコーディングの Main セクションには、レコーディング中に呼び出された JavaScript 関数の詳細な呼び出し履歴が表示されます。 JavaScript 呼び出し履歴を無効にするには:

1. パフォーマンスツールで、Capture settings(設定)ボタンをクリックします。

2. [ JavaScript サンプルを無効にする ] チェック ボックスをオンにします。

3. ページの記録を撮ります。

次の 2 つの図は、JavaScript サンプルを無効にする場合と有効にする場合の違いを示しています。 JavaScript サンプリングが無効になっていると、記録では JavaScript 呼び出し履歴が省略されるため、記録の メイン セクションははるかに短くなります。

JS サンプルが無効になっている場合の記録の例:

JS サンプルが有効になっている場合の記録の例:

録画中にネットワークを調整する

記録中にネットワークの調整を行うには:

1. パフォーマンスツールで、Capture settings(設定)ボタンをクリックします。 上記の「 レコーディング設定の表示」を参照してください。

2. ネットワークを必要な調整レベルに設定します。

   ネットワーク ツールのタブに警告アイコンが表示され、調整が有効になっていることが通知されます。

記録中に CPU の調整

記録中に CPU を調整するには:

1. パフォーマンスツールで、Capture settings(設定)ボタンをクリックします。 上記の「 レコーディング設定の表示」を参照してください。

2. CPU を目的の調整レベルに設定します。

   [ パフォーマンス ] ツールのタブに警告アイコンが表示され、調整が有効になっていることが通知されます。

スロットリングは、コンピューターの機能に比例します。 たとえば、 2 倍の速度低下 オプションを使用すると、CPU の動作が通常の 2 倍遅くなります。 モバイル デバイスのアーキテクチャはデスクトップやノート PC のアーキテクチャとは大きく異なるため、DevTools はモバイル デバイスの CPU を真にシミュレートすることはできません。

CSS セレクター統計を有効にする

長時間実行されている 再計算スタイル イベント中に CSS ルール セレクターの統計情報を表示するには:

1. Capture settings()ボタンをクリックします。 上記の「 レコーディング設定の表示」を参照してください。

2. [ CSS セレクター統計を有効にする (低速)] チェック ボックスをオンにします。

詳細については、 スタイルの再計算イベント中の CSS セレクターのパフォーマンスの分析を参照してください。

高度なペイント インストルメンテーションを有効にする

詳細なペイント計測を表示するには:

1. Capture settings()ボタンをクリックします。 上記の「 レコーディング設定の表示」を参照してください。

2. [ 高度なペイント インストルメンテーションを有効にする (低速) ] チェック ボックスを選択します。

ペイント情報を操作する方法については、以下のレイヤー 情報の表示とペイン ト プロファイラーの表示を参照してください。

レコーディングに注釈を付けて共有する

パフォーマンス トレース が記録されたら 、分析し 、注釈を付けて結果を共有できます。

記録に注釈を付けるには、[パフォーマンス] ツールのサイドバーの [注釈] タブを開きます。 サイド バーが表示されない場合は、[サイドバーの表示) ボタンをクリックします。

サイドバーの [ 注釈 ] タブには、最初に注釈を追加する方法に関する手順が含まれています。 注釈を作成すると、以下に示すように、タブに既存の注釈が一覧表示され、それらを削除できます。

注釈を追加するには、いくつかの方法があります。

• 項目にラベルを付ける: パフォーマンス トレース内の項目にラベルを付けるには、項目をダブルクリックし、テキスト ボックスにラベルを入力して、 Enter キーを押します。

• 2 つの項目を接続する: パフォーマンス トレース内の 2 つの項目の間に矢印を描画するには、最初の項目をダブルクリックし、その横にある矢印アイコンをクリックしてから、2 番目の項目をクリックします。

• 時間範囲にラベルを付ける: パフォーマンス トレース内の任意の時間範囲を描画してラベルを付けるには、 Shift キーを押しながら時間範囲の先頭から末尾までドラッグし、表示されるテキスト ボックスにラベルを入力して Enter キーを押します。

たとえば、新しいウィンドウまたはタブで アクティビティ タブ デモ Web ページを開き、パフォーマンスの記録を作成してから、上記の 3 つのアクションを実行します。 結果:

この例では、次のようになります。

• 3 つの注釈。
• 2 つの注釈をつなぐ矢印の注釈。
• ピンクで強調表示されている注釈付きの時間範囲。

[ 注釈] タブには、タブ名の横に注釈の数が表示されます。この例では 5。

注釈を削除するには、[ 注釈 ] タブで注釈にカーソルを合わせ、その横にある [削除 ] ボタンをクリックします。

パフォーマンス トレースから注釈を非表示にするには、[注釈] タブの下部にある [注釈を非表示にする] を選択します。

レコーディングを保存して共有する

記録をファイルとしてデバイスに保存し、後で注釈付きのパフォーマンス結果と共有するには、 パフォーマンス ツールの上部にあるアクション バーで、[ プロファイルの保存 ] ) ボタンをクリックし、[ トレースの保存] を選択します。

または、[ 注釈なしでトレースを保存する] を選択します。

上部にある [プロファイルの保存 ] ) ボタンをクリックする代わりに、レコーディングのトラックを右クリックして 、[プロファイルの保存] を選択することができます。

記録を読み込む

ファイルからレコーディングをロードするには、パフォーマンスツールの上部にあるアクションバーにある[プロファイルのロード])ボタンをクリックします。

トレースに注釈がある場合、 パフォーマンス ツールによって表示されます。

または、[ パフォーマンス ] ツールを右クリックし、[ プロファイルの読み込み] を選択します。

既存のレコーディングを右クリックするか、レコーディングがないときに パフォーマンス ツールに表示されている画面を右クリックできます。

直前の記録をクリアする

記録を作成した後、 パフォーマンス ツールからその記録を削除するには、[ 記録のクリア ] () ボタンをクリックします。

パフォーマンス記録を分析する

実行時のパフォーマンスまたは記録ロード パフォーマンスを記録すると、パフォーマンス ツールは記録に関する多くのデータを表示します。 記録されたデータを使用して、Web ページのパフォーマンスを分析します。

実用的な分析情報を取得する

パフォーマンス ツールは、記録されたパフォーマンス データから実用的な洞察を抽出します。 これらの分析情報は、Web サイトのパフォーマンスを向上させるための手段となります。 分析情報には次のものが含まれます。

• INP by phase
• LCP by phase
• LCP 要求の検出
• レイアウト シフトの原因
• レンダリング ブロック要求
• ネットワーク依存関係ツリー
• 画像配信を改善する
• ドキュメント要求の待機時間
• フォント表示
• モバイル用にビューポートを最適化する
• DOM サイズを最適化する
• サード パーティ
• CSS セレクターのコスト
• 強制リフロー
• 効率的なキャッシュの有効期間を使用する

分析情報は、Core Web Vitals メトリックの改善と、Web ページの読み込みとレンダリングの速度の最適化に重点を置いています。

パフォーマンス ツールでプロファイルを記録した後、サイドバーの [インサイト] タブに、記録されたパフォーマンス データに適用される実用的なインサイトの一覧が表示されます。 プロファイルに適用されない分析情報の一覧を表示するには、[ 合格した分析情報] セクションを参照してください。

分析情報を使用するには:

1. 上記の 「パフォーマンスを記録」に従ってパフォーマンスを記録します。

2. パフォーマンス ツールの左側のサイドバーで、[Insights] タブを選択し、さまざまなセクションを展開して項目にカーソルを合わせてクリックします。 パフォーマンス ツールは、トレース内の対応するイベントを強調表示します。

   

   サイドバーと Insights タブが表示されない場合は、[ サイドバーの表示 ] ) ボタンをクリックします。

記録内を移動する

パフォーマンス レコーディングを詳しく調べるには、レコーディングの一部を選択する、長いフレーム チャートをスクロールする、ズーム イン/ズーム アウトする、および階層リンクを使用してズーム レベル間を移動する操作があります。

キーボード ショートカットを使用して移動する

キーボード ショートカットを使用して記録をすばやく移動するには、まず、次のようにキーボード ナビゲーションの好みのスタイルを選択します。

• パフォーマンス ツールの右上隅にある [ショートカットの表示] ) ボタンをクリックし、[モダン] または [クラシック] オプション ボタンを選択します。

  [ キーボード ショートカット ] ダイアログには、選択したマッピング オプションで使用可能なショートカットが表示されます。

[モダン オプション] ボタンが選択されている場合:

• 拡大するには: Command/Ctrl + マウス ホイール。
• 垂直スクロールへ: マウス ホイール。
• 水平スクロールへ: Shift + マウス ホイール。

クラシック オプション ボタンが選択されている場合:

• ズームするには: マウス ホイールまたはタッチパッドを上下に動かします。
• 垂直スクロールへ: Shift + マウス ホイール。
• 横スクロールへ: Shift + 左方向キー|右方向キー

その他のショートカット:

• W キーまたは S キーを押してズームします。

• A キーまたは D キーを押して左右にパンする。

レコーディングの一部を選択する

記録の上部には、CPUグラフと NET グラフ (右側に示) を含む [Timeline overview (タイムラインの概要)] セクションが表示されます。

記録の一部を選択するには、 タイムラインの概要で、次をクリックして水平方向にドラッグします。

キーボードを使用して一部を選択するには:

1. メイン トラックまたはその隣接するトラックにフォーカスを合わせます。

2. W、A、S、D キーを使用して、それぞれ拡大、左へ移動、縮小、右へ移動します。

トラックパッドを使って一部を選択するには:

1. [タイムラインの概要] セクションまたはトラック (メインとその隣接するトラック) のいずれかにマウス ポインターを合わせます。

2. 2 本指を使用して、上にスワイプすると縮小、左にスワイプすると左に移動、下にスワイプすると拡大、右にスワイプすると右に移動します。

マウス、キーボード、またはトラックパッドを使って、記録の一部を選択できます。

マウス:

マウスを使用して記録の一部を選択するには:

• [概要] でマウスを左または右にドラッグします。 概要は、CPU と NET のグラフを含むセクションです。

メイン セクションまたは隣接するセクションで長いフレーム チャートをスクロールするには、クリックしたまま上下にドラッグします。 左または右にドラッグして、記録のどの部分を選択するかを移動します。

キーボード:

キーボードを使用して記録の一部を選択するには:

1. メイン セクションの背景を選択するか、メイン セクションの隣にあるセクションの背景 (操作、ネットワーク、GPU など) を選択します。 このキーボード ワークフローは、これらのセクションのいずれかがフォーカスされている場合にのみ機能します。

2. 拡大または縮小するには、 W または S キーを押します。左または右に移動するには、 A または D キーを押します。

トラックパッド:

トラックパッドを使用して記録の一部を選択するには:

1. [ 概要 ] セクションまたは [ 詳細 ] セクションにマウス ポインターを移動します。 [概要] セクションには、FPS、CPU、および NET の各グラフが含まれています。 [詳細] セクションは、[メイン] セクションと [相互作用] セクションを含む領域です。

2. 2 本の指で、上にスワイプすると縮小表示が縮小され、下にスワイプすると拡大表示されます。 2 本の指を使用して、左にスワイプすると左に移動、右にスワイプすると右に移動します。

録画の一部を拡大し、ズーム レベルを切り替える

タイムラインの概要では、記録の一部を連続して拡大し、各ステップで階層リンクを作成して、これらのズーム レベルを切り替えることができます。

レコーディングの一部を拡大してブレッドクラムを使用するには:

1. [タイムラインの概要] で、記録の一部を選択します (上)。

2. 選択範囲の上にマウス ポインターを置き、[ N ms ] () ボタンをクリックします。

   

   選択範囲が展開され、 タイムラインの概要を埋めます。 タイムラインの概要の上部に、階層リンクのチェーンが構築され始めます。

3. 前の 2 つの手順を繰り返して、別の入れ子になった階層リンクを作成します。 選択範囲が 5 ミリ秒を超える限り、階層リンクを入れ子にし続けることができます。

4. 選択したズーム レベルにジャンプするには、 タイムラインの概要の上部にあるチェーン内の対応する階層リンクをクリックします。

階層リンクの子を削除するには、親階層リンクを右クリックして、[子階層リンクの削除] を選択します。

長いフレーム グラフをスクロールする

メイン トラックまたは その 隣のトラックで長いフレーム チャートをスクロールするには、クリックしたまま、探しているものが表示されるまで任意の方向にドラッグします。

アクティビティの検索

メイン トラックのアクティビティとネットワーク トラックの要求を検索できます。

パフォーマンス ツールの下部にある検索ボックスを開くには:

1. Ctrl+F (Windows、Linux) または Command + F (macOS) を押します。

   パフォーマンス ツールの下部に [検索] ボックスが表示されます。

   

2. [ 検索 ] ボックスに、クエリ (「スタイルを再計算」など) を入力します。

   入力すると、一致するアクティビティが [メイン ] セクションで強調表示され、一致する合計数が検索ボックスに表示されます。 最初の一致するアクティビティが選択され、青で囲まれています。

   

クエリに一致するアクティビティ間を移動するには:

• 次のアクティビティを選択するには、Enter キーを押すか、[次へ] ボタンをクリックします。

• 前のアクティビティを選択するには、 Shift+Enter キーを押すか、[ 前へ (へ)] ボタンをクリックします。

パフォーマンス ツールは、[検索] ボックスで選択したアクティビティの上にヒントを表示します。

クエリの設定を変更するには:

• クエリで正規表現を使用するには、[ 正規表現を有効にする ] ) ボタンをクリックします。 [ 正規表現 ] ボタンを選択し、「 ^E.* 」と入力すると、文字 E で始まるアクティビティが検索されます。

• クエリで大文字と小文字を区別するには、[大 文字と小文字を区別する検索を有効にする]) ボタンをクリックします。

検索ボックスを非表示にするには、[ キャンセル] ボタンをクリックします。

トラックの順序を変更して非表示にする

パフォーマンス トレースを整理するために、トラック構成モードでトラックの順序を変更し、関係のないトラックを非表示にします。

トラックを移動および非表示にするには:

1. 構成モードに切り替えるには、トラック名を右クリックし、[ トラックの構成] を選択します。

2. トラックを 上に移動 (トラックを) またはトラックを下に 移動 (トラックをアイコン) をクリックしてトラックを上下に移動します。 トラックを非表示にするには、[ トラックを非表示にする ] アイコン (トラックをにするアイコン) ボタンをクリックします。

3. トラックを右クリックし、[ 構成の完了] を選択します。

DevTools を閉じてから再度開かない限り、パフォーマンス ツールはトラック構成を新しいトレースにも適用します。

メイン スレッド アクティビティを表示する

[メイン] セクションを使用して、ページのメイン スレッドで発生したアクティビティを表示します。

イベントを選択すると、[ 概要] タブにそのイベントの詳細が表示されます。DevTools は、選択したイベントの概要を示します。

DevTools は、メイン スレッド アクティビティをフレーム グラフで表します。

x 軸は、時間の経過に伴う記録を表します。 y 軸は呼び出し履歴を表します。 最上部に近いイベントは、その下にあるイベントを引き起こします。たとえば、上の図では、 input イベントによって Function Call が発生し、 filterByCamera を呼び出して populateGallery する匿名関数が実行されました。 その後、 populateGallery 関数は set innerHTML を呼び出して DOM の変更を行いました。

DevTools はスクリプトにランダムな色を割り当てます。 上の図では、スクリプトからの関数要求はフクシア (紫/ピンク) で表示されます。 濃い黄色はスクリプト アクティビティを表し、紫色のイベントはレンダリング アクティビティを表します。 これらの濃い黄色と紫色のイベントは、すべての記録で一貫しています。

JavaScript 要求の詳細なフレーム チャートを非表示にする場合は、上記の 「JavaScript サンプルを無効にする」を参照してください。 JavaScript サンプルを無効にすると、上の図の Event: input や Function Call などの高レベルのイベントのみが表示されます。

フレーム グラフを読み取る

パフォーマンス ツールは、メイン スレッドのアクティビティをフレーム グラフで表します。 x 軸は、時間の経過に伴う記録を表します。 y 軸は呼び出し履歴を表します。 一番上にあるイベントは、次のイベントを引き起こします。

パフォーマンス ツールはスクリプトにランダムな色を割り当てて、フレーム グラフを分割して読みやすくします。

長いタスクも赤い三角形で強調表示され、50 ミリ秒を超える部分は赤で網掛けされます。

さらに、 メイン トラックには、 profile() および profileEnd() 本体機能で開始および停止された CPU プロファイルに関する情報が表示されます。

JavaScript 呼び出しの詳細なフレーム チャートを非表示にするには、「JavaScript サンプルを無効にする」を参照してください。 JS サンプルが無効になっている場合は、 Event (click) や Function Call などの上位レベルのイベントだけが表示されます。

イベント イニシエーターの追跡

メイン トラックには、次のイニシエーターと、それらが引き起こしたイベントを接続する矢印を表示できます。

• スタイルまたはレイアウトの無効化 ->Recalculate styles or Layout
• アニメーション フレームの要求 ->アニメーション フレームが発生します
• Request Idle Callback ->Fire Idle Callback
• Install Timer ->Timer が始動しました
• WebSocket の作成 ->送信... して WebSocket ハンドシェイクを受信するか、WebSocket を破棄する
• Schedule postTask ->fire postTask or Abort postTask

矢印を表示するには、フレーム チャートでイニシエーターまたはそれが発生したイベントを見つけて選択します。

選択すると、[ 概要 ] タブには、イニシエーターのリンク の [イニシエーター ] と、イニシエーターが引き起こしたイベントのリンクの [開始者] が表示されます。 クリックすると、対応するイベント間を移動できます。

フレーム グラフで関数とその子を非表示にする

メイン スレッドのフレーム チャートを整理するには、選択した関数またはその子を非表示にします。

1. メイン トラックで、関数を右クリックし、次のいずれかのオプションを選択するか、対応するショートカットを押します。

   • Hide 関数 (H)
   • 子供を非表示にする (C)
   • 繰り返しの子を非表示に する (R)
   • 子のリセット (U)
   • トレースのリセット (T)
   • 無視するスクリプトを追加 リスト (I)

   [数値非表示] ドロップダウン () ボタンが、非表示の子を含む関数名の横に表示されます。

2. 非表示のお子様の数を表示するには、[ 非表示の数] ドロップダウン () ボタンにカーソルを合わせます。

3. 非表示の子を含む関数、またはフレーム チャート全体をリセットするには、関数を選択して U キーを押すか、任意の関数を右クリックして [トレースのリセット ] をそれぞれ選択します。

フレーム グラフ内のスクリプトを無視する

無視リストにスクリプトを追加するには、グラフ内のスクリプトを右クリックし、「 無視するスクリプトを追加」を選択します。

グラフでは、無視されたスクリプトが折りたたまれ、無視リストとしてマークされ、[DevTools のカスタマイズと制御] ) >設定>無視リストのカスタム除外ルールに追加されます。 無視されたスクリプトは、トレースまたは カスタム除外ルールから削除するまで保存されます。

テーブル内のアクティビティを表示する

ページを記録した後、アクティビティを分析する [メイン ] セクションに加えて、DevTools にはアクティビティを分析するための 3 つの表形式ビューも用意されています。 各ビューでは、アクティビティについてのさまざまな視点が得られます。

• 最も多くの時間が直接費やされたアクティビティを表示するには、[ ボトムアップ] タブを使用します。

• 最も多くの作業の原因となっているルート アクティビティを表示するには、[ 通話ツリー] タブを使用します。

• 記録中に発生した順にアクティビティを表示するには、[ イベント ログ ] タブを使用します。

探しているものをよりすばやく見つけるのに役立つように、3 つのタブすべての フィルター バーの 横に高度なフィルター処理用のボタンがあります。

• [ 正規表現を有効にする]) ボタン。

• [ 大文字と小文字の区別検索を有効にする ] ) ボタン。

パフォーマンス ツールの各表形式ビューには、関数呼び出しなどのアクティビティへのリンクが表示されます。 デバッグを支援するために、DevTools はソース ファイルで対応する関数宣言を検索します。 さらに、適切なソース マップが存在し、有効になっている場合、DevTools は元のファイルを自動的に検索します。

リンクをクリックして、[ ソース] ツールでソース ファイルを開きます。

次の 3 つのセクションはすべて同じデモを参照しています。 アクティビティ タブのデモ でデモを自分で実行し、 MicrosoftEdge / デモ > /devtools-performance-activitytabs/ でソースを確認できます。

ルート アクティビティ

ここでは、[ コール ツリー ] タブ、[ボ トムアップ ] タブ、および [イベント ログ ] セクションに記載されているルート アクティビティの概念について説明します。

ルート アクティビティは 、ブラウザーに何らかの作業を行うアクティビティです。 たとえば、Web ページをクリックすると、ブラウザーは Event アクティビティをルートアクティビティとして実行します。 その Event アクティビティによって、ハンドラーなどの他のアクティビティが実行されることがあります。

メイン セクションのフレーム チャートでは、ルート アクティビティがチャートの上部に表示されます。 [ Call Tree (通話ツリー)] タブと [Event Log (イベント ログ )] タブでは、ルート アクティビティが最上位の項目です。

ルート アクティビティの例については、以下の [ コール ツリー] タブを参照してください。

[通話ツリー] タブ

[ Call Tree] タブを使用して、最も多くの作業を引き起こしている ルート アクティビティ を表示します。

[通話ツリー] タブには、記録の選択した部分でのアクティビティのみが表示されます。 レコーディングの一部を選択する方法については、上記の「 レコーディングの一部を選択する」を参照してください。

上の図では、「 アクティビティ」 列の最上位の項目 ( Event Timing など) はルート アクティビティです。 入れ子は呼び出し履歴を表します。 たとえば、上の図では、 Event Timing が Event: mouseup を引き起こし、 Function Call が (anonymous) を引き起こし、というように続きます。

セルフ タイムは 、そのアクティビティに直接費やされた時間を表します。 合計時間 は、そのアクティビティまたはお子様のいずれかに費やされた時間を表します。

[ セルフ タイム]、[ 合計時間]、または [アクティビティ ] をクリックして、その列でテーブルを並べ替えます。

[ フィルター ] テキスト ボックスを使用して、アクティビティ名でイベントをフィルター処理します。

既定では、[ グループ化 ] メニューは [ グループ化なし] に設定されています。 [グループ化] メニューを使用して、さまざまな基準に基づいてアクティビティ テーブルを並べ替えます。

[最も重いスタックを表示] () をクリックして、[アクティビティ] テーブルの右側に別のテーブルを表示します。 アクティビティをクリックして、[ 最も重いスタック ] テーブルを設定します。 最も重いスタック テーブルには、選択したアクティビティのどの子の実行に最も時間がかかったかが表示されます。

ボトムアップ タブ

[ ボトムアップ] タブを使用して、どのアクティビティが合計で最も多くの時間を費やしたかを直接表示します。

ボ トムアップタブ には、記録の選択した部分でのアクティビティのみが表示されます。 レコーディングの一部を選択する方法については、上記の「 レコーディングの一部を選択する」を参照してください。

上の図の メイン セクションのフレーム チャートでは、ほぼすべての時間が a、 b、 c 関数の実行に費やされています。 上の図の ボトムアップ タブの上位のアクティビティは、 a、 b、および c でもあります。 [ ボトムアップ] タブでは、次にコストの高いアクティビティは Minor GC です。

「 セルフ・タイム 」列は、すべての発生にわたって、そのアクティビティに直接費やされた合計時間を表します。

[ 合計時間 ] 列は、そのアクティビティまたは任意の子に費やされた合計時間を表します。

[イベント ログ] タブ

[ イベント ログ ] タブを使用して、記録中に発生した順にアクティビティを表示します。

[ イベント ログ ] タブには、記録の選択した部分のアクティビティのみが表示されます。 レコーディングの一部を選択する方法については、上記の「 レコーディングの一部を選択する」を参照してください。

[ 開始時間 ] 列は、そのアクティビティが開始された時点 (記録の開始時点を基準にして) を表します。 たとえば、上の図で選択した項目の 925.0 ms の開始時刻は、記録の開始から 925.0 ミリ秒後にアクティビティが開始されたことを意味します。

[ セルフ タイム ] 列は、そのアクティビティに直接費やされた時間を表します。

[合計時間] 列は、そのアクティビティまたは任意の子に直接費やされた時間を表します。

列見出しの [ 開始時刻]、[ セルフ タイム]、または [合計時間 ] をクリックし、その列を基準にしてテーブルを並べ替えます。

[ フィルター] テキスト ボックスを使用して、アクティビティを名前でフィルター処理します。

[ 継続時間] メニューを使用して、1 ミリ秒または 15 ミリ秒未満のアクティビティをフィルター処理します。 既定では、[ 期間] メニューは [すべて] に設定されています。つまり、すべてのアクティビティが表示されます。

[ ロード]、[ スクリプト]、[ レンダリング]、または [ペイント ] チェック ボックスをオフにして、これらのカテゴリからすべてのアクティビティをフィルター処理します。

パフォーマンス マーカーを表示する

パフォーマンス トレース全体に縦線があるオーバーレイでは、次のような重要なパフォーマンス マーカーを確認できます:

• ファースト ペイント (FP)
  • MDN の用語集の最初のペイント (FP)。
• First Contentful Paint (FCP)
  • MDN の用語集の最初のコンテンツフル ペイント (FCP)。
  • PerformancePaintTiming at MDN.
• Largest Contentful Paint (LCP)
  • MDN の用語集で最大のコンテンツフル ペイント (LCP)。
  • MDN の LargestContentfulPaint。
• DOMContentLoaded イベント (DCL)
  • MDN での DOMContentLoaded イベント (DCL)。
• Onload イベント (L)
  • MDN でのオンロード イベント (L)。

トレースの下部にあるマーカー名にカーソルを合わせると、そのタイムスタンプが表示されます。

カスタム タイミングを表示する

タイミング トラックで、次のようなカスタム パフォーマンス マーカーを表示します。

• performance.mark() できます。

• performance.measure() できます。

マーカーを選択すると、[ 概要 ] タブに、タイムスタンプ、合計時間、セルフ タイム、 detail オブジェクトなどの詳細が表示されます。 performance.mark() 呼び出しと performance.measure() 呼び出しの場合、タブにはスタック トレースも表示されます。

対話式操作の表示

[ インタラクション] セクションを使用して、記録中に発生したユーザーインタラクションを見つけて分析します。

対話の下部にある赤い線は、メイン スレッドの待機に費やされた時間を表します。

対話をクリックすると、[ 概要 ] タブにその対話の詳細が表示されます。

レイアウト シフトを表示する

レイアウト シフト トラックでレイアウト シフトを表示します。シフトは紫色のひし形で表示され、タイムライン上の近接性に基づいてクラスター (紫色の線) にグループ化されます。

ビューポートでレイアウト シフトの原因となった要素を強調表示するには、対応するひし形にカーソルを合わせます。

タイミング、スコア、要素、潜在的な原因を含む [概要] タブで、レイアウト シフトまたはシフトに関する詳細を表示するには、対応するひし形またはクラスターをクリックします。

詳細については、「MDN での 累積レイアウト シフト (CLS)」 を参照してください。

アニメーションを表示する

アニメーション トラックでアニメーションを表示します。アニメーションには、対応する CSS プロパティまたは要素 (transform や my-element など) として名前が付けられます。 合成されていないアニメーションは、右上隅に赤い三角形でマークされます。

アニメーションを選択すると、[ 概要 ] タブに、合成エラーの理由などの詳細が表示されます。

GPU アクティビティの表示

パフォーマンス ツールの GPU セクションで GPU アクティビティを表示します。

ラスター アクティビティの表示

[ スレッド プール] セクションでラスター アクティビティを表示します。

1 秒あたりのフレーム数 (FPS) を分析する

DevTools には、1 秒あたりのフレーム数を分析する方法が 2 つあります。

• [ フレーム] セクションを使用すると、特定のフレームにかかった時間を表示します。 後述の 「フレーム」セクションを参照してください。

• ページ実行時に FPS をリアルタイムで推定するには、 FPS メーター を使用します。 以下の「 FPS メーターを使用して 1 秒あたりのフレーム数をリアルタイムで表示する」を参照してください。

[フレーム] セクション

[ フレーム] セクションでは、特定のフレームにかかった時間を正確に示します。

フレームにカーソルを合わせると、ヒントに詳細が表示されます。

上の例は、フレームの上にマウス ポインターを置いたときのヒントを示しています。

[フレーム] セクションには、次の 4 種類のフレームを表示できます。

• アイドル フレーム (白)。 変更なし。

• フレーム (緑)。 期待どおりに時間内にレンダリングされます。

• 部分的に表示されたフレーム (黄色にまばらな幅の広い破線のパターン)。 Microsoft Edge は、少なくともいくつかの視覚的な更新を時間内にレンダリングするために最善を尽くしました。 たとえば、レンダラー プロセスのメイン スレッドの作業 (キャンバス アニメーション) は遅れているが、コンポジター スレッド (スクロール) は時間内に収まっている場合です。

• フレームがドロップされました (赤で濃い実線模様)。 Microsoft Edge では、適切な時間内にフレームをレンダリングできません。

フレームをクリックすると、[パフォーマンス] ツールの下部にある [概要] タブにフレームに関する詳細情報が表示されます。 DevTools は、選択したフレームの輪郭を青で示します。

ネットワーク要求の表示

[ ネットワーク ] セクションを展開すると、記録中に発生したネットワーク要求のウォーターフォールが表示されます。

要求をクリックすると、[ 概要] タブで詳細が表示されます。

[ ネットワーク ] セクションの要求は、次のように色分けされています。

• 青い背景: HTML 要求。
• 紫色の背景: CSS 要求。
• 濃い黄色の背景: JS 要求。
• 緑の背景: 画像要求。

要求の左上隅には、次の四角形があります。

• 要求の左上にある濃い青色の四角形は、優先度の高い要求であることを意味します。
• 明るい青色の四角形は、優先度が低いことを意味します。

たとえば、上の図では、[ネットワーク] セクションの左上隅にあるフォト ギャラリー要求の優先度が高くなります。

要求の左右に線があり、それらのバーが 2 つの色に分割される場合があります。 これらの線と色は以下を表しています。

• 左側の行は、イベントの Connection Start グループまでのすべてです。 言い換えれば、それは Request Sent以前のすべてであり、排他的です。

• バーの明るい部分は、サーバー応答用にRequest SentWaiting (TTFB)です。

• バーの暗い部分は Content Downloadです。

• 右側の行は、基本的にメイン スレッドの待機に費やされた時間です。 これは、[ タイミング] タブには表示されません。

メモリ メトリックの表示

パフォーマンス記録にメモリ メトリックを表示するには、[ メモリ] チェック ボックスをオンにします。

DevTools は、[概要] タブの上にメモリ グラフを表示します。NET グラフの下には、HEAP と呼ばれるグラフもあります。 ヒープ チャートは、メモリ チャートの JS ヒープ線と同じ情報を提供します。

グラフ上の色付きの線は、グラフの上の色付きのチェック ボックスにマップされます。 チェック ボックスをオフにすると、そのカテゴリがグラフから非表示になります。

グラフには、現在選択されている記録の領域のみが表示されます。 たとえば、前の図では、 メモリ グラフには、3600 ミリ秒前後から 6200 ミリ秒前後のメモリ使用量しか表示されていません。

関連項目:

• メモリ リークを視覚化する (パフォーマンス ツール: [メモリ] チェック ボックス)」を参照してください。

記録の一部の継続時間を表示する

[ネットワーク] や [メイン] などのセクションを分析するときに、特定のイベントにかかった時間をより正確に見積もる必要がある場合があります。 Shift キーを押したままクリックし、左右にドラッグして録音の一部を選択します。 選択範囲の下部に、DevTools にその部分にかかった時間が表示されます。

スクリーンショットを表示する

スクリーンショットを有効にする方法については、上記の「録画中にスクリーンショットをCaptureする」を参照してください。

記録中のその瞬間にページがどのように表示されたかを示すスクリーンショットを表示するには、[ 概要] の上にマウス ポインターを置きます。 概要は、CPU と NET のグラフを含むセクションです。

[ フレーム] セクションでフレームを選択してスクリーンショットを表示することもできます。 DevTools は、[ 概要 ] タブにスクリーンショットの小さいバージョンを表示します。

スクリーンショットを拡大するには、[ 概要 ] タブのサムネイルをクリックします。

レイヤー情報の表示

フレームに関する高度なレイヤー情報を表示するには:

1. パフォーマンスツールで、[Capture settings] () ボタンをクリックし、[Enable advanced rendering instrumentation (slow)] チェックボックスを選択します。

2. [ フレーム] セクションで、フレームを選択します。 DevTools では、パフォーマンス ツールの下部にある [レイヤー] タブにレイヤーに関する情報が表示されます。

   

[レイヤー] タブは、3D ビュー ツールの [複合レイヤー] タブと同じように機能します。 [ レイヤー] タブを操作する方法については、「 3D ビュー ツールを使用して Web ページ レイヤー、z-index、および DOM を移動する」を参照してください。

ペイント プロファイラーの表示

ペイント イベントに関する詳細情報を表示するには:

1. パフォーマンスツールで、[Capture settings] () ボタンをクリックし、[Enable advanced rendering instrumentation (slow)] チェックボックスを選択します。

2. [メイン] セクションでペイント イベントを選択します。 DevTools は、[ ペイント プロファイラー ] タブにペイント イベントに関する情報を表示します。

   

CSS セレクター統計を表示する

パフォーマンスの記録中に再計算された CSS ルールのセレクターに関する統計情報を表示するには:

• パフォーマンスツールで、[Capture settings] () ボタンをクリックし、[Enable advanced rendering instrumentation (slow)] チェックボックスを選択します。

  DevTools では、[ セレクター 統計] タブの記録中に再計算された CSS ルールのセレクターに関する集計情報が表示されます。

  

1. [メイン] セクションで、[スタイルの再計算] イベントを選択します。 [ セレクター統計 ] タブで、DevTools には、そのイベント中に再計算された CSS ルールのセレクターに関する情報が表示されます。

関連項目:

• スタイルの再計算イベント中の CSS セレクターのパフォーマンスを分析する

ウィンドウ、iframe、専用ワーカー間のメッセージを表示する

DevTools 実験 [パフォーマンス] パネル: show postMessage dispatch and handling flows により、パフォーマンス ツールの Main セクションが改善され、postMessage メソッドによってトリガーされるイベントとパフォーマンス ツールに表示される他のイベントが区別され、postMessage イベントとハンドラーをすばやく識別できます。 この実験は、アプリケーションのさまざまなスレッドにわたるメッセージの投稿に関連するパフォーマンスの問題を調査するのに役立ちます。

この実験を使用しない場合、アプリケーションのスレッド間でメッセージをディスパッチして処理することによってトリガーされるイベントは、汎用スクリプト関数呼び出しイベントとして表示されます。 この実験を有効にした場合:

• postMessage ディスパッチ イベントは Schedule postMessage として表示されます。
• postMessage ハンドラー イベントは 、On Message として表示されます。

この実験は、 postMessage 呼び出しがいつ発生したか、および postMessage ハンドラーが開始される前にメッセージがキューに入れられた時間を調べるのに役立ちます。 ディスパッチ イベントは、いずれかのタイプのイベントをクリックしたときに表示されるイニシエーター矢印によってハンドラー イベントにリンクされます。

この機能を使用するには、DevTools で [ DevTools のカスタマイズと制御 ] ) >設定>実験] を選択し、 [パフォーマンス パネル: postMessage のディスパッチと処理フローを表示する] をクリックし、[ 閉じる (X)] ボタンをクリックし、[ DevTools の再読み込み ] ボタンをクリックします。

関連項目:

• パフォーマンス記録イベント リファレンス
• postMessage トレース イベントのデモ (レンダリング済み)
• postMessage Trace Events デモ (ソース コード)

WebSocket メッセージの表示

WebSocket アクティビティは、JavaScript アクティビティと WebSocket メッセージを関連付けるのに役立つように、パフォーマンス ツールのネットワーク トラックに表示されます。 これは、待機時間の問題がクライアントによるメッセージの解析から生じているのか、サーバーの応答から生じているのかを特定するのに役立ちます。

パフォーマンス ツールで WebSocket メッセージを表示するには、次の手順を実行します。

1. 新しいウィンドウまたはタブで、 簡易チャット アプリなどの WebSocket メッセージを送信する Web ページに移動します。

2. Web ページを右クリックし、[ 検査] を選択します。

   DevTools が開きます。

3. アクティビティ バーで、[パフォーマンス] ) ツールを選択します。

4. パフォーマンス ツールの左上にある [録画] ) ボタンをクリックします。

5. チャット Web ページの [ ユーザー名 ] テキスト ボックスに、"John など" などの名前を入力し、[ 接続 ] ボタンをクリックします。

   チャット フォームの下部に、「John:v8g...接続されています。"

6. [ メッセージの送信] テキスト ボックスに、「こんにちは」などのメッセージを入力し、[ 送信] ボタンをクリックします。

   チャット アプリでは、"こんにちは" などのメッセージが表示されます。

   

   WebSocket トラフィックが生成されます。

7. パフォーマンス ツールの左上にある [停止] ) ボタンをクリックします。

   または、 パフォーマンス ツールの中央にある [ 停止 ] ボタンをクリックします。

   パフォーマンス ツールで、タイムラインが表示されます。

8. ネットワーク トラックを展開します。

9. 金色の縦線をクリックします。

10. パフォーマンス ツールの下部にある [概要] タブに、選択した WebSocket メッセージに関する次のような情報が表示されます。

    • WebSocket ハンドシェイクを送信する
    • WebSocket ハンドシェイクを受信する
    • WebSocket メッセージを受信します:

    

関連項目:

• ネットワーク機能リファレンスで WebSocket 接続のメッセージを分析します。
• 上記のイベント イニシエーターを追跡します。
• ランタイム パフォーマンスの分析 (チュートリアル)

レンダリング ツールを使用してレンダリング パフォーマンスを分析する

レンダリング ツールを使用して、ページのレンダリング パフォーマンスを視覚化します。 レンダリング ツールはクイック ビュー ツールです。コマンド メニューから開くと、DevTools の下部に開きます。

レンダリング ツールを開くには:

1. 新しいウィンドウまたはタブで、遅 いアニメーションなどの Web ページを開きます。

2. Web ページを右クリックし、[ 検査] を選択します。

   DevTools が開きます。

3. クイック ビュー パネルが表示されない場合は、[DevTools のカスタマイズと制御] ) >クイック ビュー パネルの切り替え) を選択します。

   または、 Esc キーを押します。

4. クイック ビュー ツール バーで、[その他のツール] ) ボタンをクリックし、[レンダリング] を選択します。

   レンダリング ツールがクイック ビュー パネルで開きます。

   

関連項目:

• 表示オプションや視覚障穣が異なる Web ページの外観を確認するためのレンダリング ツール

FPS メーターを使用して 1 秒あたりのフレーム数をリアルタイムで表示する

FPS メーターは、レンダリングされた Web ページの左上隅に表示されるオーバーレイです。 ページ実行時の FPS のリアルタイム推定が提供されます。 FPS メーターを開くには:

1. レンダリング ツールを開きます。 上記の 「レンダリング ツールを使用したレンダリング パフォーマンスの分析」を参照してください。

2. [ Frame Rendering Stats ] チェックボックスをオンにします。 レンダリングされた Web ページに FPS メーター オーバーレイが表示されます。

   

ペイント点滅を使用してリアルタイムでペイント イベントを表示する

ペイント点滅を使用して、ページ上のすべてのペイント イベントをリアルタイムで表示します。 ページの一部が再描画されるたびに、DevTools はそのセクションのアウトラインを緑色で示します。

ペイントの点滅をオンにするには:

1. レンダリング ツールを開きます。 上記の 「レンダリング ツールを使用したレンダリング パフォーマンスの分析」を参照してください。

2. [ 点滅ペイント ] チェックボックスを選択します。 レンダリングされた Web ページに緑色のアウトラインが表示されます。

   

レイヤー罫線を使用してレイヤーのオーバーレイを表示する

ページの上部にレイヤーの境界線とタイルのオーバーレイを表示するには:

1. 上記の「レンダリング ツールを使用したレンダリング パフォーマンスの分析」で説明したように、レンダリング ツールを開きます。

2. 「 レイヤー境界 線」チェックボックスを選択します。 レンダリングされた Web ページにレイヤーの境界線が表示されます。

   

色分けの説明については、 debug_colors.cc のコメントを参照してください。

スクロール パフォーマンスの問題をリアルタイムで検出する

[ スクロール パフォーマンスの問題] チェック ボックスを使用して、ページのパフォーマンスに悪影響を与える可能性があるスクロールに関連するイベント リスナーを持つページ内の要素を識別します。 DevTools では、問題となる可能性のある要素の概要をティール語で示します。

スクロール パフォーマンスの問題を表示するには:

1. 上記の「レンダリング ツールを使用したレンダリング パフォーマンスの分析」で説明したように、レンダリング ツールを開きます。

2. [ スクロール パフォーマンスの問題 ] チェック ボックスをオンにします。 潜在的に問題となる要素を概説します。

   

関連項目:

• 3D ビュー ツールを使用して、Web ページ レイヤー、z-index、および DOM を移動する [慢速スクロールの四角形] (チェック ボックス) をオンにします。

ローカル フォントを無効にする

レンダリング ツールで、[ローカル フォントを無効にする] チェック ボックスを使用して、@font-face ルールに欠落しているlocal() ソースをエミュレートします。

たとえば、 ルービック フォントがデバイスにインストールされていて、 @font-face src ルールで local() フォントとして使用されている場合、Microsoft Edge はデバイスのローカル フォント ファイルを使用します。

[ ローカル フォントを無効にする] が選択されている場合、DevTools は local() フォントを無視し、各フォントをネットワークから取得します。

この機能は、次のような開発時に同じフォントの 2 つの異なるコピーを使用する場合に便利です。

• デザイン ツールのローカル フォント。
• コード用の Web フォント。

[ ローカル フォントを無効にする] を使用して、以下を簡単に行えます。

• Web フォントの読み込みパフォーマンスと最適化をデバッグして測定します。
• CSS @font-face ルールの正確性を確認します。
• デバイスにインストールされているローカル バージョンと Web フォントの違いを確認します。

メモリ リークを視覚化する (パフォーマンス ツール: [メモリ] チェック ボックス)

Web ページのメモリ使用量を調査する開始点として、 パフォーマンス ツールの [メモリ] チェックボックスを使用します。 (または、 メモリ使用状況をリアルタイムで監視する (ブラウザー タスク マネージャー)。)

パフォーマンス ツールを使用すると、時間の経過に伴うページのメモリ使用量を視覚化できます。

1. DevTools で、 パフォーマンス ツールを開きます。

2. [ メモリ] チェック ボックスをオンにします。

3. 上記の レコード パフォーマンスごとに録音を行います。

強制的なガベージ コレクションを使用して記録の開始と終了を行うことをお勧めします。 ガベージ コレクションを強制するには、記録中にガベージ コレクションの収集 強制ガをクリックします。

メモリの記録を示すために、次のコードを考えてみましょう。

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

コードで参照されているボタンがクリックされるたびに、10,000 個の div ノードがドキュメント本文に追加され、1,000,000 x 文字の文字列が x 配列にプッシュされます。 前のコードを実行すると、 パフォーマンス ツールに記録が作成されます。

まず、ユーザー インターフェイスについて説明します。 概要ウィンドウのヒープ グラフ (NET の下) は、JS ヒープを表します。 [概要] ウィンドウの下には、[カウンター] ウィンドウがあります。 メモリ使用量は、JS ヒープ (概要ウィンドウのヒープ グラフと同じ)、ドキュメント、DOM ノード、リスナー、および GPU メモリによって分類されます。 チェック ボックスをオフにしてグラフから非表示にします。

ここで、前の図と比較したコードの分析。 ノード カウンター (緑色のグラフ) を確認すると、コードと完全に一致しています。 ノード数は、個々のステップで増加します。 ノード数が増加するたびに grow() の呼び出しであると想定できます。

JS ヒープ グラフ (青いグラフ) は、それほど単純ではありません。 ベスト プラクティスに従って、最初のディップは実際には強制ガベージ コレクションです (ガベージ コレクションの強制ガ ボタンをクリックします)。

記録が進むにつれて、JS ヒープ サイズのスパイクが表示されます。 JavaScript コードはクリックするすべてのボタンに DOM ノードを作成し、100 万文字の文字列を作成するときに多くの作業を行います。

ここで重要なのは、JSヒープが開始よりも高く終了するという事実です(ここでの「始まり」は強制ガベージコレクション後のポイントです)。 実際の世界で、JS ヒープ サイズまたはノード サイズが増加するこのパターンを見た場合は、メモリ リークを示している可能性があります。

関連項目:

• 上記のメモリ メトリックをご覧ください。

注:

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

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