圖形處理單元 （GPU） 越來越多地包含在 SoC 中，驅動嵌入式系統和連接的消費電子產品。GPU 可以被認為是適合顯示渲染的額外處理器，并且用戶界面通常構成整體產品質量的主要指標，因此最好盡可能地利用它是有意義的。消費電子產品通常依賴 HTML 瀏覽器來提供構建 UI 和其他應用程序的表示層。在這里，我將看看一些瀏覽器如何使用 GPU，并將其與更集中的方法進行對比。

每當頁面的任何部分發生變化時，瀏覽器都需要重新繪制屏幕，同時最大限度地減少 CPU 的工作量。他們通過跟蹤屏幕上所有需要更新的區域來做到這一點，然后僅重新繪制這些區域以及與它們重疊的任何其他屏幕元素的部分。

大多數瀏覽器使用 CPU 將這些元素的表示繪制成像素圖。通常，要顯示的下一幀是通過獲取前一幀并覆蓋更改來創建的，如圖 1 所示。如果可用，GPU 用于將前一幀和部分像素圖數據組合到下一幀中，從而釋放 CPU其他任務。

為了提高性能，許多瀏覽器使用加速合成，這是一種將頁面中不交互的部分組合在單獨的層中并獨立操作這些部分的技術。這種技術本質上是內存和 CPU 使用之間的權衡。當發生任何變化時，GPU 會將代表每一層的像素圖合成到幀緩沖區中，但 CPU 仍用于繪制這些像素圖的內容。如圖 2 所示，圖層的組合始終覆蓋整個屏幕，因此無需訪問前一幀的副本。

使用 GPU

盡管 GPU 提供了相當大的靈活性，但瀏覽器在接受其全部優勢方面的速度相對較慢。瀏覽器設計的相互關聯性使得重新設計核心組件（例如渲染）以利用截然不同的硬件功能變得復雜。因此，大多數瀏覽器設計仍然將 GPU 視為增強的 blitter，并將其主要用于加速合成。

一段時間以來，瀏覽器提供商一直在尋求超越簡單的“GPU 作為一個 blitter”場景。使用 GPU 而不是 CPU 來處理繪畫被稱為 GPU 光柵化。一些瀏覽器包括使用擴展圖形庫啟用 GPU 光柵化的選項，這些圖形庫將繪畫任務傳遞給 GPU。這些庫滿足廣泛的使用場景，因此提供靈活的通用 API。不幸的是，這些 API 的靈活性對于 HTML 所需的用例來說過于復雜，這會導致 GPU 的使用欠佳，從而導致渲染性能下降。

GPU 性能來自于能夠有效地執行大量類似的批處理操作，為管道提供數據以確保它們得到最佳填充。這些擴展圖形庫提供的靈活性通常會導致無法保持 GPU 的管道滿載，從而顯著降低其效率。

為了充分利用 GPU，它的管道必須保持滿載；僅關注 HTML 的要求并將其與 GPU 功能相匹配是關鍵。HTML 的特性非常適合 GPU 加速。元素本質上是矩形的，自然網格對齊，并且很少使用抗鋸齒。由于 GPU 處理三角形，因此每個矩形 HTML 元素可以使用兩個。HTML 所需的圖形基元集也相對較小，這意味著特定于 HTML 的 GPU 加速圖形 API 是一個現實的目標。

GPU 光柵化過程與 CPU 完全異步發生。這意味著 CPU 可以在繪制任務完成之前開始處理腳本和布局等后續任務。GPU 光柵化也改變了優化獎勵平衡。在 CPU 上，性能優化是通過僅更新屏幕中已更改的那些區域來實現的。而在 GPU 上，最好跟隨游戲行業的領先地位，每幀更新整個屏幕。雖然重新繪制每一幀上的每個像素似乎違反直覺，但在大多數情況下，重新繪制整個屏幕的處理成本低于 CPU 管理部分更新所需的計算成本。

Ekioh在其新的多線程 HTML 瀏覽器中使用了上述技術并取得了成功。在圖形繁重的應用程序中，發現集中使用 GPU 的速度是更通用的基于庫的方法的兩倍多。此外，由于 GPU 光柵化不需要用于加速合成的大量緩存像素圖，因此在某些情況下可以節省大量內存（超過 45 MB）。隨著屏幕分辨率的提高，這些內存節省將變得更加顯著。

因此，集中使用 GPU 是在不犧牲性能的情況下降低成本的關鍵。使用這種方法，下一代嵌入式芯片將能夠在大眾市場消費電子產品上提供基于瀏覽器的 4K 應用程序和 UI，而不會降低性能。

審核編輯：郭婷