ブラウザの「悲鳴」を聞き逃すな：DevToolsでメインスレッドを外科手術する
こんにちは。日々コードと格闘するエンジニアの皆さん。
「なぜかブラウザがカクつく」「クリックしてから反応するまで一瞬の間がある」。そんな違和感を感じたことはありませんか？
多くの初心者は、これを「PCのスペック不足」や「ネットワークのせい」で片付けてしまいがちです。しかし、実はその正体は、あなたが書いたJavaScriptが「メインスレッド」というブラウザの心臓部を長時間占有していることにあります。
今日は、ブラウザのPerformanceタブを駆使し、目に見えない「実行の渋滞」を可視化し、UX（ユーザー体験）を劇的に改善するプロの診断術を伝授します。これをマスターすれば、あなたはもう「なんとなく重い」という曖昧な悩みから解放されます。
—
1. なぜ「メインスレッド」を気にする必要があるのか？
ブラウザのメインスレッドは、「JavaScriptの実行」「スタイルの計算」「レイアウト（配置）」「描画」という、極めて重要なタスクをたった一つのレーンで処理しています。
つまり、JavaScriptで重い計算やDOM操作を詰め込むと、その間、ブラウザは「描画」や「ユーザーのクリック受付」ができません。これが「カクつき（Jank）」の正体です。
準備：計測の精度を最大化する
まずは、ノイズを排除した正確な計測環境を作ります。
1. Chromeを開き、`Ctrl + Shift + I` (Macは `Cmd + Option + I`) でDevToolsを開く。
2. 重要： 開発中の拡張機能（AdBlockなど）が計測結果に干渉しないよう、「シークレットモード」で対象ページを開いてください。
3. `Performance` タブを選択します。
—
2. Long Taskの正体を暴く「外科手術」の手順
それでは、具体的に「何がブラウザを止めているのか」を特定しましょう。
ステップ1：記録（プロファイリング）の開始
1. Performanceタブの「録画ボタン（丸いアイコン）」をクリック。
2. ページをリロードするか、カクつきが発生する操作（スクロールやボタンクリック）を行う。
3. 操作が終わったら「Stop」を押します。
ステップ2：赤い三角を見つける
記録が完了すると、横長のバーが並んだ画面が表示されます。注目すべきは、「Main」という項目に現れる「赤い三角マーク」です。
- 赤い三角： これが「Long Task（長時間実行タスク）」の警告です。50ms以上メインスレッドを占有している箇所に自動でマークされます。
- なぜ50msか： 人間がカクつきを感じ始める閾値が概ね100ms前後だからです。ブラウザは常に「16ms（60fps）」で描画を繰り返そうとしているため、50msの停止は致命的です。
—
3. 実践：ボトルネックの特定と改善
例えば、以下のようなコードが書かれているとします。
// 悪い例：重い処理をメインスレッドで直接実行している
function handleButtonClick() {
const data = heavyCalculation(); // 200msかかる計算
updateDOM(data);
}
このとき、Performanceタブの「Main」を見ると、200ms分、真っ赤なバーが伸びているはずです。これがユーザーを待たせている張本人です。
改善の定石：スレッドを解放する
このタスクを「分割」して、ブラウザが描画の隙間を作れるようにします。`setTimeout` または `requestIdleCallback` を使ってタスクを細切れにしましょう。
// 良い例：タスクを非同期に分割する
async function handleButtonClick() {
// 処理を細かく分け、ブラウザに描画のチャンスを与える
await new Promise(resolve => setTimeout(resolve, 0));
const data = heavyCalculation();
updateDOM(data);
}
これを導入した後、再度プロファイリングを行うと、赤い三角が消え、バーが細かく分割されているのが見えるはずです。これが「スムーズな操作感」を実現する工学的なアプローチです。
—
4. プロの視点：何を見るべきか？
初心者が陥りがちな罠は、すべてのバーを理解しようとすることです。最初は以下の2点だけを見てください。
1. Mainチャートの高さ： どこで処理がスタックしているか（関数名も表示されます）。
2. Bottom-Upタブ： どの関数が最も時間を食っているか（Self Time）を数値で確認する。
特に「Bottom-Up」タブで「Self Time（その関数自身が実行に費やした時間）」が長い関数を見つけるのが、最も効率的なデバッグ方法です。ライブラリの関数ではなく、あなたが書いたコードのどこが重いのかが、驚くほど明確に数値で突きつけられます。
—
最後に：計測は「愛」です
「直感」でコードを修正するのはギャンブルです。しかし、「Performanceタブ」というツールを使えば、それは「外科手術」になります。
最初は複雑に見えるこの画面も、一度「赤い三角」を退治する快感を覚えたら、もう病みつきになるはずです。あなたの書いたコードが、以前よりも遥かに軽やかに、ユーザーの手元で動く姿を想像してみてください。
さあ、今すぐあなたのブラウザで「録画ボタン」を押してみましょう。そこには、まだ誰も知らない、あなたのコードの「伸び代」が隠されているはずです。
何か困ったことがあれば、いつでもまた聞きに来てください。一緒に最高の体験を作っていきましょう。