ブラウザが要求したドキュメントコンテンツをネットワークから取得し、画面に描画するところをざっくりと。
レンダリングエンジンの仕事は要求されたコンテンツをブラウザの画面に出力すること。
例えば以下がレンダリングエンジン
Webkitはオープンソースです。
要求したドキュメントのコンテンツをネットワーキングレイヤから取得(8KB単位)
HTMLのパース(解析)
↓
DOMツリー作成,CSSOM作成
↓
Render tree作成
色、サイズなどの情報が含まれる矩形
矩形には画面に表示される正しい順序で並んでいる
↓
Render treeレイアウト
画面に表示される正確な座標が各ノードに割り当てられる
↓
Render treeペインティング
描画
HTMLドキュメントや、HTML要素とJavaScriptなどの外部リソースとのインターフェースをオブジェクトで表現したものです。
このHTMLは以下のDOMツリーが生成される
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
CSSのツリー構造を保持する仕組み。
レンダーツリーはDOMツリーとCSSOMツリーを使用して、コンテンツを正しい順序で描画できるようにするためのツリーで、「実際に表示される」コンテンツであるレンダラーの構造を示したツリーです。
視覚的ではないDOM要素はレンダーツリーには含まれません。(
デバイスのViewportにおける位置とサイズを決定します。
各オブジェクトの正確なサイズと位置を知る為、ブラウザはレンダーツリーのルートから各ノードを調べ、ページ上の各オブジェクトの形状を計算します。
レンダーツリーをもとに画面に描画します。