レンダリングエンジンとは
rendering engine（レンダリング・エンジン）は、HTMLとCSSを解析し、画面上の配置や描画を行うソフトウェア部品です。文書構造とスタイル規則から、各要素の大きさ・位置・重なり・色・画像等を決め、最終的な画素へ変換します。
この変換は一度きりではありません。ブラウザーウィンドウの幅、フォント、画像、アニメーション、利用者入力、スクリプトによるDOM変更に応じて、必要な範囲のスタイル、レイアウト、描画、合成を更新します。
レンダリングは「HTMLを上から順に絵へ写す」だけの処理ではありません。DOM、CSSカスケード、ボックスの位置と寸法、描画順、レイヤー合成という異なる中間表現を段階的に作ります。
画素までの七段階
HTMLトークンをDOMへ、スタイルシート規則を解析可能な形へ変換します。
オリジン、優先度、層、詳細度、ソース順序等で宣言を解決します。
継承、相対値、既定値を解決し、計算済みスタイルを作ります。
通常フロー、フレックス、グリッド、位置指定、行の折り返し、固有サイズを解決します。
背景、枠線、テキスト、画像、影などを、重なりの規則に従って並べます。
ベクター、グリフ、画像を端末の解像度や拡大率に合わせてラスター化します。
変形、切り抜き、不透明度、スクロール位置を使って描画面を重ねます。
DOMと画面上のボックスは一対一ではない
display: noneの要素はDOMにあってもレイアウトボックスを作りません。擬似要素はDOMノードなしに描画対象を作り、テキストノードは行折返しで複数断片へ分かれます。
表、ルビ、一覧マーカー、匿名ボックス等では、レイアウト用木構造がDOMをそのまま複製しません。開発ツールのDOM表示とレイアウトオーバーレイが異なるのはこのためです。
カスケードは「最後に書いたCSSが常に勝つ」ではない
ユーザーエージェントスタイルシート、利用者スタイル、作成者スタイル、アニメーション・トランジション、!important、カスケードレイヤー、適用範囲、詳細度、ソース順序を規則に従って比較します。最後に書かれた宣言が勝つのは、それより前の優先条件が同じ場合です。
計算済みスタイルは継承と相対値を解決しますが、パーセント指定の実寸や行の折り返しのように、レイアウト段階で決まる値もあります。スタイル計算と位置・寸法の計算を分けて考えます。
レイアウトは親子で影響が伝わる
要素の幅が変わると子要素の折り返しが変わり、高さが変化して後続要素の位置へ影響します。Webフォントの読み込み、画像の固有サイズ、スクロールバー、ビューポート、書字方向も位置と寸法を変えます。
エンジンは再計算対象フラグや無効化設定で影響範囲を絞りますが、DOMを交互に読んで書くスクリプトは強制レイアウトを繰り返すことがあります。読み取りをまとめ、書き込みをまとめると無駄を減らせます。
描画、ラスター、合成は同じではない
描画は「何をどの順に描くか」というレコードを作り、ラスターはそれを画素タイルへ変換します。合成は独立描画面や層をGPU等で位置付け、最終フレームを作ります。
transformやopacityのアニメーションは既存層を合成するだけで済む場合がありますが、必ずGPUだけになる保証はありません。層を増やしすぎればメモリーとアップロードコストが増えます。
JavaScriptエンジンとGPUは隣接する別構成要素
JavaScriptエンジンはスクリプトを実行してDOM・スタイルを変更し、レンダリング処理経路の更新を起こします。GPUはラスターや合成を支援しますが、HTML意味やCSS連鎖を決める主体ではありません。
レンダリングエンジンは、文書構造をスタイル付きレイアウトへ変換し、描画記録・画素・層を経て画面へ出す構成要素です。各段階を分けると、崩れや遅さの原因を追えます。
BlinkがDOM treeを作り、style・layout・paintを処理するWeb rendering engineであること：Chrome for Developers「Blink」。WebCoreのrendering tree、layout、paint architecture：WebKit Documentation「Render Tree」