1. 導入：なぜパフォーマンスチューニングが必要なのか
モダンなWebアプリケーションにおいて、UIの「カクつき」や「反応の遅延」はユーザー体験を著しく損ないます。特にJavaScriptのメインスレッドで重い処理が走ると、ブラウザは描画更新ができなくなり、結果としてFPS（Frames Per Second）が低下します。本記事では、Chrome DevToolsの「Performance」タブを活用し、ボトルネックを正確に特定し解決するための実践的な手法を解説します。
2. 基礎知識：ブラウザの描画の仕組み
ブラウザは通常、1秒間に60回（60FPS）の画面更新を行います。1フレームあたり約16.6ms以内に「JavaScriptの実行」「スタイル計算」「レイアウト」「描画」を完了させる必要があります。
Main ThreadはJavaScriptの実行やイベントハンドリングを担う中心的なスレッドです。ここが長時間占有されると、画面描画が止まり、ユーザーは「重い」と感じます。Long Task（50ms以上続く処理）をいかに減らすかが、パフォーマンス改善の鍵となります。
3. 実装/解決策：プロファイリングの具体的な手順
以下の手順でボトルネックを特定します。
1. ChromeのDevToolsを開き「Performance」タブを選択します。
2. 左上の「録画」ボタン（丸いアイコン）を押します。
3. 対象の操作（ボタンクリックやスクロールなど）を実行します。
4. 「停止」ボタンを押し、収集されたデータを解析します。
5. 「Main」パネルを確認し、赤色の三角形がついているタスク（Long Task）に注目します。これが原因です。
4. サンプルプログラム：重い処理の特定と回避
以下のコードは、メインスレッドを長時間ブロックしてしまう悪い例と、それを非同期処理で回避する改善例です。
// 【悪い例】メインスレッドを長時間ブロックする処理
function heavyTask() {
const start = performance.now();
// 意図的に重いループを回す
while (performance.now() – start < 100) {
// 100msの間、メインスレッドを占有し続ける
}
console.log("重い処理完了");
}
// 【改善案】setTimeoutでタスクを分割し、ブラウザの描画時間を確保する
function lightTask() {
// 処理を分割してメインスレッドに空きを作る
setTimeout(() => {
// 処理の断片を実行
console.log(“処理の一部を実行”);
// 次の断片へ
}, 0);
}
5. 応用・注意点：現場で役立つTIPS
レイアウトシフトの特定:
Performanceタブの「Experience」セクションを確認してください。Layout Shiftが発生している箇所が可視化されます。原因の多くは画像のサイズ指定漏れや、後からDOMを挿入することによる要素の押し出しです。これらはCSSで`aspect-ratio`を指定するなどの対応で解消可能です。
注意点:
- プロファイリングは必ず「シークレットモード」で行ってください。ブラウザの拡張機能がパフォーマンスデータに干渉し、誤った解析結果を招くことがあります。
- 「CPU throttling」設定を「4x slowdown」などに設定すると、低スペック端末での挙動をシミュレートでき、より顕著にボトルネックを発見しやすくなります。
まずは、現在開発中のページの読み込み時や、複雑なインタラクション時に「赤色のタスク」がどこで発生しているかを観察することから始めてみてください。
コメント