JavaScript ランタイムを高速化する (プロファイリングの種類の "割り当てサンプリング")

コストの高い関数を識別するには、 メモリ ツールを使用します。

メモリ ツールの割り当てサンプリングを使用して、呼び出された関数とそれぞれに必要なメモリ量を正確に記録します。

プロファイルをフレーム チャートとして視覚化します。

"Allocation sampling" プロファイリングの種類を使用して、JavaScript 関数によるメモリ割り当てを表示します

JavaScript でジャンク (レンダリングの中断) が発生した場合は、 割り当てサンプリング プロファイリングの種類を使用して、メモリ割り当てサンプリング プロファイルを収集します。 サンプリング プロファイルは、どの関数が最も多くのメモリを割り当てたかを示します。

割り当てサンプリング プロファイリングの種類を使用して、JavaScript 関数によるメモリ割り当てを表示するには:

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

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

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

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

   

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

4. [ 割り当てサンプリング ] オプション ボタンを選択します。

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

5. [ JavaScript VM インスタンスの選択 ] セクションで、ページにワーカーがいる場合は、そのワーカーをプロファイリング ターゲットとして選択できます。

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

7. Web ページを操作します。 たとえば、デモ Web ページで [ 高速トラフィック ] ボタンをクリックし、次に [停止 ] ボタンをクリックします。

   分析対象に応じて、ページを更新したり、ページを操作したり、単にページを実行したままにしたりできます。

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

   または、 メモリ ツールの下部にある [停止 ] ボタンをクリックします。 [プロファイル] サイドバーの [サンプリング プロファイル] セクションに新しいプロファイルが追加されます。

   

   サンプリング プロファイルには、関数別のメモリ割り当ての内訳が表示されます。 既定のビューは [重い (ボトム アップ)] です。 以下のセクションに従って、 グラフ または ツリー (トップダウン) ビューに切り替えることができます。

また、コンソール ユーティリティ API を使用して、コマンド ラインからプロファイルを記録およびグループ化することもできます。

サンプリング プロファイルのビューを変更する

メモリ割り当てサンプリング プロファイルの並べ替え順序を変更するには、[ プロファイル ビュー モード] ドロップダウン リストを使用します。このリストには、最初は 「重い (ボトムアップ)」と表示されます。

Menuitems:

• Chart - 記録の時系列図。
• 重 (ボトム アップ) - アプリの呼び出しられた関数をメモリ割り当て順に一覧表示し、各関数の呼び出しパスを表示します。 既定のビューです。
• ツリー (上から下) - 呼び出し履歴の一番上から開始して呼び出し構造を表示します。

グラフ

グラフ ビュー モードでは、記録の時系列グラフが表示されます。

重 (ボトム アップ)

重 (ボトム アップ) ビュー モードでは、パフォーマンスへの影響別に関数が一覧表示され、関数への呼び出しパスを調べることができます。 これは既定のビューです。

木 (上から下)

ツリー (上から下) ビュー モードでは、呼び出し履歴の先頭から開始して、呼び出し構造の全体像が表示されます。

関数の除外

[ヘビー (ボトム アップ)] または [ツリー (上から下へ)] ([グラフ] ではない) が選択されている場合、行を選択するときに使用可能な (選択不可) いくつかのボタンがあります。

