RenderingNG

準備好迎接新一代的網頁內容

Chris Harrelson

注意：本文是 Chromium 轉譯引擎系列文章的一部分。歡迎觀看本系列其他影片瞭解詳情。

我是 Blink 中轉譯 (將 HTML 和 CSS 轉換為像素) 的工程部門主管 Chris Harrelson。過去八年來，我一直致力於在網路上提供轉譯效能，並致力實現個人目標，致力提供更迅速、更輕鬆且可靠的優質網路使用者體驗。很開心能和你分享在這段期間完成了哪些改善措施，打造出全新的先進 Chromium 算繪引擎架構。 想達成這個目標，已成為無比的愛努力 希望您喜歡！

2021 年，我們將大幅完成這個架構的設計、建立及運送程序。將其稱為「RenderingNG」，因為它是真正的新一代轉譯架構，效能遠勝以往。轉譯功能已推出至少八年，代表許多專門 Chromium 開發人員的集體成果。它展現了強大的潛力，對新一代快速、流暢、可靠、回應式和互動式網頁內容的帶來極大潛能。這只是一個基準，我認為開發人員可使用的所有網頁轉譯引擎都必須符合新的最低標準。

RenderingNG

本網誌文章是系列文章的第一篇，會說明我們建構的內容、建構原因及運作方式。在第一篇貼文中，我一開始選擇的是：

• 我們的北極星目標。
• 成功金字塔：制定工作原則的原則，以及實際應用原則的範例
• 轉譯 NG 能實現的功能。
• 概略說明 RenderingNG 的主要專案元件。

北極星

至於 RenderingNG 的明確目標，就是瀏覽器引擎實作項目和其算繪 API 的豐富性，不應將網路使用者體驗的限制因素列為限制因素。

您不需要擔心瀏覽器錯誤導致功能不穩定或網站的轉譯功能故障。

不會出現神秘的效能驟降。您也不需要解決缺少內建功能的問題。

應該就能正常運作。

我認為轉譯 NG 正是朝這個北極星目標邁進的重要一步。 在轉譯 NG 之前，我們可以 (且確實) 新增算繪功能並提升效能，但難以確保這些功能可為開發人員的可靠性，而且在效能上有許多低點。現在，我們有一個架構能夠有系統地處理許多這類問題，還能解除封鎖過去不可能實現的進階功能。簡要說明如下：

• 具備跨平台、裝置和作業系統的緊密核心功能。
• 具備可預測且可靠的效能。
• 盡可能提高硬體功能 (核心、GPU、螢幕解析度、刷新率、低階光柵 API) 用量。
• 只執行顯示可見內容所需的工作。
• 內建支援常見的視覺設計、動畫和互動設計模式。
• 提供開發人員 API，輕鬆管理算繪費用。
• 為開發人員外掛程式提供轉譯管道擴充點。
• 將所有內容最佳化，包括 HTML、CSS、2D Canvas、3D Canvas、圖片、影片和字型。

與其他瀏覽器轉譯引擎比較

Gecko 和 Webkit 也導入了這些網誌文章中所述的大部分架構功能，在某些情況下甚至還導入 Chromium 前的這些功能。太棒了！儘管任一瀏覽器越快、可靠，確實能夠慶祝，而且確實帶來實際影響，但最終的最終目標是讓所有瀏覽器採用基準，讓開發人員能放心使用。

成功金字塔

我的理念是，想要成功，第一批要達到可靠性、可擴充的效能，以及最後可擴充的擴充性。

就像現實生活中的金字塔一樣，每個關卡都有一個必然的級別，能讓你享有更高等級的更高等級。

可靠性

如果要提供豐富且複雜的使用者體驗，我們首先需要一個穩固的平台。核心功能與支線必須運作正常，並隨著時間的推移而持續運作。這些功能同樣必須妥善組成，而且沒有奇怪的極端情況或錯誤。

因此，可靠性是轉譯 NG 中最重要的單一部分。而可靠性是良好的測試 品質意見回饋循環、指標和軟體設計模式

為解釋可靠性的重要性首先，我們建構了對系統的深入知識，透過錯誤報告找出弱點並加以修正、啟動全面的測試，並瞭解網站的效能需求和 Chromium 效能限制。接著，我們仔細並逐步設計及推出重要的設計模式和資料結構。 但現在我們只準備好針對回應式設計、擴充性和自訂轉譯功能，準備真正的新一代基本功能。

這並不是說隨著 Chromium 的進展。 事實上，相反地！ 隨著我們逐步重構及推出每個改善項目，多年來，可靠性和效能穩定持續成長。

測試與指標

過去 8 年來，我們新增了數萬個單元、效能和整合測試。此外，我們也開發了全方位的指標，評估 Chromium 的算繪行為在本機測試、效能基準和實際網站上的實際運作情形，包含實際使用者和裝置。

但無論轉譯 NG 有多大 (或其他瀏覽器的轉譯引擎)，如果瀏覽器之間存在大量錯誤或行為差異，就很難針對網頁進行開發。為解決這個問題，我們也會充分運用網路平台測試。每項測試都會驗證所有瀏覽器應該設法通過的網路平台使用模式。 我們也會密切監控指標，以便持續進行更多測試和提高核心相容性。

網路平台測試是一項協同合作的工作。舉例來說，Chromium 工程師只對 CSS 功能進行了大約 10% 的測試，其他瀏覽器廠商、獨立貢獻者和規格作者都會貢獻剩下的部分。要創造一個村莊，才能打造互通性的網路！

自 wpt.fyi/compat2021 起，評估核心功能的 WPT 通過率

良好軟體設計模式

不過，如果程式碼容易理解，且設計能盡量減少錯誤發生的可能性，那麼可靠的軟體推送品質會更加容易。我們將在後續的網誌文章中詳細說明 RenderingNG 的軟體設計。

可擴充的效能

無論是在速度、記憶體和耗電量方面，都能獲得出色效能，是轉譯 NG 接下來最重要的一環。我們希望與所有網站的互動能夠順暢、回應，同時不能犧牲裝置的穩定性。

但我們不只是想獲得效能，也想要擴充式效能，這種架構在低端和高階機器上都能穩定可靠地在各種 OS 平台上順利運作。我稱之為「向上擴充」，善加利用硬體裝置可達到的所有成果，並且縮減資源，以便提高效率，並在需要時減少系統需求。

為達到這個目標，我們必須盡可能利用快取、效能隔離和 GPU 硬體加速功能。讓我們逐一思考。為求具體，我們來想想看每個元素對網頁單次互動的成效有什麼影響：捲動。

快取

在網路等動態的互動式 UI 平台中，快取是大幅提升效能的單一重要方法。瀏覽器最著名的快取類型是 HTTP 快取，但轉譯作業也有許多快取。捲動時最重要的快取是快取 GPU 紋理和顯示清單，這可讓使用者以極快的速度捲動，同時盡量降低電池耗電量，並在各種裝置上正常運作。

快取有助於電池續航力和動畫影格更新率進行捲動，但更重要的是，此模式可以阻絕主執行緒的效能隔離。

效能隔離

在新型的桌上型電腦中，您不必擔心背景應用程式會拖慢目前使用的應用程式。這是因為預先執行多工處理的緣故，它會隔離效能，也就是確保個別工作不會拖慢彼此的速度。

在網頁上，捲動效能隔離的最佳例子就是捲動。即使網站上含有大量 JavaScript 速度緩慢的網站，捲動作業也可能非常順暢，因為這項作業是在不同的執行緒中執行，不必依賴 JavaScript 和版面配置執行緒。我們投入了大量心力開發轉譯 NG，藉此確保所有可能的捲動都能透過快取建立，不再只是顯示清單，能夠用於更複雜的情況。例如代表固定和固定位置元素的程式碼、被動事件監聽器，以及高品質文字算繪。

GPU 加速

