フロントエンド開発 / 約20分

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

なぜこれを学ぶか

「Reactが遅い」「CSSが効かない」といった問題の9割は、ブラウザの仕組みを知れば原因にたどり着けます。AIにデバッグを任せる前に、自分が地図を持ちましょう。

ブラウザはHTMLを受け取ると DOMツリー を構築し、CSSから CSSOM を作り、両者を合体させて レンダーツリー を生成します。これを クリティカルレンダリングパス と呼びます。

重要なのは、CSSは レンダリングをブロック するという点です。巨大なCSSファイルを先頭で読み込むと、画面が真っ白な時間が長くなります。

JavaScriptは パーサーをブロック します。<script> タグに defer や async を付けないと、HTML解析が止まります。

レイアウト（リフロー）と再ペイントの違いも重要です。width を変えると再レイアウトが走りますが、transform や opacity なら合成のみで済み、高速です。

DevToolsのPerformanceタブで実際に計測してみましょう。「推測するな、計測せよ」はパフォーマンス改善の鉄則です。

重要ポイント

DOM → CSSOM → レンダーツリー → レイアウト → ペイントの流れ
CSSはレンダリングブロック、JSはパーサーブロック
transform/opacity は合成のみで高速

理解度チェック

選ぶと即座に解説が表示されます。

アニメーションを滑らかにしたい場合、最も避けるべきプロパティの変更はどれ？

ヒントを見る

ブラウザの描画工程「レイアウト → ペイント → 合成」のうち、最もコストが高いのは「レイアウト（リフロー）」の再計算です。どのプロパティがレイアウトを引き起こすかを考えましょう。

コーディング演習実際に書く

CSSプロパティをブラウザの描画コストで分類する関数を書いてください。プロパティ名を受け取り、レイアウト再計算が必要なもの（width, height, top, left, margin, padding）は 'layout'、ペイントのみのもの（color, background, box-shadow）は 'paint'、合成のみで済むもの（transform, opacity）は 'composite' を返します。それ以外は 'unknown' です。

function classifyCssProperty(property)

模範解答（読んで理解したら、自力で書き直してみましょう）

function classifyCssProperty(property) {
  const layoutProps = ['width', 'height', 'top', 'left', 'margin', 'padding']
  const paintProps = ['color', 'background', 'box-shadow']
  const compositeProps = ['transform', 'opacity']

  if (layoutProps.includes(property)) return 'layout'
  if (paintProps.includes(property)) return 'paint'
  if (compositeProps.includes(property)) return 'composite'
  return 'unknown'
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン