摘要：書接上文瀏覽器內(nèi)核之渲染基礎(chǔ)硬件加速基礎(chǔ)概念硬件加速技術(shù)是指使用的硬件能力為幫助渲染網(wǎng)頁(yè)，在為的作用主要是用來(lái)繪制圖形并且性能特別好。包含的節(jié)點(diǎn)表示的是使用硬件加速的元素或者技術(shù)。

微信公眾號(hào)：愛(ài)寫bugger的阿拉斯加
如有問(wèn)題或建議，請(qǐng)后臺(tái)留言，我會(huì)盡力解決你的問(wèn)題。

此文章是我最近在看的【W(wǎng)ebKit 技術(shù)內(nèi)幕】一書的一些理解和做的筆記。

而【W(wǎng)ebKit 技術(shù)內(nèi)幕】是基于 WebKit 的 Chromium 項(xiàng)目的講解。

書接上文 瀏覽器內(nèi)核之渲染基礎(chǔ)

硬件加速技術(shù)是指：使用 GPU 的硬件能力為幫助渲染網(wǎng)頁(yè)，在為 GPU 的作用主要是用來(lái)繪制 3D 圖形并且性能特別好。

對(duì)于 GPU 繪圖而言，當(dāng)網(wǎng)頁(yè)分層之后，部分區(qū)域的更新可能只在網(wǎng)頁(yè)的一層或者幾層，而不需要將整個(gè)網(wǎng)頁(yè)都重新繪制。 通過(guò)重新繪制網(wǎng)頁(yè)的一個(gè)或者幾個(gè)層，并將它們和其他之前繪制完的層合成起來(lái)，既能使用 GPU 的能力，又能減少重繪的開銷。

每個(gè) RenderLayer 對(duì)象都有一個(gè)后端存儲(chǔ)與其對(duì)應(yīng)，好處是：當(dāng)每一層更新的時(shí)候，WebKit 只需要更新 RenderLayer 對(duì)象包含的節(jié)點(diǎn)即可。所以當(dāng)某一層有作保更新的時(shí)候，WebKit 重繪該層的所在內(nèi)容， 這是理想的情況?，F(xiàn)實(shí)中，由于硬件能力和資源有限。為了節(jié)省 GPU 的內(nèi)存資源，硬件加速機(jī)制在 RenderLayer 樹建立之后需要做三件事情來(lái)完成網(wǎng)頁(yè)的渲染。

WebKit 決定將哪些 RenderLayer 對(duì)象組合在一起，形成一個(gè)有后端存儲(chǔ)的新層，這一新層不久后會(huì)用于之后的合成（Compositing），這里面稱之為合成層（Compositing Layer）。每個(gè)新層都有一個(gè)或者多個(gè)后端存儲(chǔ)，這里的后端存儲(chǔ)可能是 GPU 的內(nèi)存。對(duì)于一個(gè) RenderLayer 對(duì)象，如果它沒(méi)有后端存儲(chǔ)的新層，那么就使用它的父親所使用的合成層。

將每個(gè)合成層包含的這些 RenderLayer 內(nèi)容繪制在合成層的后端存儲(chǔ)中，這里的繪制可以是軟件繪制也可以是硬件繪制。

由合成層（Compositor）將多個(gè)合成層合成起來(lái)，形成網(wǎng)頁(yè)的最終可視化結(jié)果，實(shí)際就是一張圖片。 合成器是一種能夠?qū)⒍鄠€(gè)合成層按照這些層的前后順序、合成層的 3D 變形等設(shè)置而合成一個(gè)圖像結(jié)果的設(shè)施。

在 WebKit 中，只有把編譯的 C 代碼宏（macro）“ACCELERATED_COMPOSITING” 打開之后，硬件加速機(jī)制才會(huì)被開啟，有關(guān)硬件加速的基礎(chǔ)設(shè)施才會(huì)被編譯進(jìn)去。

一個(gè) RenderLayer 對(duì)象如果需要后端存儲(chǔ)，它會(huì)創(chuàng)建一個(gè) RenderLayerBacking 對(duì)象，該對(duì)象負(fù)責(zé) RenderLayer 對(duì)象所需要的各種存儲(chǔ)。理想情況下，每個(gè) RenderLayer 都可以創(chuàng)建自己的后端存儲(chǔ)，但事實(shí)上不是所有 RenderLayer 都有自己的 RenderLayerBacking 對(duì)象。如果一個(gè) RenderLayer 對(duì)象被 WebKit 按照一定的規(guī)則創(chuàng)建了后端存儲(chǔ)，那么該 RenderLayer 被稱為合成層。

每個(gè)合成層都有一個(gè) RenderLayerBacking， RenderLayerBacking 負(fù)責(zé)管理 RenderLayer 所需要的所有后端存儲(chǔ)，因?yàn)楹蠖舜鎯?chǔ)可能需要多個(gè)存儲(chǔ)空間。在 WebKit 中，存儲(chǔ)空間使用 GraphicsLayer 類來(lái)表示。

