Chris Harrelson
您將瞭解 RenderingNG 元件片段的設定方式，以及轉譯管道如何流經這些元件。
從最高層級開始，轉譯工作如下：
- 將內容轉譯為螢幕上的像素。
- 為內容加入視覺效果動畫，讓內容從一個狀態變換到另一個狀態。
- 根據輸入內容捲動。
- 將輸入內容有效地引導至正確位置，以便開發人員指令碼和其他子系統做出回應。
要轉譯的內容是每個瀏覽器分頁的框架樹狀結構，以及瀏覽器介面。以及來自觸控螢幕、滑鼠、鍵盤和其他硬體裝置的原始輸入事件串流。
每個影格都包含：
- DOM 狀態
- CSS
- 面板
- 外部資源，例如圖片、影片、字型和 SVG
頁框是 HTML 文件和網址的組合。在瀏覽器分頁中載入的網頁含有頂層框架、頂層文件中每個 iframe 的子框架，以及遞迴 iframe 後代。
視覺效果是指套用至位圖的圖形運算，例如捲動、轉換、剪輯、濾鏡、不透明度或混合。
架構元件
在 RenderingNG 中，這些工作會在邏輯上分散到多個階段和程式碼元件。這些元件最終會出現在各種 CPU 程序、執行緒，以及這些執行緒中的子元件。每項技術都扮演著重要角色，可為所有網站內容提供可靠性、可擴充的效能和可擴充性。
算繪管道結構
算繪會在管道中進行，過程中會產生多個階段和構件。每個階段都代表在轉譯期間執行一項明確定義的工作的程式碼。這些構件是資料結構，可做為階段的輸入或輸出內容。
這些階段如下：
- Animate：根據宣告式時間表，變更計算的樣式，並隨時間變更屬性樹狀結構。
- 樣式：將 CSS 套用至 DOM，並建立計算樣式。
- 版面配置：決定 DOM 元素在螢幕上的大小和位置，並建立不可變動的片段樹狀結構。
- 預先繪製：計算屬性樹狀結構，並視需要使任何現有的顯示清單和 GPU 紋理圖塊失效。
- 捲動：透過變更屬性樹狀結構，更新文件和可捲動的 DOM 元素的捲動偏移量。
- 繪圖：計算顯示清單，說明如何從 DOM 將 GPU 紋理圖塊轉為點陣圖。
- 提交：將屬性樹狀結構和顯示清單複製到合成器執行緒。
- 分層：將顯示清單分割成合成的圖層清單，以便獨立進行轉譯和動畫處理。
- 光柵、解碼和繪圖工作區：將顯示清單、已編碼圖片和繪圖工作區程式碼分別轉換為 GPU 紋理圖塊。
- 啟用：建立合成器影格，代表如何在畫面上繪製及定位 GPU 圖塊，以及任何視覺效果。
- 匯總：將所有可見合成器影格合併為單一全域合成器影格。
- 繪製：在 GPU 上執行匯總的轉譯器影格，以便在畫面上建立像素。
您可以略過不需要的轉譯管道階段。舉例來說，視覺效果和捲動的動畫可以略過版面配置、預先繪製和繪製。因此，動畫和捲動會在圖表中以黃色和綠色圓點標示。如果版面配置、預先繪製和繪製作業可為視覺效果略過，則可完全在轉譯器執行緒上執行，並略過主執行緒。
這裡並未直接說明瀏覽器 UI 算繪作業，但可以將其視為這項管道的簡化版本 (實際上，其實作會共用大部分程式碼)。影片 (同樣不會直接顯示) 通常會使用獨立程式碼進行算繪，該程式碼會將影格解碼為 GPU 紋理圖塊，然後插入合成器影格和繪製步驟。
程序和執行緒結構
CPU 程序
使用多個 CPU 程序可在網站之間和瀏覽器狀態中實現效能和安全性隔離，並從 GPU 硬體實現穩定性和安全性隔離。