GPU 可大幅提升螢幕產生像素和繪圖的速度，而且在許多情況下，每個像素都可以與其他像素平行繪製，進而使速度大幅增加。轉譯 NG 的一大要素是 GPU 光柵，並在任何位置繪製。這會在所有平台和所有裝置上使用 GPU，以超快速顯示網頁內容及建立動畫效果。 這點在低階裝置或非常高階裝置上特別重要，因為這類裝置的 GPU 通常比裝置的其他部分更多。

擴充性：適合這項工作的合適工具

我們一旦取得可靠性和可擴充的效能後，就能開始在眾多工具的基礎上進行建構，協助開發人員擴充 HTML、CSS 和 Canvas 的內建部分，並且不犧牲效能和可靠性。

包括內建和 JavaScript 公開 API，可用於回應式設計、漸進式轉譯、流暢度和回應，以及執行緒轉譯等進階用途。

下列由 Chromium 開發的開放式 Web API 是由 RenderingNG 所開發，但先前被認定為無法使用。

所有 API 都是以開放規格為基礎開發而成，並與開放式網路合作夥伴攜手合作，工程師、專家和網頁程式開發人員皆有此經驗。在後續的網誌文章中，我們會深入介紹這些方法，並說明轉譯 NG 如何讓這些結果盡善盡美。

• content-visibility：允許網站輕鬆避免轉譯畫面外內容的工作，並讓網站針對未顯示的單一頁面應用程式檢視畫面進行快取轉譯。
• OffscreenCanvas：允許畫布算繪 (2D Canvas API 和 WebGL) 在各自的執行緒上執行，帶來可靠的效能。這項專案也是網路的另一個重要里程碑，也是第一個網路 API，可讓 JavaScript (或 WebAssembly!) 透過多個執行緒轉譯單一網頁文件。
• 容器查詢：允許單一元件自行安排版面配置，解除整個隨插即用元件 (目前為實驗性實作) 的干擾。
• 來源隔離：允許網站選擇加強 iframe 之間的效能隔離。
• 外部執行緒繪製工作小程式：讓開發人員利用在合成器執行緒上執行的程式碼，擴充元素的繪製方式。

除了明確的網路 API 外，RenderNG 還可為我們提供多項重要「自動功能」，造福所有網站：

• 網站隔離：將跨來源 iframe 放入不同的 CPU 程序，提供更好的安全性與效能隔離。
• Vulkan、D3D12 和 Metal：利用低階 API，使用 GPU 比 OpenGL 更有效率。
• 更多合成動畫：SVG，背景顏色。

我們很高興對「轉譯 NG」功能解除封鎖的其他即將推出功能，包括：

• 捲動連結動畫。
• 隱藏、搜尋及可存取的 DOM。
• 共用元素轉換。
• 自訂版面配置。
• 離主執行緒合成；將執行緒分離和合成。

構成 RenderingNG 的主要專案

以下是 RenderingNG 的主要專案清單。接下來的網誌文章也將深入探討每篇報導。

CompositeAfterPaint

從風格、版面配置和繪製作業衍生的區隔，可提升可靠性和可預測的效能、提高總處理量，並且在不犧牲效能的情況下，使用較少的記憶體。它於 2014 年開始，將在今年結束。

年	進度
2015	飛船顯示清單。
2017	運送新的無效作業。
2018	飛船地產樹，第 1 部分
2019	飛船地產樹，第 2 部分
2021	已完成運送專案。

LayoutNG

重新編寫所有版面配置演算法，大幅改善穩定性和可預測的效能。它自 2016 年開始 預計在今年結束

年	進度
2019	飛船區塊流程。
2020	飛船展示，編輯。
2021	運送其他商品。

BlinkNG

有系統地清理 Blink 轉譯引擎，並將這類引擎重構為簡潔分離的管道階段。這可提高快取成效、提高可靠性，以及重新預訂或延遲轉譯功能，例如內容瀏覽權限和容器查詢。這項技術自 2014 年開始，至今不斷進步。並將於 2021 年完成。

各處的 GPU 加速功能

