Chrome DevTools Performanceタブの関数呼出フレームグラフの色の意味

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの開発者、特にChrome DevToolsのPerformanceタブを利用してパフォーマンス分析を行いたい方を対象としています。この記事を読むことで、Chrome DevToolsのPerformanceタブに表示される関数呼出フレームグラフにおいて、各関数が異なる色で表示される理由と、各色が何を表しているのかを理解できます。これにより、パフォーマンスボトルネックの特定がより直感的に行えるようになり、開発効率の向上に繋がります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識 - Chrome DevToolsの基本的な使い方（特にタブの切り替えなど） - Webアプリケーションのパフォーマンス分析に関する基本的な概念

Performanceタブとフレームグラフ概説

Chrome DevToolsのPerformanceタブは、Webページのパフォーマンスを分析するための強力なツールです。このタブを使用すると、ページの読み込み、実行、レンダリングなどの各プロセスを詳細に記録・分析できます。その中でも、関数呼出フレームグラフは、JavaScriptの実行フローを視覚的に表現したもので、関数の呼び出し関係と実行時間をグラフ上で確認できます。

このフレームグラフでは、各関数が異なる色で表示されますが、これらの色は単なる見た目の装飾ではなく、関数の種類や実行状況を表す重要な情報です。色のパターンを理解することで、パフォーマンスの問題箇所を素早く特定し、最適化の対象を絞り込むことが可能になります。

各色が表す意味と具体的な例

ステップ1: 基本的な色の分類

Chrome DevToolsのPerformanceタブにおける関数呼出フレームグラフの色は、主に以下のカテゴリに分類されます。

青色系: ネイティブコードやブラウザが直接実行する処理
緑色系: ユーザー定義のJavaScript関数
黄色系: イベントリスナーの実行
赤色系: レンダリングや描画関連の処理
紫色系: 非同期処理（PromiseやsetTimeoutなど）

これらの色は、関数の種類や実行コンテキストによって自動的に割り当てられます。

ステップ2: 各色の詳細な意味

青色系（ネイティブコード）

青色は、主にブラウザエンジン（V8など）が直接実行するネイティブコードを表します。これは、JavaScriptエンジン内部の処理や、Web APIの呼び出しが含まれます。例えば、DOM操作や数学計算などの低レベルな処理が青色で表示されます。

青色のブロックが大きい場合、JavaScriptエンジン内部での処理に時間がかかっている可能性があり、最適化の余地があるかどうかを検討する必要があります。

緑色系（ユーザー定義関数）

緑色は、開発者が定義したJavaScript関数を表します。これは、自分で書いたコードの実行時間を視覚化するために最も重要な色です。緑色のブロックが大きいほど、その関数の実行に時間がかかっていることを示しており、パフォーマンスボトルネックの候補となります。

例えば、以下のようなコードがあった場合：

Javascript

function processData(data) {
  // データ処理ロジック
  let result = [];
  for (let i = 0; i < data.length; i++) {
    result.push(transform(data[i]));
  }
  return result;
}

function transform(item) {
  // 変換処理
  return item * 2;
}

// 使用例
const largeData = Array(100000).fill().map((_, i) => i);
processData(largeData);

この場合、processData関数とtransform関数は緑色で表示され、これらの関数の実行時間を確認できます。

黄色系（イベントリスナー）

黄色は、イベントリスナーの実行を表します。クリック、スクロール、リサイズなどのユーザーインタラクションや、タイマーイベントなどのイベントハンドラが黄色で表示されます。

黄色のブロックが頻繁に表示される場合、イベント処理に時間がかかっている可能性があり、イベントデバウンスやスロットリングなどの最適化を検討する必要があります。

赤色系（レンダリング関連）

赤色は、レイアウト（リフロー）や描画（リペイント）などのレンダリング処理を表します。DOMの変更やスタイルの変更が原因で発生する処理です。

赤色のブロックが表示される場合、ページの再描画が発生しており、これがパフォーマンスの問題を引き起こしている可能性があります。DOM操作の最適化や、アニメーションのためのCSSプロパティの見直しなどが必要です。

紫色系（非同期処理）

紫色は、非同期処理を表します。Promise、setTimeout、setInterval、fetch APIなどの非同期処理が紫色で表示されます。

紫色のブロックは、メインスレッドをブロックせずに実行される処理であることを示しています。非同期処理の実行時間や、Promiseチェーンのフローを確認するために重要です。

ステップ3: 実際のプロファイルでの色の読み方

実際にPerformanceタブを使用してプロファイルを取得した場合、以下の手順で色の情報を活用します。

記録開始: Performanceタブで記録を開始し、分析したい操作を実行
記録停止: 記録を停止し、フレームグラフを確認
色の分析: 各色のブロックを確認し、どの処理に時間がかかっているか把握
詳細調査: 特に時間がかかっているブロックをクリックし、詳細情報を確認

例えば、ページのスクロールパフォーマンスを分析する場合、スクロール操作中に黄色（イベントリスナー）や赤色（レンダリング）のブロックが頻繁に表示されるか確認します。これらが頻繁に表示される場合、スクロール操作の最適化が必要です。

また、大量のデータを処理する場合、緑色（ユーザー定義関数）のブロックが大きくなる傾向にあり、処理ロジックの最適化が必要です。

まとめ

本記事では、Chrome DevToolsのPerformanceタブにおける関数呼出フレームグラフの各色が何を表しているのかを解説しました。

青色: ネイティブコードやブラウザが直接実行する処理
緑色: ユーザー定義のJavaScript関数
黄色: イベントリスナーの実行
赤色: レンダリングや描画関連の処理
紫色: 非同期処理

この記事を通して、Performanceタブのフレームグラフをより効果的に活用し、パフォーマンス問題の特定と解決ができるようになったかと思います。今後は、特定の最適化テクニックについても記事にする予定です。

Chrome DevTools Performanceタブの関数呼出フレームグラフの色の意味🔍