其中圖中的 GraphicsLayer 表示 RenderLayer 中前景層、背景層所需要的一個(gè)后端存儲(chǔ)。每一個(gè) GraphicsLayer 都使用一個(gè) GraphicsLayerClient 對(duì)象，該對(duì)象能夠收到 GraphicsLayer 的一些狀態(tài)更新信息，并且包含一個(gè)繪制該 GraphicsLayer 對(duì)象的方法，RenderLayerBacking 繼承于該類。GraphicsLayer 是 WebKit 中的基礎(chǔ)類，主要定義一套標(biāo)準(zhǔn)接口。

如果一個(gè) RenderLayer 對(duì)象具有以下特征之一，那么它就是合成層。

RenderLayer 具有 CSS 3D 屬性或者 CSS 透視效果。

RenderLayer 包含的 RenderObject 節(jié)點(diǎn)表示的是使用硬件加速的視頻解碼技術(shù)的 HTML5 “video” 元素。

RenderLayer 包含的 RenderObject 節(jié)點(diǎn)表示的是使用硬件加速的 Canvas 2D 元素或者 WebGL 技術(shù)。

RenderLayer 使用了 CSS 透明效果的動(dòng)畫或者 CSS 變換的動(dòng)畫。

RenderLayer 使用了硬件加速的 CSS Filters 技術(shù)。

RenderLayer 使用了剪裁（Clip）或者反射（Reflection）屬性，并且它的后代中包括一個(gè)合成層。

RenderLayer 有一個(gè) Z 坐標(biāo)比自己小的兄弟節(jié)點(diǎn)，且該節(jié)點(diǎn)是一個(gè)合成層。

這么做的原因有三個(gè)：
首先當(dāng)然是合并一些 RenderLayer 層，這樣可以減少內(nèi)存的使用量；
其二是在合并之后，盡量減少合并帶來(lái)的重繪性能和處理上的困難；
其三對(duì)于那些使用多帶帶層能夠顯著提升性能的 RenderLayer 對(duì)象，可以繼續(xù)使用這些好處。

為什么一個(gè) RenderLayerBacking 對(duì)象需要這么多層？原因有很多，例如，WebKit 需要將滾動(dòng)條獨(dú)立開來(lái)稱為一個(gè)層，需要兩個(gè)容器層來(lái)表示 RenderLayer 對(duì)應(yīng)的 Z坐標(biāo)為正數(shù)的子女和 Z 坐標(biāo)為負(fù)數(shù)的子女，需要滾動(dòng)的內(nèi)容建立新層，還可能需要剪裁層和反射層。

圖 8-4 中的樹狀結(jié)構(gòu)描述了所有層的繪制順序，按照先根順序遍歷的結(jié)果即是繪制順序，圖中每個(gè)層就是一個(gè) GraphicsLayer 對(duì)象。

管理這些合成層等工作的是 RenderLayerCompositor 類，可以說(shuō)是個(gè) “大管家”。

首先，WebKit 決定哪些些是合成層并為它們分配后端存儲(chǔ)。

其次，WebKit 需要遍歷和繪制每一個(gè)合成層，也就是每個(gè)合成層可能有一個(gè)或者多個(gè) RenderLayer 對(duì)象。

最后，渲染引擎將所有繪制完的合成層合成起來(lái)，這個(gè)是由 WebKit 的移植來(lái)完成的。

WebKit 中的 3D 圖形上下文主要是提供一組抽象接口，這組接口能夠提供類似 OpenGLES(使用 GPU 硬件能力的 3D 圖形應(yīng)用編程接口)的功能，其主要目的當(dāng)然是使用 OpenGL 繪制 3D 圖形的能力。這一層抽象能夠?qū)?WebKit 各個(gè)移植的不同部分隱藏起來(lái)，WebCore 只是使用統(tǒng)一的抽象接口。在 WebKit 中，3D 圖形上下文的主要用途是 WebGL，當(dāng)然啟用硬件加速的 Canvas2D 等 HTML5 技術(shù)也會(huì)使用 3D 圖形技術(shù)，不過(guò)情況有些不同。

GraphicsLayer 對(duì)象是對(duì)一個(gè)渲染后端存儲(chǔ)中某一層的抽象，同眾多其他 WebKit 所定義的抽象類一樣，在 WebKit 移植中，它還需要具體的實(shí)現(xiàn)類來(lái)支持該類所要提供的功能。

在 Chromium 中，所以使用 GPu 硬件加速（也就是調(diào)用 OpenGL編程接口）的操作都是由一個(gè)進(jìn)程（稱為 GPU 進(jìn)程）負(fù)責(zé)來(lái)完成的，這其中包括使用 GPU 硬件來(lái)進(jìn)行繪圖和合成。

