レンダリング

Rendering

web performance beginner

HTMLやCSSなどのコードをブラウザが解釈し、画面に実際の見た目として表示する処理のこと。

概要（サマリー）

レンダリングとは、HTMLやCSSなどのコードをブラウザが解釈し、画面に実際の見た目として表示する処理のことである。

HTMLファイルをブラウザで開いたとき、文字列として書かれたコードが画面上のボタンや段落・画像として表示される。この変換・描画の処理がレンダリングだ。Web開発の文脈では「ページが表示される仕組み」を指すことが多い。

ブラウザがWebページを表示するまでには、おおまかに以下のステップがある。

この処理はページを開いた瞬間だけでなく、JavaScriptがDOMを変更するたびに一部が再実行される（リフロー・リペイント）。

もう少し分けると、HTMLからDOM、CSSからCSSOMというスタイル情報が作られ、それらを合わせて「どの要素をどこに置くか」を計算する。最後にブラウザが色や文字、画像を画面に描く。初心者のうちは、レンダリングを「コードを画面表示に変換する一連の流れ」と捉えるとよい。

ページ表示後にJavaScriptでDOMやCSSが変わると、ブラウザは必要な部分をもう一度計算して描画する。これを再レンダリングと呼ぶことがある。

たとえば、ボタンをクリックしてメニューを開く、入力内容に応じて一覧を絞り込む、エラーメッセージを表示する、といった処理では画面の一部が更新される。Webページの動きは、DOM変更と再レンダリングの組み合わせで実現されることが多い。

リフローは、要素の大きさや位置を計算し直す処理である。たとえば、要素の幅、高さ、余白、表示・非表示が変わると、周囲の要素の位置も変わるため再計算が必要になる。

リペイントは、位置は大きく変えずに色や背景などを描き直す処理である。どちらも多すぎると表示が重くなる原因になる。大量のDOMを何度も書き換える処理では、レンダリング負荷に注意する必要がある。

レンダリングには「どこで行うか」によって2つの方式がある。

クライアントサイドレンダリング（CSR）
ブラウザ（クライアント）側でJavaScriptを実行してDOMを組み立てる方式。ReactやVueで作られたSPA（シングルページアプリケーション）がこれにあたる。最初の表示が遅くなる場合がある。

サーバーサイドレンダリング（SSR）
サーバー側でHTMLを生成してから送る方式。初期表示を速くしやすく、検索エンジンがページ内容を把握しやすくなる場合がある。Next.jsなどのフレームワークがSSRに対応している。

AIコーディングでNext.jsやNuxtを使う場合、この2つの違いについてAIに確認しながら進めると理解が深まる。

静的サイト / 動的サイトとも関係がある。静的サイトではあらかじめ作られたHTMLをブラウザが受け取り、ブラウザ側でレンダリングすることが多い。動的サイトやWebアプリでは、サーバー側でHTMLを作る場合も、ブラウザ側のJavaScriptで画面を組み立てる場合もある。

レンダリングが重いと、ページの表示が遅い、スクロールがカクつく、クリック後の反応が遅れる、といった問題が起こる。画像が大きすぎる、CSSが複雑すぎる、JavaScriptでDOMを何度も書き換えている、といった原因が考えられる。

改善するときは、不要なDOM更新を減らす、画像を軽くする、CSSやJavaScriptの読み込みを見直す、といった対策を取る。開発者ツールのPerformanceやNetworkを使うと、どこで時間がかかっているかを調べやすい。

AIが生成したWebページで「表示が遅い」「一瞬真っ白になる」「クリック後に画面がちらつく」といった問題が起きた場合、レンダリングの仕組みが関係していることがある。HTML、CSS、JavaScriptのどこで画面更新が重くなっているかを切り分ける必要がある。

AIへ相談するときは、「ページが重い」だけでなく、いつ重くなるのか、どの操作で再描画されるのか、開発者ツールで何が見えるのかを伝えるとよい。CSR、SSR、静的生成のどれが向いているかをAIに比較してもらうのも有効である。

HTMLはページの構造を表すコードであり、そのまま画面に表示されるわけではない。ブラウザがHTMLとCSSを解析し、レイアウトや描画を行うことで、初めて見た目として表示される。

レンダリングは最初の表示時だけでなく、JavaScriptでDOMを変更したときや、画面サイズが変わったときにも起こる。Webアプリでは、ユーザー操作のたびに部分的な再レンダリングが発生することが多い。

SSRは初期表示を速くしやすい場合があるが、必ず速いとは限らない。サーバーの処理が重い、通信が遅い、ブラウザ側のJavaScriptが大きい、といった場合は別の部分がボトルネックになる。

CSSはレンダリングに関係するが、HTML構造、JavaScriptのDOM操作、画像サイズ、通信量も影響する。表示の遅さを調べるときは、見た目のコードだけでなくページ全体の処理を見る必要がある。