ブラウザレンダリングの仕組みについて

これからウェブページのブラウザレンダリングの仕組みについて解説します。

□ブラウザレンダリングの仕組みを理解するためのキーワード

Parse（パース）
Style（スタイル）
Layout（レイアウト）
Paint（ペイント）
Composite（コンポジット）

□大まかにブラウザレンダリングするための手順について一言で理解
ブラウザレンダリングの仕組みの手順は大きく分けると5つに分解できます。それぞれの役割について一言でまとめると下記のようになります。

Parse（パース）：コードの構造化とStyle Rulesの作成
Style（スタイル）：構造体とStyle Rulesの合体
Layout（レイアウト）：合体された構造体の配置や大きさ決め
Paint（ペイント）：各レイアウトの描画順序決めや色などの情報定義
Composite（コンポジット）：上記をウェブブラウザにピクセルとして統合

□手順について具体的に解説

Parse（パース）：コードの構造化とStyle Rulesの作成について詳しく解説すると、この肯定ではHTMLとCSSの解析が並行して行われます。その際にHTMLとCSSがそれぞれDOMツリーとStyle Rulesという構造体に変換されます。parseは解析という意味で使われています。DOMツリー（Document Object Model）の略でHTML文章をツリー状のデータ構造として扱うための仕組みです。Style RulesとはCSSファイル内で定義された具体的なCSSスタイルのことを指します。例えば、.className { color: red; font-size: 14px; } のような形式で書かれます。ここで「.className」はセレクタ（適用する要素を指定）、color: red; と font-size: 14px; はプロパティ（適用するスタイル）です。
Style（スタイル）：ここでは上記で作成された構造体どうしを紐づけしてあげる作業をしています。どのスタイルがどのHTMLの要素に適応されるのかをマッチングしてあげる作業です。ここでマッチングされた大きなツリーのことを、Render Treeと呼びます。そのTreeの葉っぱの要素のことをRendererと呼びます。
Layout（レイアウト）：この工程では、それぞれの要素の位置と大きさの計算を行います。生成された構造体をブラウザのどこに配置し、どんな大きさで描画するのかを決定します。そこで生成された構造体のことをLayout Treeと呼びます。
Paint（ペイント）：この工程では、Layoutで作られたLayout Treeに対して、描画する要素の順番を決めます。ペイントの工程で作られる構造体のことをPaint Recordsと呼びます。
Composite（コンポジット）：この工程では、レイヤーを一つのビジュアルとして合成する作業を行います。それによって最終的なページが形成されます。これは、ペイントされた各レイヤーを重ね合わせ、最終的にユーザーに表示されるウェブページを作成するプロセスです。

◆コラム：レンダリングエンジンの違い

レンダリングエンジンはそれぞれのブラウザごとに異なります。これは、各ブラウザがウェブページを解析し、表示するために使用する独自のソフトウェアコンポーネントです。ブラウザが独自のエンジンを持っているため、同じウェブページでもブラウザによって表示が異なることがあります。

ブラウザ名	レンダリングエンジン	URL
Safari	Webkit	WebKitの詳細
Chrome	Blink	Blinkの詳細
Firefox	Gecko	Geckoの詳細
Edge	EdgeHTML	EdgeHTMLの詳細

ブラウザレンダリングの理解がウェブ開発において重要な理由は、特にパフォーマンスとユーザーエクスペリエンスの観点から重要です。以下のようなシナリオでその知識が役立ちます。

ウェブゲームの開発：アプリケーションで開発したゲームをウェブ環境でも適応させる際、ブラウザごとに異なるレンダリングエンジンに対応する必要があります。
大規模ウェブサービス：TwitterやInstagramのようなサービスでは、高速かつヌルヌルな操作性、効率的なリソース使用、バグの最小化など、多くの要素を考慮する必要があり、ブラウザレンダリングの理解が必要です。

各ブラウザの違いを理解し、それぞれに最適な設計や開発を行うことが、ハイパフォーマンスなウェブサービスを作るための鍵になるっぽいです。

ブラウザレンダリングを知ることは、ウェブサービスでハイパフォーマンスを出すことに繋がると思いますので、上記で大雑把に理解できたら、より詳細な記事を参照することをおすすめします。

また理解したことがあればアウトプットします。

◆参照URL

フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | Tech Blog

ブラウザの仕組み | Articles | web.dev

ブラウザのレイアウトとペイントを知る

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

Webページがブラウザに表示されるまでに何が起こるのか？

レンダリングする | ちいさな Web ブラウザを作ってみよう