ここでは、RenderingNG のコンポーネント ピースの設定方法と、レンダリング パイプラインがどのように流れるかについて説明します。
レンダリングのタスクは、上位レベルから順に次のとおりです。
- 画面上のピクセルにコンテンツをレンダリングします。
- コンテンツの状態を変化させる視覚効果をアニメーション化します。
- 入力に応じてスクロールします。
- デベロッパー スクリプトやその他のサブシステムが応答できるように、適切な場所に入力を転送します。
レンダリングするコンテンツは、各ブラウザタブのフレームのツリーとブラウザ インターフェースです。また、タッチスクリーン、マウス、キーボードなどのハードウェア デバイスからの未加工の入力イベントのストリーミング。
各フレームには以下が含まれます。
- DOM の状態
- CSS
- キャンバス
- 画像、動画、フォント、SVG などの外部リソース
フレームは、HTML ドキュメントとその URL です。ブラウザのタブに読み込まれたウェブページには、トップレベルのフレーム、トップレベルのドキュメントに含まれる iframe の各子フレーム、およびその再帰的な iframe 子孫があります。
視覚効果は、スクロール、変換、クリップ、フィルタ、不透明度、ブレンドなど、ビットマップに適用されるグラフィック オペレーションです。
アーキテクチャ コンポーネント
RenderingNG では、これらのタスクは複数のステージとコード コンポーネントに論理的に分割されます。コンポーネントは、さまざまな CPU プロセス、スレッド、およびそれらのスレッド内のサブコンポーネントに配置されます。これらは、すべてのウェブ コンテンツの信頼性、スケーラブルなパフォーマンス、拡張性を実現するうえで重要な役割を果たします。
レンダリング パイプラインの構造
レンダリングはパイプラインで行われ、その過程で複数のステージとアーティファクトが作成されます。各ステージは、レンダリング内で 1 つの明確に定義されたタスクを実行するコードを表します。アーティファクトは、ステージの入出力であるデータ構造です。
ステージは次のとおりです。
- アニメーション: 宣言型タイムラインに基づいて、計算されたスタイルを変更し、プロパティ ツリーを時間の経過とともに変更します。
- スタイル: CSS を DOM に適用し、計算スタイルを作成します。
- レイアウト: 画面上の DOM 要素のサイズと位置を決定し、不変のフラグメント ツリーを作成します。
- プリペイント: プロパティ ツリーを計算し、必要に応じて既存のディスプレイ リストと GPU テクスチャ タイルを無効にします。
- スクロール: プロパティ ツリーを変更して、ドキュメントとスクロール可能な DOM 要素のスクロール オフセットを更新します。
- ペイント: DOM から GPU テクスチャ タイルをラスタ化する方法を記述するディスプレイ リストを計算します。
- commit: プロパティ ツリーとディスプレイ リストをコンポジタ スレッドにコピーします。
- レイヤ化: ディスプレイ リストを合成レイヤリストに分割して、独立したラスタライズとアニメーションを実現します。
- ラスター、デコード、ペイント ワークレット: ディスプレイ リスト、エンコードされた画像、ペイント ワークレット コードをそれぞれ GPU テクスチャ タイルに変換します。
- 有効化: GPU タイルを画面に描画して配置する方法と、視覚効果を示すコンポジタ フレームを作成します。
- 集計: すべての可視コンポジタ フレームのコンポジタ フレームを 1 つのグローバル コンポジタ フレームに結合します。
- 描画: GPU で集約されたコンポジタ フレームを実行して、画面上のピクセルを作成します。
レンダリング パイプラインのステージは、必要ない場合はスキップできます。たとえば、視覚効果やスクロールのアニメーションでは、レイアウト、プリペイント、ペイントをスキップできます。そのため、図ではアニメーションとスクロールが黄色と緑のドットで示されています。視覚効果のためにレイアウト、プリペイント、ペイントをスキップできる場合は、コンポジタ スレッドで完全に実行し、メインスレッドをスキップできます。
ブラウザ UI のレンダリングはここでは直接示されていませんが、この同じパイプラインの簡素化バージョンと考えることができます（実際、その実装ではコードの多くを共有しています）。動画（直接描画されない）は通常、フレームを GPU テクスチャ タイルに変換し、コンポーザ フレームと描画ステップに接続する独立したコードでレンダリングされます。
プロセスとスレッドの構造
CPU プロセス
複数の CPU プロセスを使用すると、サイト間およびブラウザの状態からのパフォーマンスとセキュリティの分離、GPU ハードウェアからの安定性とセキュリティの分離を実現できます。