首先說明，這里討論的是 WebKit，描述的是 Chrome 的實現(xiàn)細(xì)節(jié)，而并非是 web 平臺的功能，因此這里介紹的內(nèi)容不一定適用于其他瀏覽器。

瀏覽器器內(nèi)核拿到內(nèi)容（渲染線程接收請求，加載網(wǎng)頁并渲染網(wǎng)頁），渲染大概可以劃分成以下幾個步驟：

• 解析HTML(HTML Parser)
• 構(gòu)建DOM樹(DOM Tree)
• 解析css構(gòu)建render樹（將CSS代碼解析成樹形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合DOM合并成render樹）
• 布局render樹（Layout/reflow），負(fù)責(zé)各元素尺寸、位置的計算
• 繪制render樹（paint），繪制頁面像素信息
• 瀏覽器會將各層的信息發(fā)送給GPU（GPU進(jìn)程：最多一個，用于3D繪制等），GPU會將各層合成（composite），顯示在屏幕上。

這里先解釋一下幾個概念:

• DOM Tree：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)。
• CSS Rule Tree：瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)。
• Render Tree: DOM和CSSOM合并后生成Render Tree。
• layout: 有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系，從而去計算出每個節(jié)點(diǎn)在屏幕中的位置。
• painting: 按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。
• reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，這個回退的過程叫 reflow。reflow 會從 這個 root frame 開始遞歸往下，依次計算所有的結(jié)點(diǎn)幾何尺寸和位置。
  repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。

注意：

• display:none 的節(jié)點(diǎn)不會被加入Render Tree，而visibility: hidden
  則會，所以，如果某個節(jié)點(diǎn)最開始是不顯示的，設(shè)為display:none是更優(yōu)的。
• display:none 會觸發(fā) reflow，而 visibility:hidden 只會觸發(fā) repaint，因為沒有發(fā)現(xiàn)位置變化。
• 有些情況下，比如修改了元素的樣式，瀏覽器并不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然后做一次reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize窗口，改變了頁面默認(rèn)的字體等。對于這些操作，瀏覽器會馬上進(jìn)行 reflow。

層（layer）

首先要了解CSS的圖層的概念（Chrome瀏覽器）

瀏覽器在渲染一個頁面時，會將頁面分為很多個圖層，圖層有大有小，每個圖層上有一個或多個節(jié)點(diǎn)。在渲染DOM的時候，瀏覽器所做的工作實際上是：

• 獲取DOM后分割為多個圖層
• 對每個圖層的節(jié)點(diǎn)計算樣式結(jié)果（Recalculate style–樣式重計算）
• 為每個節(jié)點(diǎn)生成圖形和位置（Layout–回流和重布局）
• 將每個節(jié)點(diǎn)繪制填充到圖層位圖中（Paint Setup和Paint–重繪）
• 圖層作為紋理上傳至GPU
• 組合多個圖層到頁面上生成最終屏幕圖像（Composite Layers–圖層重組）

而在 Chrome 中，存在有不同類型的層： RenderLayer(負(fù)責(zé) DOM 子樹)，GraphicsLayer(負(fù)責(zé) RenderLayer 的子樹)。接下來我們所討論的將是 GraphicsLayer 層。

GraphicsLayer 層是作為紋理(texture)上傳給 GPU 的。
chrome中查看圖層的方式如下：F12打開開發(fā)者工具，再按ESC，從左上角選擇"渲染"(Rendering)，找到"圖層邊框"(Layer borders)。

Composite（渲染層合并）

對頁面中 DOM 元素的繪制是在多個層上進(jìn)行的。在每個層上完成繪制過程之后，瀏覽器會將所有層按照合理的順序合并成一個圖層，然后顯示在屏幕上。對于有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合并順序出錯，將會導(dǎo)致元素顯示異常。

在 Chrome 中其實有幾種不同的層類型：

• RenderLayers 渲染層，這是負(fù)責(zé)對應(yīng) DOM 子樹
• GraphicsLayers 圖形層，這是負(fù)責(zé)對應(yīng) RenderLayers子樹。

在 DOM 樹中每個節(jié)點(diǎn)都會對應(yīng)一個 LayoutObject，當(dāng)他們的 LayoutObject 處于相同的坐標(biāo)空間時，就會形成一個 RenderLayers ，也就是渲染層。RenderLayers 來保證頁面元素以正確的順序合成，這時候就會出現(xiàn)層合成（composite），從而正確處理透明元素和重疊元素的顯示。

某些特殊的渲染層會被認(rèn)為是合成層（Compositing Layers），合成層擁有單獨(dú)的 GraphicsLayer，而其他不是合成層的渲染層，則和其第一個擁有 GraphicsLayer 父層公用一個。

而每個GraphicsLayer（合成層單獨(dú)擁有的圖層） 都有一個 GraphicsContext，GraphicsContext 會負(fù)責(zé)輸出該層的位圖，位圖是存儲在共享內(nèi)存中，作為紋理上傳到 GPU 中，最后由 GPU 將多個位圖進(jìn)行合成，然后顯示到屏幕上。

