ブラウザレンダリングの仕組み

ブラウザレンダリングとは

ブラウザレンダリングとは、サーバーから受け取った [[HTML]]・[[CSS]]・[[JavaScript]] を、ブラウザが実際の画面(ピクセル)に描き出すまでの一連の処理のことです。この流れを知っていると、「なぜページが遅いのか」「どこを直せば速くなるのか」を理屈で考えられるようになります。

レンダリングの5ステップ

ステップ	内容
1. パース	HTMLを解析して [[DOM]] ツリーを、CSSを解析してCSSOMを作る
2. レンダーツリー構築	DOMとCSSOMを合成し、「実際に表示される要素+スタイル」の木を作る
3. レイアウト	各要素の位置とサイズを計算する
4. ペイント	色・文字・影などをピクセルとして描画する
5. コンポジット	描画したレイヤーを重ね合わせて最終画面を合成する

再レイアウトと再ペイント

JavaScript でスタイルや DOM を変更すると、この処理の一部がやり直しになります。

リフロー(再レイアウト)— 要素の位置・サイズが変わると発生。width の変更や要素の追加など。最もコストが高い
リペイント(再描画)— 見た目だけが変わると発生。color や background の変更など
コンポジットのみ — transform や opacity の変更はレイアウト・ペイントを飛ばせるため軽い。アニメーションにはこの2つを使うのが定石です

レンダリングブロック

HTML の解析中に <script> タグに出会うと、ブラウザは解析を止めてJSを実行します(JSがDOMを書き換える可能性があるため)。CSS の読み込みも描画をブロックします。

<script> に defer を付けると、HTML解析を止めずにJSを後で実行できる
CSS・JSのファイルサイズを絞ることが初回表示の速さに直結する

初学者向けポイント

開発者ツールの Performance パネルで、レイアウトやペイントにかかった時間を実際に確認できます
「アニメーションは transform と opacity で行う」— 理由を説明できると一歩リードです
この知識は [[Webパフォーマンス最適化]] のほぼすべての手法の前提になります

関連技術とのつながり

[[HTML]] / [[CSS]] — レンダリングの入力となる素材
[[JavaScript]] — 実行タイミングがレンダリングをブロックし得る
[[DOM]] — パースの成果物であり、JSによる変更が再レンダリングを引き起こす
[[Webパフォーマンス最適化]] — この仕組みを踏まえた改善テクニック集

Q: レンダリングの「レイアウト」ステップで行われるのはどれ?
- [ ] HTMLを解析してDOMツリーを作る
- [x] 各要素の位置とサイズを計算する
- [ ] 色や文字をピクセルとして描画する
解説: レイアウトは要素の位置・サイズの計算です。描画はその後のペイントで行われます。

Q: 最もコストが高いとされる処理はどれ?
- [x] リフロー(再レイアウト)
- [ ] リペイント(再描画)
- [ ] コンポジットのみの変更
解説: 位置やサイズの再計算を伴うリフローが最も重く、transform/opacityの変更は最も軽い処理です。

Q: アニメーションに使うと軽いCSSプロパティの組み合わせはどれ?
- [ ] width と height
- [ ] margin と padding
- [x] transform と opacity
解説: transformとopacityはレイアウト・ペイントを飛ばしてコンポジットだけで処理できるため軽量です。