😺
ブラウザのレンダリングとは（概要）
レンダリングとは
レンダリング（rendering）は、データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。
https://ja.wikipedia.org/wiki/レンダリング_(コンピュータ)
文脈によっていろんな解釈ができそうですが、
Web ブラウザにおけるレンダリングとは、
「HTML などのリソースをブラウザの画面上に表示すること」です。
まずは、ブラウザの構成から見ていきましょう
ブラウザの構成要素
ブラウザの主な構成要素は下記になります。
- ユーザー インターフェイス: これには、アドレス バー、戻る/進むボタン、ブックマーク メニューなどが含まれます。要求されたページが表示されるウィンドウを除く、ブラウザーのすべての部分が表示されます。
- ブラウザ エンジン: 画面表示以外のブラウザの機能を司る部分。
- レンダリング エンジン: 要求されたコンテンツの表示を担当します。たとえば、要求されたコンテンツが HTML の場合、レンダリング エンジンは HTML と CSS を解析し、解析されたコンテンツを画面に表示します。
- ネットワーキング: HTTP 要求などのネットワーク呼び出しを行います。
- UI バックエンド: window などの基本的なウィジェットの描画に使用されます。
- JavaScript インタープリター。JavaScript コードの解析と実行に使用されます。
- データストレージ。これは永続層です。ブラウザーは、Cookie など、あらゆる種類のデータをローカルに保存する必要がある場合があります。ブラウザは、localStorage、IndexedDB、WebSQL、FileSystem などのストレージ メカニズムもサポートしています。
今回はレンダリングについてなので、画面にコンテンツを表示するためのレンダリングエンジンについて確認します。
レンダリングエンジンは何をしているのか？
基本的な流れが下記です。
- パース：HTML CSS を解析（パース）して DOM ツリーを作成します。
- レンダーツリー構築：それぞれで作成した DOM ツリーを重ね合わせてレンダーツリーを構築します
- レイアウト：ブラウザの画面幅やスクロール位置を意識し、画面上にどの部分をどのように表示するかを計算します
- ペインティング：Render Tree を画面上のピクセルに変換しをブラウザ画面上に結果を表示します。
DOM ツリーは PC のブラウザ用のメモリ空間の上に構築されています。
以上の流れでレンダリングが行われているのですね、
ざっくりですが、理解できました。
Discussion