紋理(texture)

這里的紋理指的是 GPU 的一個術(shù)語：可以把它想象成一個從主存儲器(例如 RAM)移動到圖像存儲器(例如 GPU 中的 VRAM)的位圖圖像(bitmap image)。一旦它被移動到 GPU 中，你可以將它匹配成一個網(wǎng)格幾何體(mesh geometry)，在 Chrome 中使用紋理來從 GPU 上獲得大塊的頁面內(nèi)容。通過將紋理應(yīng)用到一個非常簡單的矩形網(wǎng)格就能很容易匹配不同的位置(position)和變形(transformation)，這也就是 3D CSS 的工作原理。

CSS3加速原理

瀏覽器接收到頁面文檔后，會將文檔中的標(biāo)記語言解析為DOM樹。DOM樹和CSS結(jié)合后形成瀏覽器構(gòu)建頁面的渲染樹。渲染樹中包含了大量的渲染元素，每一個渲染元素會被分到一個圖層中，每個圖層又會被加載到GPU形成渲染紋理，而圖層在GPU中 transform 是不會觸發(fā) repaint 的，這一點(diǎn)非常類似3D繪圖功能，最終這些使用 transform 的圖層都會由獨(dú)立的合成器進(jìn)程進(jìn)行處理。

合成層創(chuàng)建標(biāo)準(zhǔn)

Chrome中滿足以下任意情況就會創(chuàng)建圖層：

• 3D或透視變換（perspective transform）CSS屬性
• 使用加速視頻解碼的節(jié)點(diǎn)
• 擁有3D（WebGL）上下文或加速的2D上下文的節(jié)點(diǎn)
• 混合插件（如Flash）
• 對自己的opacity做CSS動畫或使用一個動畫webkit變換的元素
• 擁有加速CSS過濾器的元素
• 元素有一個包含復(fù)合層的后代節(jié)點(diǎn)（一個元素?fù)碛幸粋€子元素，該子元素在自己的層里）
• 元素有一個z-index較低且包含一個復(fù)合層的兄弟元素（換句話說就是該元素在復(fù)合層上面渲染）

合成層的優(yōu)點(diǎn)

一個元素開啟硬件加速后會變成合成層，可以獨(dú)立于普通文檔流中，改動后可以避免整個頁面重繪，提升性能。

• 合成層的位圖，會交由 GPU 合成，比 CPU 處理要快
• 當(dāng)需要 repaint 時，只需要 repaint 本身，不會影響到其他的層
• 對于 transform 和 opacity 效果，不會觸發(fā) layout 和 paint

注意：

• 提升到合成層后合成層的位圖會交GPU處理，但請注意，僅僅只是合成的處理（把繪圖上下文的位圖輸出進(jìn)行組合）需要用到GPU，生成合成層的位圖處理（繪圖上下文的工作）是需要CPU。
• 當(dāng)需要repaint的時候可以只repaint本身，不影響其他層，但是paint之前還有style， layout,那就意味著即使合成層只是repaint了自己，但style和layout本身就很占用時間。
• 僅僅是transform和opacity不會引發(fā)layout 和paint，那么其他的屬性不確定。

性能優(yōu)化

• 提升動畫效果的元素 合成層的好處是不會影響到其他元素的繪制，因此，為了減少動畫元素對其他元素的影響，從而減少paint，我們需要把動畫效果中的元素提升為合成層。 提升合成層的最好方式是使用 CSS 的 will-change屬性。will-change 設(shè)置為opacity、transform、top、left、bottom、right 可以將元素提升為合成層。
• 使用 transform 或者 opacity 來實現(xiàn)動畫效果, 這樣只需要做合成層的合并就好了。
• 減少繪制區(qū)域 對于不需要重新繪制的區(qū)域應(yīng)盡量避免繪制，以減少繪制區(qū)域。對于固定不變的區(qū)域，我們期望其并不會被重繪，因此可以將其提升為獨(dú)立的合成層，減少繪制區(qū)域，需要仔細(xì)分析頁面，區(qū)分繪制區(qū)域，減少重繪區(qū)域甚至避免重繪。

層的重繪

對于靜態(tài) Web 頁面而言，層在第一次被繪制出來之后將不會被改變，但對于 Web 動畫，頁面的 DOM 元素是在不斷變換的，如果層的內(nèi)容在變換過程中發(fā)生了改變，那么層將會被重繪（repaint）。

需要注意的是，如果圖層中某個元素需要重繪，那么整個圖層都需要重繪。比如一個圖層包含很多節(jié)點(diǎn)，其中一個節(jié)點(diǎn)發(fā)生變化，都會重繪整個圖層的其他節(jié)點(diǎn)，然后生成最終的圖層位圖。所以這需要通過特殊的方式來強(qiáng)制這個節(jié)點(diǎn)擁用一個自己的圖層（translateZ(0)或者translate3d(0,0,0)），CSS3的動畫也是一樣（好在絕大部分情況瀏覽器自己會為CSS3動畫的節(jié)點(diǎn)創(chuàng)建圖層）。

