Frontend Academy · レッスン

ページのレンダリング: DOM、CSSOM、レイアウト、ペイント

ブラウザーがHTMLとCSSのバイト列を処理し、DOMとCSSOMを構築してレイアウトを計算し、ピクセルを描画する流れを確認します。

レッスン 3/413 ステップ

「ページのレンダリング: DOM、CSSOM、レイアウト、ペイント」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

バイトからピクセルへ

ブラウザーがサーバーからHTMLのバイト列を受け取ると、複数の手順を経て、画面に表示されるピクセルへと変換されます。このパイプラインを知ると、パフォーマンスを最適化し、表示上の不具合の原因を理解しやすくなります。

ステップ1 — HTMLの解析: DOMの構築

ブラウザーのHTMLパーサーはバイトストリームを読み取り、Document Object Model（DOM）を構築します。DOMは、ドキュメント内のすべてのHTML要素、テキストノード、コメントを表すノードのツリーです。

<!-- This HTML... -->
<div>
  <p>Hello</p>
</div>

// ...becomes a DOM tree:
// Document
//   └── html
//         └── body
//               └── div
//                     └── p
//                           └── 'Hello'

ステップ2 — CSSの解析: CSSOMの構築

同時に、CSSのバイト列はCSS Object Model（CSSOM）というスタイルルールのツリーに解析されます。CSSはレンダリングをブロックします。ブラウザーは、表示されるコンテンツのスタイルを計算するまでピクセルを描画しません。

ステップ3 — レンダーツリー

ブラウザーはDOMとCSSOMを組み合わせてRender Treeを構築します。表示されるノードだけが含まれ、display:noneの要素は除外されます。レンダーツリーの各ノードには、描画に使われる計算済みスタイルが保持されます。

ステップ4 — レイアウト（リフロー）

レイアウトでは、ボックスモデルとビューポートの幅を使って、レンダーツリー内のすべてのノードの正確な位置とサイズを計算します。これはリフローとも呼ばれます。レイアウトは高コストな処理なので、JavaScriptで繰り返し発生させないようにします。

ステップ5 — ペイント

ペイントでは、レイアウトを画面上の実際のピクセルに変換します。ブラウザーは背景、境界線、テキスト、画像をレイヤーごとに描画します。一部の要素は、GPUアクセラレーションによる描画のために独自のコンポジットレイヤーを作成します。

ステップ6 — コンポジット

ブラウザーのコンポジターは、ペイントされたレイヤーを最終フレームに合成し、画面に送ります。アニメーションにtransformとopacityを使うと、コンポジターがGPU上で処理できるため、レイアウトとペイントを完全に省略できます。

レンダリングをブロックするもの

<head>内のCSSはレンダリングをブロックします。JavaScriptはデフォルトで、パーサーとレンダリングの両方をブロックします。scriptタグにdeferを指定すると、レンダリングをブロックせず、HTMLの解析後にJSを解析できます。

<script src="app.js" defer></script>

クリティカルレンダリングパス

クリティカルレンダリングパスとは、HTMLのバイト列を受信してから最初のピクセルを表示するまでの一連の処理です。これを最適化するには、レンダリングをブロックするリソースの数とサイズを最小限に抑え、重要でないJSとCSSの読み込みを遅延させます。

リフローとリペイントの違い

レイアウト関連のプロパティ（width、margin、position）を変更すると、リフローとリペイントが発生します。見た目だけに関わるプロパティ（color、background）の変更では、リペイントだけが発生します。transformやopacityの変更では、コンポジットだけが発生します。最もコストの低い処理を優先してください。

DevTools: ペイントのタイムラインを確認する

Chrome DevToolsでPerformanceパネルを開き、ページの読み込みを記録してウォーターフォールを確認します。緑色のPaintingイベントが表示され、どの要素が高コストなレイアウトを引き起こしているかを特定できます。

理解度チェック

ページ上の各要素の正確なサイズと位置を計算するのはどのステップですか？

対話的なレッスンで答える

まとめ: レンダリングパイプライン

HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite。各ステップの結果が次のステップに渡されます。クリティカルレンダリングパスを最適化するとは、このパイプラインを短縮し、最初に表示されるコンテンツをできるだけ速く表示することです。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「ページのレンダリング: DOM、CSSOM、レイアウト、ペイント」レッスンは無料ですか？

はい。「ページのレンダリング: DOM、CSSOM、レイアウト、ペイント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「ページのレンダリング: DOM、CSSOM、レイアウト、ペイント」で何を学びますか？

ブラウザーがHTMLとCSSのバイト列を処理し、DOMとCSSOMを構築してレイアウトを計算し、ピクセルを描画する流れを確認します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「ページのレンダリング: DOM、CSSOM、レイアウト、ペイント」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る