Chromium 是多進(jìn)程架構(gòu)，每個(gè)網(wǎng)頁(yè)的 Renderer 進(jìn)程都是將之前介紹的 3D 繪圖和合成操作通過(guò) IPC 傳遞給 GPU 進(jìn)程，由它來(lái)統(tǒng)一調(diào)度并執(zhí)行。

在 Chromium 的 Android 版本中，GPU 進(jìn)程并不存在， Chromium 是將 GPU 的所有工作放在 Browser 進(jìn)程中的一個(gè)線程來(lái)完成，這得益于結(jié)構(gòu)設(shè)計(jì)的靈活性。但是本質(zhì)上，GPU 進(jìn)程和 GPU 線程并無(wú)太大區(qū)別。

上圖 描述了 Chromium 的多進(jìn)程架構(gòu)中 GPU 進(jìn)程同其他進(jìn)程之間的聯(lián)系，事實(shí)上每個(gè) Renderer 進(jìn)程都依賴 GPU 進(jìn)程來(lái)渲染網(wǎng)頁(yè)，當(dāng)然 Browser 進(jìn)程也會(huì)同 GPU 進(jìn)程進(jìn)行通信，其作用是創(chuàng)建該進(jìn)程并提供網(wǎng)頁(yè)渲染過(guò)程最后繪制的目標(biāo)存儲(chǔ)。

那么 GPU 進(jìn)程和 Render 進(jìn)程是如何同步這些命令的呢？答案是，GPU 進(jìn)程處理一些命令后，會(huì)向 Renderer 進(jìn)程報(bào)告自己當(dāng)前的狀態(tài)， Renderer 進(jìn)程通過(guò)檢查狀態(tài)信息和自己的期望結(jié)果來(lái)確定是否滿足自己的條件。

GPU 進(jìn)程最終繪制的結(jié)果不再像軟件渲染那樣通過(guò)共享內(nèi)存?zhèn)鬟f給 Browser 進(jìn)程，而是直接將頁(yè)面的內(nèi)容繪制在瀏覽器的標(biāo)簽窗口內(nèi)。

命令緩沖區(qū)（Command Buffer）主要用于 GPU 進(jìn)程和 GPU 的調(diào)用都進(jìn)程傳遞 GL 操作命令。從接口上來(lái)講，這一設(shè)計(jì)只提供一些基本的接口來(lái)管理緩沖區(qū)，寬并沒(méi)有對(duì)緩沖區(qū)的具體方式和命令的類型進(jìn)行任何限制，不過(guò)目前 Chromium 只有 GLES 一種實(shí)現(xiàn)方式。

合成器的作用就是將多個(gè)合成層合成并輸出一個(gè)最終的結(jié)果，所以它的輸入是多個(gè)待合成的合成層，每個(gè)層都有一些屬性（如 3D 變形等），它的輸出就是一個(gè)后端存儲(chǔ)，例如一個(gè) GPU 的紋理緩沖區(qū)。

Chromium 合成器是一個(gè)獨(dú)立并且復(fù)雜的模塊，它的作用是合成網(wǎng)頁(yè)劃分后的合成層。

硬件加速是指用GPU的硬件能力來(lái)渲染網(wǎng)頁(yè)，GPU的主要作用是用來(lái)繪制3D圖形并且有很好的性能，對(duì)于GPU繪圖而言，通常不像軟件渲染那樣只是計(jì)算其中更新的區(qū)域，一旦有新的更新請(qǐng)求，如果沒(méi)有分層，引擎可能會(huì)重新繪制所有的區(qū)域，因?yàn)橛?jì)算更新部分對(duì)GPU來(lái)說(shuō)可能耗費(fèi)更多的時(shí)間，當(dāng)網(wǎng)頁(yè)分層之后，部分區(qū)域的更新可能只在一層或幾層，而不需要更新整個(gè)網(wǎng)頁(yè)，通過(guò)重新繪制網(wǎng)頁(yè)的一個(gè)或幾個(gè)層，并將它們和其他之前繪制完的層合成起來(lái)，既能使用GPU的能力，又能夠減少重繪的開銷。

希望本文對(duì)你有點(diǎn)幫助。

下期分享 【第九章 JavaScript 引擎】 敬請(qǐng)期待。

送上 資源分享——Python、Java、Linux、Go、vue、react、javaScript

對(duì) 全棧開發(fā) 有興趣的朋友可以掃下方二維碼關(guān)注我的公眾號(hào) —— 愛(ài)寫bugger的阿拉斯加

分享 web 開發(fā)相關(guān)的技術(shù)文章，熱點(diǎn)資源，全棧程序員的成長(zhǎng)之路。

大家一起交流成長(zhǎng)。