レンダリングとは？非エンジニア向けにわかりやすく解説

一言で言うと

HTML解析→DOMツリー構築→CSS解析→レイアウト計算→画面描画の順で行われる。JavaScriptが途中で実行されることもある。

HTML解析→DOMツリー構築→CSS解析→レイアウト計算→画面描画の順で行われる。JavaScriptが途中で実行されることもある。

各フェーズはパース（HTML・CSS解析）→スタイル計算→レイアウト（Reflow）→ペイント→コンポジットの順に進む。途中でJavaScriptが実行されると後続フェーズが遅延するため、クリティカルレンダリングパスをいかに短くするかがフロントエンドパフォーマンスの核心になる。

Core Web Vitals 改善 ── LCP（最大コンテンツの描画）や CLS（レイアウトシフト）の改善にはレンダリングパスの理解が前提になる

SSR vs CSR の選択 ── サーバーサイドレンダリング（SSR）はHTMLを事前生成して初期表示を速くし、クライアントサイドレンダリング（CSR）はブラウザ側でDOMを構築する。用途に応じて使い分ける

Reflow 抑制 ── DOMの幅・高さを変える操作はReflow（レイアウト再計算）を引き起こすため、バッチ更新やCSS transformへの置き換えでパフォーマンスを改善できる