長期致力於在所有平台上推出 GPU 光柵化、繪圖和動畫。GPU 加速功能可大幅加快大部分內容的速度，因為系統可以平行處理每個像素。這個方法也能有效改善低階裝置的效能，因為這些裝置通常都搭載 GPU。並於 2014 年開始運作，並於 2020 年完成。

年	進度
2014	支援 Canvas。已在 Android 上提供選擇加入內容。
2016	於 Mac 出貨。
2017	超過 60% 的 Android 網頁瀏覽次數使用 GPU。
2018	適用於 Windows、ChromeOS 和 Android Go。
2019	執行緒 GPU 光柵化。
2020	寄送剩餘的 Android 內容。

串連捲動、動畫和解碼

長期致力於將所有捲動、非版面配置啟動動畫，以及圖片解碼從主執行緒移出。這項計畫於 2011 年開始至今，

年	進度
2011	初步支援執行緒捲動和動畫。
2015	壓縮圖層
2016	通用溢位捲動。
2017	合成器執行緒上的圖片解碼。
2018	合成器執行緒上的圖片動畫。
2020	一律合併固定位置。
2021	百分比轉換動畫、SVG 動畫。

維茲

Chromium 的集中式光柵和繪圖程序可提高處理量、最佳化記憶體，並實現硬體功能的最佳運用。此外，網頁開發人員比較不容易察覺這個做法，但對使用者來說卻比較明顯，例如解除封鎖網站隔離功能，以及將算繪管道與瀏覽器 UI 算繪作業分離。這項計畫於 2016 年開始，並於 2021 年完成。

年	進度
2018	OOP-R 搭載 Android、Mac 和 Windows 裝置。
2019	OOP-D 已出貨。OOP-R 運送至任何地方 (畫布除外)。SkiaRenderer 在 Linux 上推出，
2020	SkiaRenderer 是搭載 Windows 和 Android 系統，Android 上的 Vulkan 產品。
2021	SkiaRenderer 推出在 Mac (即將搭載 ChromeOS，不久之後也會推出)。

上圖字詞的定義：

OOP-D

獨立程序顯示合成器。顯示組合與 OS 合成器的相同活動類型。非處理程序是指在 Viz 程序中執行，而不是在網頁的轉譯程序或瀏覽器 UI 程序中執行。

OOP-R

獨立於製程光柵。光柵正在將顯示清單轉換為像素。非處理程序是指在 Viz 程序中執行，而不是在網頁的轉譯程序中執行。

SkiaRenderer

全新的螢幕合成器實作項目，可支援在各種不同的基礎 GPU API 上執行，例如 Vulkan、D3D12 或 Metal。

執行緒加速和加速畫布算繪

這項專案能夠放置凸顯 OffscreenCanvas 的建築元素。這項計畫於 2015 年開始，並於 2021 年結束。

年	進度
2018	船艦外畫布。
2019	運送 ImageBitmapRenderingContext。
2021	飛船 OOP-R。

VideoNG

長期致力於在網路上提供有效、可靠且高品質的影片播放服務。

年	進度
2014	導入以 Mojo 為基礎的轉譯架構。
2015	推出專案 Butter 和影片重疊功能，讓影片算繪作業更順暢。
2016	推送整合式 Android 與電腦解碼與算繪管道。
2017	推出 HDR 和經過色彩校正的影片轉譯功能。
2018	出貨版 Mojo 影片解碼管道。
2019	提供以途徑為基礎的視訊轉譯管道。
2021	推出 ChromeOS 的 4K 受保護內容轉譯支援。

上圖字詞的定義：

莫霍

Chromium 的新一代 IPC 子系統。

途徑

這是 Viz 專案設計中的概念，

結論

網頁和 Chromium 轉譯速度大幅提升，我真的非常開心。我們能夠以穩健的基礎為基礎來建構內容，因此接下來幾年，我預期公司將繼續加快腳步。

敬請密切關注後續的許多文章，其中將更深入探討新架構、架構的運作方式和運作方式。

Eirik Solheim 在 Unsplash 上提供的裝置相片

插圖：Una Kravets。