• 選択した機能のフォーカス (")
• 選択した関数の除外 ()
• Restore all functions ()

メモリ割り当てサンプリング プロファイルから関数を除外するには、サンプリング プロファイルを選択し、[ 選択した関数の除外] (選択した関数 を) ボタンをクリックします。 除外された関数 (子) の要求関数 (親) には、除外された関数 (子) に割り当てられたメモリが割り当てられます。

[ すべての関数の復元 ] () ボタンをクリックして、除外されたすべての関数を記録に復元します。

メモリ割り当てサンプリング プロファイルをグラフとして表示する

グラフ ビューには 、時間の経過に伴うサンプリング プロファイルが視覚的に表示されます。

メモリ割り当てサンプリング プロファイルを記録した後、記録をフレーム グラフとして表示します。 [プロファイル ビュー モード] ドロップダウン リストで [グラフ] を選択します (最初は [ヘビー (ボトム アップ)] と表示されています)。

フレーム グラフは 2 つの部分に分かれています。

index	指定項目	説明
1	概要	レコーディング全体の俯瞰図。 バーの高さは、コールスタックの深さに対応します。 したがって、バーが高いほど、コールスタックが深くなります。
2	コール スタック	これは、記録中に呼び出された関数の詳細ビューです。 横軸は時間、縦軸はコール スタックです。 スタックはトップダウンで編成されます。 それで、一番上の関数が下の関数を呼び出した、など。

関数はランダムに色付けされます。 他のパネルで使用されている色との相関関係はありません。 ただし、各ランタイムでパターンを観察できるように、関数は呼び出し間で常に同じ色付けになります。

tall コール スタックは必ずしも重要ではありません。これは、単に多くの関数が呼び出されたことを意味するかもしれません。 ただし、バーが広いということは、関数の完了に時間がかかったことを意味するため、これらは最適化の候補となります。

録画の特定の部分を拡大する

コールスタックの特定の部分を拡大するには、概要をクリックして左右にドラッグします。 ズームすると、コール スタックには、選択した録音部分が自動的に表示されます。

関数の詳細を表示する

関数をクリックすると、[ ソース] ツールで表示できます。

関数にマウス ポインターを置くと、名前とタイミングのデータが表示されます。

詳細	説明
名前	関数名を指定します。
セルフ サイズ	関数内のステートメントのみを含む、関数の現在の呼び出しのサイズ。
合計サイズ	この関数の現在の呼び出しと、呼び出されたすべての関数のサイズ。
URL	base.js:261 形式の関数定義の場所。base.js は関数が定義されているファイルの名前、261 は定義の行番号です。

ガベージを減らしてメモリの割り当てを調査する ([オブジェクトを含める] チェックボックス)

既定では、 割り当てサンプリング プロファイリングの種類は、記録セッションの終了時にまだ有効な割り当てのみを報告します。 作成、削除されたオブジェクト、およびガベージ コレクション (GC) されたオブジェクトは、割り当てサンプリングまたはタイムラインでの割り当てプロファイリング タイプを使用してプロファイリングする場合、メモリ ツールに表示されません。

ブラウザーを信頼して、コードからゴミをクリーンアップできます。 ただし、GC 自体はコストのかかる操作であり、複数の GC があると、Web サイトまたはアプリでのユーザー エクスペリエンスが低下する可能性があることを考慮することが重要です。 [メモリ] チェックボックスをオンにしてパフォーマンス ツールで記録すると、ヒープ チャートの急な崖 (急減少) で GC 操作が発生することがわかります。

コードが作成するガベージの量を減らすことで、個々の GC のコストと GC 操作の数を減らすことができます。

GC によって破棄されたオブジェクトを追跡する

ガベージ コレクションによって破棄されたオブジェクトを追跡するには、次の手順を実行します。

1. メモリ ツールで、[割り当てサンプリング] オプション ボタンを選択します。

2. [ メジャー GC によって破棄されたオブジェクトを含める ] と [マイナー GC 設定によって破棄されたオブジェクトを含める ] をクリックします。

   

3. [スタート] ボタンをクリックします。

4. Web ページで、調査するアクションを実行します。

5. すべての操作が完了したら、[ 停止 ] ボタンをクリックします。

DevTools では、記録中にガベージ コレクション (GC'd) されたすべてのオブジェクトが追跡されるようになりました。 これらの設定を使用して、Web サイトまたはアプリが生成しているガベージの量を把握します。 割り当てサンプリングによって報告されるデータは、最も多くのガベージを生成している関数を特定するのに役立ちます。

特定のメジャーまたはマイナーな GC 操作中にのみ GC 処理されたオブジェクトを調査する場合は、関心のある操作を追跡するように適切に設定を構成します。 メジャー GC とマイナー GC の違いの詳細については、「 ゴミ箱トーク: Orinoco ガベージ コレクター |V8 JavaScript エンジン開発者ブログ。

注:

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

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