ブラウザの世界へようこそ。画面にWebサイトが綺麗に表示されるまで、ブラウザの中では実は「とんでもない大仕事」が繰り広げられているんです。
今日は、そんなブラウザの「頑張り」を少しだけいたわって、サクサク動くWebサイトを作るための「魔法のルール」についてお話ししますね。
—
ブラウザの「お仕事」は、お片付けと模様替えに似ている
ブラウザがHTMLやCSSを読み込んで画面に表示する過程は、部屋の模様替えにそっくりです。
1. HTMLパース（設計図の読み込み）: どこに何を置くか、リストを確認します（DOMツリーの作成）。
2. CSSOM構築（装飾の確認）: 「この椅子は赤くして」「この棚は右に寄せて」という指示書を整理します。
3. レイアウト（配置）: 「じゃあ、どこに何を置けば重ならないかな？」と計算します（これが一番大変！）。
4. ペイント（描画）: 実際に色を塗ったり、テクスチャを貼り付けたりします。
問題は、CSSの書き方ひとつで、この「お片付け」をゼロからやり直さなきゃいけないことがあるということです。
—
「レイアウトのやり直し」と「色を塗るだけ」の大きな差
CSSのプロパティには、「低コストな子」と「高コストな子」がいます。
1. 高コストな「レイアウト変更（Reflow）」
`width` や `height`、`top` や `left` などを変えるとき、ブラウザは「えっ、場所が変わるの！？ じゃあ周りの家具も全部動かして、重なりを確認しなきゃ！」と大騒ぎします。これをReflow（リフロー）と呼びます。
これが発生すると、ブラウザは再計算のためにCPUをフル回転させます。スマホが熱くなる原因はだいたいこれです。
2. 中コストな「再描画（Repaint）」
`background-color` や `color` などを変えるときは、「場所は変わらないけど、塗り直しが必要だね」となります。これをRepaint（リペイント）と呼びます。リフローよりはマシですが、やっぱり手間がかかります。
3. 低コストな「GPUにお任せ（合成）」
ここが今日のハイライトです。`transform`（移動や拡大縮小）や `opacity`（透明度）など、一部のプロパティはGPU（画像処理の専門家）にお任せできます。
ブラウザは「これらは動かしても計算し直さなくていいから、画像を切り抜いて貼るだけでOK！」と判断します。これがWebサイトをヌルヌル動かす秘訣です。
—
現場で使える「魔法のコード」
では、どうすればいいか？ 具体的なコツをひとつお伝えしますね。
要素を動かしたいとき、`top` や `left` を使うのではなく、`transform` を使ってみてください。
/ ❌ やってはいけない！（Reflowを誘発します） /
.box {
position: absolute;
top: 0;
transition: top 0.3s;
}
.box:hover {
top: 100px; / 場所を計算し直すので重い！ /
}
/ ✅ おすすめ！（GPUでスイスイ動きます） /
.box {
transition: transform 0.3s;
}
.box:hover {
/ 場所の計算はせず、画像をスライドさせるだけなので軽い！ /
transform: translateY(100px);
}
—
どうしても重いときは「レイヤー」を分けてあげよう
もし、「どうしても複雑なアニメーションが必要だ」というときは、`will-change` というプロパティが使えます。
.heavy-element {
/ ブラウザに「この要素はあとで動くから、今のうちに別レイヤーにしておいて！」と教える /
will-change: transform;
}
これはブラウザに対する「準備運動の指示」です。ただし、乱用は禁物。準備しすぎるとメモリを食いつぶしてしまうので、「ここぞ！」という時にだけ使うのが、プロの技です。
—
最後に：完璧主義にならなくて大丈夫
「全部をGPU最適化しなきゃ！」と意気込む必要はありません。まずは、「あ、今のCSSはブラウザを忙しくさせてるかも？」と、ふと思い出すだけで十分です。
ブラウザも人間と同じで、無理をさせれば疲れてしまいます。少しだけ優しくコードを書いてあげることで、あなたのWebサイトはもっともっと快適に、そして美しく動くようになりますよ。
焦らず、ひとつずつ試してみてくださいね。応援しています！
コメント