7.1 パフォーマンス記録・分析

Performanceパネルの概要

Performanceパネルでは、一定時間のブラウザの動作を記録し、何が起きているかを詳細に分析できる。

パネルを開く

• F12 → Performanceタブ
• Ctrl+Shift+E（記録開始のショートカット）

主な用途

記録の開始

手動記録

ページ読み込みの記録

記録オプション

歯車アイコンで設定可能。

パネルの構成

記録後、以下のセクションが表示される。

Overview（概要）

上部のグラフ。全体の傾向を把握できる。

• FPS（緑）: フレームレート。高いほど良い。赤いバーはフレーム落ち
• CPU（色分け）: CPU使用率。色は処理の種類を示す
• NET: ネットワークリクエストのタイミング
• Screenshots: 画面の変化（有効時）

Flame Chart（フレームチャート）

中央のメインセクション。処理の詳細を時系列で表示。

• Network: ネットワークリクエスト
• Frames: 各フレームのレンダリング
• Timings: マーカー（DCL、FP、FCP、LCP等）
• Main: メインスレッドの処理
• Compositor: コンポジタースレッド
• Raster: ラスタライズスレッド
• GPU: GPU処理

Details（詳細）

下部のパネル。選択した項目の詳細情報を表示。

Flame Chartの読み方

色の意味

縦方向の構造

Flame Chartは上から下へコールスタックを表現。上の処理が下の処理を呼び出している。

横方向の構造

時間軸。バーの幅が処理時間を表す。幅が広いほど時間がかかっている。

ナビゲーション

• ズーム: マウスホイール、またはOverviewで範囲選択
• パン: ドラッグ、または矢印キー
• 選択: クリックで詳細表示
• W/A/S/D: ズームイン/左/ズームアウト/右

重要なタイミングマーカー

Timingsトラックに表示される主要な指標。

ボトルネックの特定

Long Tasks（長いタスク）

50ms以上かかるタスクは「Long Task」として赤いフラグで表示される。メインスレッドをブロックし、UIのレスポンスを低下させる。

レイアウトスラッシング

Layout（紫）が頻繁に発生している場合、強制同期レイアウトが起きている可能性がある。

// 悪い例：レイアウトスラッシング
for (let i = 0; i < elements.length; i++) {
  // offsetWidthの読み取りでレイアウト強制
  const width = elements[i].offsetWidth;
  // styleの書き込みでレイアウト無効化
  elements[i].style.width = width + 10 + 'px';
}

// 良い例：読み取りと書き込みを分離
const widths = elements.map(el => el.offsetWidth);
elements.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});

フレーム落ち

FPSグラフの赤いバーはフレーム落ちを示す。60fpsを維持するには、各フレームの処理を16.67ms以内に収める必要がある。

JavaScript実行時間

黄色のバーが広い場合、JavaScriptの実行に時間がかかっている。Mainトラックをクリックして、どの関数が原因かを特定する。

Summaryタブ

記録全体または選択範囲の統計を表示。

カテゴリ別の時間

Bottom-Up / Call Tree / Event Log

詳細パネルのタブで異なる視点から分析できる。

Bottom-Up

最も時間がかかった処理から順に表示。「どの処理が重いか」を素早く把握できる。

• Self Time: その関数自身の実行時間
• Total Time: 子関数を含めた合計時間

Call Tree

コールスタックをツリー形式で表示。「なぜその処理が呼ばれたか」を追跡できる。

Event Log

イベントを時系列で一覧表示。フィルタで特定の種類のイベントだけ表示可能。

分析のTips

シークレットモードで計測

拡張機能の影響を排除するため、シークレットモードでテスト。

複数回計測

結果はばらつくため、複数回計測して傾向を把握する。

CPU throttlingを使用

開発マシンは高性能なことが多い。4x〜6x slowdownで実際のユーザー環境に近づける。

記録を保存・共有

記録を右クリック → Save profileでJSON形式で保存。Load profileで読み込み可能。チームでの共有やバグレポートに活用。

console.time()との連携

コード内でconsole.time()を使用すると、Timingsトラックにマーカーが表示される。特定の処理区間を計測するのに便利。

console.time('データ処理');
// ... 処理 ...
console.timeEnd('データ処理');