ブラウザのレンダリングエンジンについて

ブラウザが要求したドキュメントコンテンツをネットワークから取得し、画面に描画するところをざっくりと。

レンダリングエンジンの役割

レンダリングエンジンの仕事は要求されたコンテンツをブラウザの画面に出力すること。

例えば以下がレンダリングエンジン

  • Firefox -> Gecko
  • safari,chrome -> Webkit

Webkitはオープンソースです。

レンダリングエンジンのメインフロー

要求したドキュメントのコンテンツをネットワーキングレイヤから取得（8KB単位）

HTMLのパース（解析）
↓
DOMツリー作成,CSSOM作成
↓
Render tree作成
色、サイズなどの情報が含まれる矩形 矩形には画面に表示される正しい順序で並んでいる
↓
Render treeレイアウト
画面に表示される正確な座標が各ノードに割り当てられる
↓
Render treeペインティング
描画

2019 02 20 11 42 01

DOM(Document Object Model)

HTMLドキュメントや、HTML要素とJavaScriptなどの外部リソースとのインターフェースをオブジェクトで表現したものです。

このHTMLは以下のDOMツリーが生成される

<html>
<body>
<p>
    Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>

2019 02 20 11 51 48

CSSOMツリー（CSS Object Model）

CSSのツリー構造を保持する仕組み。

レンダーツリー

レンダーツリーはDOMツリーとCSSOMツリーを使用して、コンテンツを正しい順序で描画できるようにするためのツリーで、「実際に表示される」コンテンツであるレンダラーの構造を示したツリーです。
視覚的ではないDOM要素はレンダーツリーには含まれません。（）
また、画面で見えるオブジェクトのみdisplay属性にnoneが指定されている要素もツリーにはふくまれません。

レンダーツリーのレイアウト

デバイスのViewportにおける位置とサイズを決定します。
各オブジェクトの正確なサイズと位置を知る為、ブラウザはレンダーツリーのルートから各ノードを調べ、ページ上の各オブジェクトの形状を計算します。

ペインティング

レンダーツリーをもとに画面に描画します。