「Webサイトが表示されるまで」の裏側って、まるで巨大なパズルのようですよね。
こんにちは。フロントエンドの世界に足を踏み入れたばかりの皆さん、ようこそ。今日は、Chromeをはじめとする多くのブラウザが採用しているエンジン「Blink（ブリンク）」が、あなたの書いたコードをどうやって画面上のピクセルに変換しているのか、その「魔法」の舞台裏を覗いてみましょう。
難しい用語はなるべく置いておいて、一緒に「お料理」に例えて旅をしてみますね。
—
1. ブラウザは「凄腕のシェフ」です
皆さんが書いたHTMLやCSSは、いわば「レシピ」です。Blinkという名のシェフは、このレシピを受け取ると、大忙しで以下のステップを踏んで一皿の料理（ページ）を完成させます。
ステップ①：DOMツリーを作る（食材の下ごしらえ）
まずはHTMLを読んで、「ここは見出し」「ここは画像」と分類します。
ステップ②：CSSOMツリーを作る（調理手順の整理）
次にCSSを読んで、「見出しは青色」「画像は右に寄せる」というルールを整理します。
ステップ③：レンダーツリーの作成（お皿への盛り付け準備）
この2つを合体させて、「画面に何を表示すべきか」という設計図を作ります。
—
2. 泥臭い「再描画」の話：リフローとリペイント
さて、ここからが本題です。Webサイトを触っていて「画面がカクつくな」と感じたことはありませんか？ それは、シェフが「あ、盛り付けを直さなきゃ！」とパニックになっている状態かもしれません。
リフロー（Layout：レイアウトのやり直し）
例えば、「ボタンを押したら文字の大きさが変わった」とします。すると、その周りの要素も全部押し出されて位置が変わりますよね。
リフローは、ブラウザが「全部配置し直しだ！」と大慌てで計算し直すことです。これはめちゃくちゃ重労働です。
リペイント（Paint：塗り直しのやり直し）
こちらは、「色を変える」や「影をつける」といった、位置関係には影響しない変更のことです。家具の場所は変えずに、壁紙だけ塗り替えるようなもの。リフローよりはマシですが、これも頻繁に行うと画面が重くなります。
—
3. 「コンポジット」という最強のショートカット
今のブラウザには、コンポジット（合成）という切り札があります。
これは、画面を「透明なシート（レイヤー）」に分けて管理する技術です。
例えば、アニメーションで動かしたい要素を「別のシート」に描いておけば、動かす時にそのシートをずらすだけで済みます。下の土台を塗り直す必要はありません。これが現代のブラウザがヌルヌル動く秘密です。
実践：ブラウザを楽させる「CSSアニメーション」
以下のコードを見てください。
/ 悪い例：リフローを引き起こしやすい /
.box {
width: 100px;
/ topやleftを変更すると、毎回ブラウザは計算し直して大忙しになります /
transition: all 0.3s;
}
.box:hover {
top: 50px;
}
/ 良い例：コンポジット層で処理させる /
.box-pro {
width: 100px;
/ transformとopacityだけは、ブラウザが「よし、これは専門のシートで動かそう！」と判断してくれます /
transition: transform 0.3s;
}
.box-pro:hover {
transform: translateY(50px); / これなら「合成」だけで済むので、めちゃくちゃ軽い！ /
}
—
4. 最後に：完璧主義にならなくて大丈夫
ここまで読んで「うわ、全部意識しないとダメかな？」と不安になる必要はありません。最初は誰だって、「動けばOK！」から始まります。
ブラウザの仕組みを知ることは、自転車のメンテナンス方法を知るのと似ています。「パンクした時、どこを直せばいいか知っている」という安心感が、あなたをより自由なエンジニアにしてくれるはずです。
もし画面が重いなと感じたら、「あ、今シェフがリフローで汗だくになってるかも？」と想像してみてください。それだけで、あなたはもう立派なフロントエンド・スペシャリストの視点を持っています。
焦らず、一歩ずつ。一緒にWebの深淵を楽しんでいきましょうね。分からないことがあったら、いつでもまた聞きに来てください。大丈夫、応援しています！
コメント