JavaScript ランタイムの高速化

高価な関数を識別するには、 メモリ ツールを使用します。

サンプルプロファイル

サンプリングプロファイルを記録する

JavaScript で jank (レンダリングの中断) が発生した場合は、サンプリングプロファイルを収集します。サンプリングプロファイルは、ページ内の関数に実行時間が費やされている場所を示します。

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

記録を完了すると、DevTools によって[サンプリングプロファイル] の下の [メモリ] パネルに、記録のデータが自動的に設定されます。

既定のビューは Heavy (ボトムアップ) です。このビューを使用すると、パフォーマンスに最も影響を与えた関数を確認し、各関数の要求パスを調べることができます。

並べ替え順序を変更するには、フォーカス選択関数 (フォーカス選択関数) アイコンの横にあるドロップダウンメニューを選択し、次のいずれかのオプションを選択します。

グラフ。記録の時系列グラフを表示します。

炎グラフ

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

重いグラフ

ツリー (上から下へ)。呼び出し履歴の先頭から始まる呼び出し構造の全体像を示します。

ツリーグラフ

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

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

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

サンプリングプロファイルを記録した後、並べ替え順序を [グラフ] に変更して、記録を炎のグラフとして表示します。

炎グラフビュー

炎グラフは、次の 2 つの部分に分割されます。

index	パーツ	説明
1	概要	記録全体の鳥瞰図。バーの高さは、呼び出し履歴の深さに対応します。そのため、バーが大きいほど、呼び出し履歴が深くなります。
2	呼び出し履歴	これは、記録中に呼び出された関数の詳細なビューです。横軸は時間、縦軸は呼び出し履歴です。スタックはトップダウンで編成されます。そのため、上の関数は、その下の関数を呼び出しました。

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

注釈付き炎グラフ

高い呼び出し履歴は必ずしも重要ではありません。これは、多くの関数が呼び出されたことを意味する可能性があります。ただし、ワイドバーは、関数の完了に長い時間がかかったことを意味するため、これらは最適化の候補です。

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

ズームされたグラフ

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

関数にカーソルを合わせると、名前とタイミングデータが表示されます。

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

プロファイルチャートで関数の詳細を表示する

注:

このページの一部は、 Google によって作成および共有され、クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。元のページはここにあり、ケイス・バスク (テクニカルライター、Chrome DevTools & Lighthouse)、メギン・カーニー (テクニカルライター)によって作成されています。