4.3 Performance・Memory

Performanceパネル

ページのパフォーマンスを詳細に分析するツール。CPU使用率、レンダリング、スクリプト実行時間などを可視化する。

記録の開始

記録前の設定

• CPU throttling: CPUを低速化してモバイル環境をシミュレート
• Network throttling: 低速回線をシミュレート
• Disable JavaScript samples: 詳細なJSプロファイルを無効化（軽量化）
• Screenshots: 記録中のスクリーンショットを取得

パフォーマンス分析

タイムライン構成

Mainセクションの色分け

主要メトリクス

パフォーマンス改善のヒント

ボトルネックの特定

• 黄色（Script）が多い → JavaScript最適化が必要
• 紫（Rendering）が多い → レイアウトスラッシングの可能性
• 緑（Paint）が多い → 描画領域の最適化
• Long Taskがある → 50ms以上のタスクを分割

便利な機能

• Bottom-Up / Call Tree: 関数ごとの実行時間
• Event Log: イベントの時系列リスト
• Record時のCPU制限: 6x slowdownでモバイルをシミュレート

Memoryパネル

JavaScriptのメモリ使用状況を分析するツール。メモリリークの検出に有効。

プロファイリングの種類

Heap Snapshot

メモリ上のオブジェクトを詳細に分析できる。

ビューの種類

主要なカラム

• Shallow Size: オブジェクト自体のサイズ
• Retained Size: オブジェクトとその参照先を含む総サイズ
• Distance: GCルートからの距離

メモリリークの検出

検出手順

1. Heap snapshotを取得（操作前）
2. メモリリークが疑われる操作を実行
3. 「Collect garbage」ボタンでGCを強制実行
4. Heap snapshotを再取得（操作後）
5. Comparisonビューで差分を確認

よくあるメモリリークの原因

• イベントリスナーの未解除: removeEventListenerの忘れ
• タイマーの未クリア: setInterval/setTimeoutの未clear
• DOM参照の保持: 削除された要素への参照を保持
• クロージャ: 不要な変数をキャプチャ
• グローバル変数: 意図しないグローバル変数の作成

修正例

// NG: イベントリスナーが解除されない
element.addEventListener('click', handler);

// OK: 解除可能にする
const controller = new AbortController();
element.addEventListener('click', handler, { signal: controller.signal });
// 解除時
controller.abort();

Allocation Timeline

時間経過でのメモリ割り当てを可視化する。

• 青いバー: その時点で割り当てられたオブジェクト
• グレーのバー: GCで回収されたオブジェクト
• 残っている青いバー: 潜在的なメモリリーク