こんにちは！Webブラウザという「魔法の箱」の裏側を覗いてみたいという好奇心、最高ですね。
Webサイトを表示するとき、ブラウザは裏側でとんでもない量の仕事を、ほんの一瞬のうちにこなしています。皆さんがChromeの「Performanceタブ」を開いて、あのギザギザした山脈のようなタイムラインを見たとき、「何が起きてるんだ……？」とクラクラした経験はありませんか？
今日は、その難解なタイムラインを「料理」に例えながら、ブラウザが裏で何をしているのか、泥臭い現場の視点から紐解いていきましょう。大丈夫、専門用語はあとからついてきます。まずは「流れ」を掴んでしまいましょう！
—
ブラウザは「凄腕のシェフ」だと思ってください
ブラウザがWebページを表示するプロセスは、レストランのキッチンに似ています。
1. HTMLパース（買い出し・下ごしらえ）: 届いた食材（HTML）を確認し、「これはメインディッシュの肉だな」「これはサラダの野菜だな」と仕分けます。
2. DOM/CSSOMツリー構築（メニューの設計図）: どの皿をどの位置に置くか（DOM）、どんな味付けにするか（CSSOM）を決めます。
3. Recalculate Style（盛り付けの相談）: 「この皿は赤色にしよう」「ここはフォントを大きくしよう」と、最終的な見た目を決定します。
4. Layout（配置の決定）: テーブルのどこにどの皿を置くか、正確な座標（位置とサイズ）を計算します。
5. Paint（お皿への盛り付け）: 実際に色を塗り、形を描き込みます。
Performanceタブで見るタイムラインは、この「キッチンでの格闘の記録」そのものなんです。
—
タイムラインの「山脈」を解読する
Performanceタブで「録画（Record）」ボタンを押してページを再読み込みすると、メインスレッドという名の「凄腕シェフ」が、どの作業にどれくらい時間をかけたかが可視化されます。特に注目すべきは以下の3つです。
1. Recalculate Style（スタイル計算）
「この要素はどこが赤色なんだっけ？」と、CSSのルールを総動員して計算する作業です。
- つまずきポイント: ここが極端に長い場合、CSSの指定が複雑すぎたり、セレクタ（`div > ul > li > a` のような長い指定）が深すぎたりします。「レシピが複雑すぎて、盛り付けに時間がかかっている状態」ですね。
2. Layout（レイアウト）
「このボタンの横に画像を置くと、こっちのテキストは下にずれるよね」といった、位置の調整です。
- つまずきポイント: ここで一番怖いのが「強制同期レイアウト」という現象です。JavaScriptで要素のサイズを調べた直後に、別の要素のサイズを変えたりすると、ブラウザは「えっ、今決めた配置が変わっちゃうの！？ もう一度計算し直しだ！」とパニックを起こします。
3. Paint（ペイント）
実際にピクセルを画面に描く作業です。
- つまずきポイント: ここで時間がかかるのは、画像が大きすぎたり、複雑な影（box-shadow）を大量に使っていたりする場合です。「お皿に金箔を貼るような細かい作業」を何百回も繰り返せば、そりゃあ疲れますよね。
—
実践：ブラウザを「わざと困らせる」コード
論より証拠。実際にブラウザに負荷をかけて、Performanceタブで何が起きるか見てみましょう。以下のコードをHTMLファイルとして保存し、Chromeのデベロッパーツールを開いて試してみてください。
このコードを実行してPerformanceタブを録画すると、Layoutの山が異様なほど高く積み上がるのが見えるはずです。これが「ブラウザが苦しんでいるサイン」です。
---
最後に：完璧を目指さなくて大丈夫
現場で働いていると、「ブラウザの仕組みを全部理解して、完璧なパフォーマンスを出そう！」と力んでしまう人がいますが、最初はそんなに気負わなくていいんです。
1. まずは「見える化」する: Performanceタブを怖がらずに開く。
2. 山が高い場所を探す: 「ここ、処理が重そうだな？」という直感を信じる。
3. シンプルにする: CSSを整理したり、余計なJavaScriptを削ったりして、ブラウザの荷物を軽くしてあげる。
Web制作は、ブラウザという「高性能な相棒」との共同作業です。相棒が気持ちよく働けるように、少しだけ気遣いをしてあげる。その感覚さえ掴めれば、あなたはもう立派なフロントエンド・エンジニアの入り口に立っています。
また何かわからないことがあったら、いつでも聞きに来てくださいね。一緒に一歩ずつ進んでいきましょう！
コメント