Webフロントエンド - 基礎

ブラウザレンダリングぶらうざれんだりんぐ

DOMCSSOMレイアウトペイントクリティカルレンダリングパスリフロー

ブラウザレンダリングについて教えて

簡単に言うとこんな感じ！

ブラウザがWebページの「設計図（HTML・CSS・JS）」を受け取って、あなたの画面に絵として表示するまでの一連の工程のことだよ。料理で言えば「レシピを見て、食材を切って、火を入れて、皿に盛る」みたいな流れがあるんだ！

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

ブラウザレンダリングとは、WebブラウザがサーバーからHTML・CSS・JavaScriptなどのファイルを受け取り、それを解析・処理して画面上に視覚的なページとして描画するまでの一連のプロセスのことです。ユーザーがURLを入力してからページが見えるようになるまで、ブラウザの内部ではいくつかの段階を経ています。

このプロセスはクリティカルレンダリングパス（Critical Rendering Path）と呼ばれ、その効率がページの表示速度（=ユーザー体験）に直結します。発注者や担当者が「なぜこのサイトは重いのか」「表示速度改善に何が必要か」を判断するうえで、基本的な流れを知っておくことが重要です。

レンダリングが遅い場合、ユーザーの離脱率が高くなることが多くのデータで示されており、Googleの検索順位（SEO）にも影響するため、ビジネス観点でも無視できない要素です。

レンダリングの流れ（6ステップ）

ブラウザは大きく以下の順序で処理を進めます。

ステップ	名称	何をしているか
①	HTML解析 → DOM構築	HTMLを読み込み、タグの階層構造（ツリー）を作る
②	CSS解析 → CSSOM構築	CSSを読み込み、スタイルのツリーを作る
③	レンダーツリー構築	DOMとCSSOMを合体させ、「表示すべき要素」だけのツリーを作る
④	レイアウト（Reflow）	各要素の位置・サイズを計算する
⑤	ペイント（Paint）	色・影・文字など見た目を描画情報に変換する
⑥	コンポジット（Composite）	レイヤーを合成して最終的に画面へ表示する

🔁 リフローとリペイント（再レンダリング）

JavaScriptでDOM要素のサイズや位置を変更すると、ステップ④のレイアウト計算からやり直しが発生します。これを**リフロー（Reflow）と呼び、処理コストが高いです。色だけ変わる場合はステップ⑤からのリペイント（Repaint）**で済みます。頻繁に起きるとページがカクつく原因になります。

🧱 DOMとCSSOМの覚え方

DOM（Document Object Model）＝「HTMLの骨格ツリー」
CSSOM（CSS Object Model）＝「スタイルのルールツリー」
この2つが合わさって初めて「見た目付きの画面」になるイメージです。

歴史と背景

1990年代前半：初期のブラウザ（Mosaic・Netscape）は単純なHTMLを逐次表示するだけだった
1990年代後半：CSSの登場（CSS1: 1996年）により、構造とデザインの分離が始まり、レンダリングが複雑化
2000年代：JavaScriptによる動的DOM操作（AJAX）が普及し、初期読み込み後の再レンダリングが重要に
2008年：GoogleがChromeをリリース。V8エンジンによる高速なJS実行と、マルチプロセスレンダリングが注目される
2010年代：モバイルブラウザの普及でパフォーマンスへの要求が急増。GoogleがPageSpeedなどの計測ツールを提供
2020年代：Core Web Vitals（LCP・FID・CLS）として表示速度がSEOの公式ランキング要因に。レンダリング最適化がビジネス課題として定着

レンダリングの種類と比較

Webシステムの設計では「どこでHTMLを生成・レンダリングするか」が重要な選択肢になります。

方式	略称	概要	向いているケース
クライアントサイドレンダリング	CSR	ブラウザ側がJSでHTMLを生成	SPAや管理画面
サーバーサイドレンダリング	SSR	サーバー側が完成HTMLを返す	SEOが重要なサイト
静的サイト生成	SSG	ビルド時にHTMLを事前生成	ブログ・ドキュメント
インクリメンタル静的再生成	ISR	一部ページを動的に再生成	ECサイトなど

規格	内容
W3C HTML Living Standard	HTMLのパース・DOM構築に関する標準仕様（WHATWGが管理）
W3C CSS Snapshot	CSS仕様群のスナップショット。CSSOMの基礎
W3C Performance Timeline	ブラウザのパフォーマンス計測APIの標準仕様