層和CSS動畫

簡化一下上述過程，每一幀動畫瀏覽器可能需要做如下工作：

• 瀏覽器解析 HTML 獲取 DOM 后分割為多個圖層(GraphicsLayer)
• 對每個圖層的節(jié)點(diǎn)計算樣式結(jié)果（Recalculate style–樣式重計算）
• 為每個節(jié)點(diǎn)生成圖形和位置（Layout–回流和重布局）
• 將每個節(jié)點(diǎn)繪制填充到圖層位圖中（Paint Setup和Paint–重繪）
• 圖層作為紋理(texture)上傳至 GPU
• 組合多個圖層到頁面上生成最終屏幕圖像（Composite Layers–圖層重組）

如果我們需要使得動畫的性能提高，需要做的就是減少瀏覽器在動畫運(yùn)行時所需要做的工作。最好的情況是，改變的屬性僅僅印象圖層的組合，變換（transform）和透明度（opacity）就屬于這種情況。

現(xiàn)代瀏覽器如Chrome，Firefox，Safari和Opera都對變換和透明度采用硬件加速。

使用 GPU 渲染元素

• transform
• opacity
• filter

3D 和 2D transform 的區(qū)別就在于，瀏覽器在頁面渲染前為3D動畫創(chuàng)建獨(dú)立的復(fù)合圖層，而在運(yùn)行期間為2D動畫創(chuàng)建。動畫開始時，生成新的復(fù)合圖層并加載為GPU的紋理用于初始化 repaint。然后由GPU的復(fù)合器操縱整個動畫的執(zhí)行。最后當(dāng)動畫結(jié)束時，再次執(zhí)行 repaint 操作刪除復(fù)合圖層。

強(qiáng)制使用GPU渲染

為了避免 2D transform 動畫在開始和結(jié)束時發(fā)生的 repaint 操作，我們可以硬編碼一些樣式來解決這個問題：

.example1 {transform: translateZ(0); }.example2 {transform: rotateZ(360deg); }

這段代碼的作用就是讓瀏覽器執(zhí)行 3D transform。瀏覽器通過該樣式創(chuàng)建了一個獨(dú)立圖層，圖層中的動畫則有GPU進(jìn)行預(yù)處理并且觸發(fā)了硬件加速。

如果某一個元素的背后是一個復(fù)雜元素，那么該元素的 repaint 操作就會耗費(fèi)大量的資源，此時也可以使用上面的技巧來減少性能開銷。

使用硬件加速的注意事項

• 內(nèi)存。如果GPU加載了大量的紋理，那么很容易就會發(fā)生內(nèi)容問題，這一點(diǎn)在移動端瀏覽器上尤為明顯，所以，一定要牢記不要讓頁面的每個元素都使用硬件加速。
• 使用GPU渲染會影響字體的抗鋸齒效果。這是因為GPU和CPU具有不同的渲染機(jī)制。即使最終硬件加速停止了，文本還是會在動畫期間顯示得很模糊。

觸發(fā)回流的屬性

有些節(jié)點(diǎn)，當(dāng)你改變他時，會需要重新布局（這也意味著需要重新計算其他被影響的節(jié)點(diǎn)的位置和大小）。這種情況下，被影響的DOM樹越大（可見節(jié)點(diǎn)），重繪所需要的時間就會越長，而渲染一幀動畫的時間也相應(yīng)變長。所以需要盡力避免這些屬性

一些常用的改變時會觸發(fā)重布局的屬性：
盒子模型相關(guān)屬性會觸發(fā)重布局：

• width
• height
• padding
• margin
• display
• border-width
• border
• min-height

定位屬性及浮動也會觸發(fā)重布局：

• top
• bottom
• left
• right
• position
• float
• clear

改變節(jié)點(diǎn)內(nèi)部文字結(jié)構(gòu)也會觸發(fā)重布局：

• text-align
• overflow-y
• font-weight
• overflow
• font-family
• line-height
• vertival-align
• white-space
• font-size

這么多常用屬性都會觸發(fā)重布局，可以看到，他們的特點(diǎn)就是可能修改整個節(jié)點(diǎn)的大小或位置，所以會觸發(fā)重。

觸發(fā)重繪的屬性

修改時只觸發(fā)重繪的屬性有：

• color
• border-style
• border-radius
• visibility
• text-decoration
• background
• background-image
• background-position
• background-repeat
• background-size
• outline-color
• outline
• outline-style
• outline-width
• box-shadow

這樣可以看到，這些屬性都不會修改節(jié)點(diǎn)的大小和位置，自然不會觸發(fā)重布局，但是節(jié)點(diǎn)內(nèi)部的渲染效果進(jìn)行了改變，所以只需要重繪就可以了。

總結(jié)

以上是生活随笔為你收集整理的CSS3硬件加速 - GPU加速的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。