【入門編】 Performanceパネルによるレンダリング解析 – Webブラウザの仕組み実践ガイド

ブラウザの「裏側の仕事」を覗き見よう！Performanceパネルでレンダリングの謎を解く

こんにちは。フロントエンドの世界へようこそ！
ブラウザでWebページを見ているとき、私たちは「一瞬で表示された」と感じますが、その裏側では、ブラウザがものすごい勢いでパズルを組み立てるような作業をしています。

今日は、ブラウザがどうやって画面を描いているのか、そしてその作業のどこで「重さ（カクつき）」が発生しているのかを、ChromeのPerformanceパネルを使って探偵のように突き止める方法をお話しします。

—

1. ブラウザの「お仕事」は3つのステップでできている

ブラウザがページを表示するまでの流れを、「レストランのキッチン」に例えてみましょう。

1. Rendering（レイアウト/リフロー）： お客さんの注文（HTML）に合わせて、皿の配置やテーブルの広さを決める作業です。「どこに何を置くか」の設計図ですね。
2. Painting（ペイント）： お皿に料理を盛り付け、色を塗る作業です。文字の色や背景の画像がここに該当します。
3. Compositing（コンポジット）： 最後に、出来上がったお皿をテーブルに運んで並べる作業です。ブラウザは「層（レイヤー）」ごとに分けて管理しているので、これを重ね合わせる工程が重要です。

もし、注文を変えるたびにテーブルを全部片付けて一から並べ直していたら……当然、料理はなかなか出てきませんよね？これが「リフロー（再計算）」が重いと言われる理由です。

—

2. ChromeのPerformanceパネルで「現場」を覗く

「画面がカクつく！」と思ったとき、どこがボトルネックになっているのかを調べるには、ChromeのデベロッパーツールにあるPerformanceパネルが最強の武器になります。

手順はこれだけ！

1. 調査したいページを開く。
2. `F12`キーでデベロッパーツールを開き、「Performance」タブを選択。
3. 左上の「●（録画ボタン）」を押して、ページを操作する。
4. もう一度「●」を押して停止。

すると、Flame Chart（フレームチャート）という、カラフルな横棒グラフがたくさん並んだ画面が出てきます。これがブラウザの「作業日報」です。

ここを見れば、どこでサボっているか分かる！

紫色のバー： Rendering（レイアウト）の計算中。
緑色のバー： Painting（色の塗り分け）中。
黄色のバー： JavaScriptがメインスレッド（ブラウザの心臓部）を占領中。

特に「Main」という項目を見てください。ここが長ければ長いほど、「ブラウザが一生懸命考え込みすぎて、画面の描画を待たせている」という証拠です。

—

3. 実践：ブラウザをわざと「困らせて」みる

百聞は一見に如かず。わざとブラウザに負荷をかけて、何が起きるか見てみましょう。以下のコードをHTMLファイルにして動かしてみてください。

なぜこれがダメなのか？

`box.offsetWidth` をループの中で呼び出すと、ブラウザは「画面の幅が変わったかも！今すぐ計算しないと！」と、毎回律儀にレイアウトをやり直します。キッチンで例えるなら、料理を出そうとするたびに、テーブルの配置をメジャーで測り直しているようなものです。これでは効率が悪すぎますよね。

---

4. つまずきやすいポイントをフォロー

「Performanceパネルを見ても、専門用語ばかりで意味がわからない……」と落ち込まないでください。最初はそれで当然です！

「Main」が真っ赤になっている？：JavaScriptの処理が重すぎます。複雑な計算を一度にやりすぎないよう、小分けにしてみましょう。
「Painting」が異常に長い？：複雑なCSSの影（box-shadow）や、重い画像が原因かもしれません。`will-change` プロパティを使って、「ここは後で動くから準備しておいてね」とブラウザに教えてあげるだけで、劇的に改善することもあります。

---

最後に：完璧を目指さなくていい

ブラウザの仕組みを知ることは、単なる「高速化のテクニック」ではありません。ブラウザという、世界で一番複雑なソフトウェアを「どうやって気持ちよく働かせてあげるか」という、いわばコミュニケーションの技術なんです。

最初はグラフの山を見ても「なんだこれは？」と思うかもしれません。でも、少しずつ「あ、さっきの修正でここが短くなった！」という発見があるはずです。その小さな「なるほど」の積み重ねが、あなたを一流のフロントエンドエンジニアに育ててくれます。

大丈夫、焦らなくていいんです。まずはツールを開いて、ページを録画することから始めてみましょう。ブラウザという「相棒」が、どんな風に頑張っているのか、ぜひその目で確かめてみてくださいね。