JS Profiler は廃止され、[パフォーマンス] パネルで CPU をプロファイリングする

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

[JavaScript Profiler] パネルは Chrome 124 で廃止されます。今後、Node.js の CPU パフォーマンスのプロファイリングには [Performance] パネルを使用します。

JavaScript プロファイラが非推奨になるのはなぜですか？（JS プロファイラ）

Chrome 58 以降、DevTools チームは JS プロファイラのサポートを段階的に終了することを計画していました。理由は次のとおりです。

  • 現在、開発は行われていません。JS プロファイラは数年間にわたってメジャー アップデートされておらず、チームにはプロファイラの開発を継続するためのリソースがありません。
  • プロファイリングの効率化。[Performance] パネルはすでに、あらゆる種類のパフォーマンス分析に使用されています。Node.js で JavaScript の CPU パフォーマンスをプロファイリングする機能があるため、一貫性と効率性のためにすべてを 1 か所に集約するのが合理的です。
  • パフォーマンス パネルが改善されました。Google は、新機能や機能強化を追加することで、パフォーマンス分析のためのより強力で使いやすいツールにするために、引き続き改善を続けています。

非推奨になった後はどうすればよいですか？

JavaScript CPU パフォーマンスをプロファイリングする方法について詳しくは、Node.js のパフォーマンスをプロファイリングするをご覧ください。

[パフォーマンス] パネルを使用する際のヒントは次のとおりです。

  • 炎グラフを使用して、パフォーマンスのボトルネックを特定します。

フレームグラフ。

  • [ボトムアップ] タブと [呼び出しツリー] タブを使用して、関数間の関係を把握します。

[ボトムアップ] タブ。

[呼び出しツリー] タブ。

非推奨への対応方法

Google はプロトタイプを開発し、コメントのリクエスト（RFC）を GitHub で公開してデベロッパーにフィードバックを求めました。

さらに、プロトタイプをテストするためにデベロッパー エキスパートに積極的に連絡し、懸念や問題に対処して、[パフォーマンス] パネルがコアなプロファイリングのニーズを満たしていることを確認しています。

デベロッパーが十分な時間を確保して調整と導入を行えるように、JS Profiler は 4 つのステージで段階的に廃止されます。

主な問題とその解決方法

寄せられたフィードバックの中で、最も切迫した懸念は次の 3 つの主な問題に集中していました。

  • .cpuprofile ファイル形式のサポート。JS プロファイラは別のファイル形式を使用します。[パフォーマンス] パネルでサポートされているはずです。
  • 読み込み速度が遅い。パネルの読み込み速度が遅く、プロファイリング プロセスに支障をきたしている。
  • JavaScript VM セレクタがない。JavaScript VM インスタンス セレクタがないため、特定のシナリオでプロファイリング機能が制限されていました。

これらの問題とその解決方法について、詳しく見ていきましょう。

読み込み速度が遅い

デベロッパーから、[パフォーマンス] パネルで大規模なデータファイルを読み込むのに時間がかかり、クラッシュすることもあったという報告がありました。

私たちは DevTools を使用して DevTools を分析しました（「DevTools-on-DevTools」と呼んでいます）。問題が見つかったため、いくつかの最適化を行いました。

  • Set を Array データ構造に置き換えました。
  • 不要な Map データ構造を削除しました。
  • メモリスタックの使用量を削減するために、再帰関数を反復関数（ループ向け）にリファクタリングしました。

これらのボトルネックを解消することで、大きなファイルの読み込みが 80% 高速化しました。🎉

得られた知見について詳しくは、perf-ception によるパフォーマンス パネルの 400% の高速化をご覧ください。

不足している JavaScript VM セレクタ

最初のプロトタイプには JavaScript VM セレクタがありませんでした。デベロッパーは、ドリルダウンして特定の VM インスタンスの分析に集中できます。

[パフォーマンス] パネルに JavaScript VM セレクタが追加されました。使用可能なすべての JavaScript VM インスタンスのプルダウン リストが表示されます。インスタンスを選択すると、[パフォーマンス] パネルにそのインスタンスの CPU プロファイルが読み込まれます。

[呼び出しツリー] タブ。

cpuprofile ファイル形式のサポート

以前は、[パフォーマンス] パネルでサポートされていたのは、トレース イベントの配列を含む JSON ファイルであるトレース ファイルのみでした。

一方、JS Profiler は CPU プロファイルをサポートしていました。これは、JSON オブジェクトを含む .cpuprofile 拡張子のファイルです。次のような行です。

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

新しいワークフローによって、デベロッパーが既存の cpuprofile を分析する妨げにならないようにする必要があります。そのため、[パフォーマンス] パネルでトレース ファイルと CPU プロファイルの両方がサポートされるようになりました。cpuprofile ファイルを [パフォーマンス] にインポートすると、正しく読み込まれます。

バックグラウンドで正規表現を使用して、物体の構造の違いを検出します。ファイルの内容が {"nodes":[ で始まる場合は、CPU プロファイルです。それ以外の場合は、トレース ファイルです。

コンテンツの種類が特定されると、それに応じて処理されます。トレースファイルの場合、イベントを解析してタイムラインを作成します。CPU プロファイルの場合、JSON オブジェクトを解析して炎グラフを作成します。

まとめ

ウェブサイトのプロファイリングと、Node.js アプリケーションと Deno アプリケーションの CPU パフォーマンスのプロファイリングの両方で、より効率的なプロファイリングを行うには、[パフォーマンス] パネルを使用します。

フィードバックや提案がございましたら、こちらのバグにコメントを追加するか、次のいずれかの方法でお問い合わせください。

プレビュー チャンネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、更新、その他のトピックについて話し合います。