CSS動畫開啟硬體加速

（一）前言

在需要高頻互動的css動畫時候，我們就需要考慮使用css3 硬體加速。

首先，css3 硬體加速又叫做 gpu 加速，是利用 gpu 進行渲染，

減少 cpu 操作的一種優化方案。由於 gpu 中的 transform 等 css

屬性不會觸發 repaint，所以能大大提高網頁的效能。

現在，像chrome, firefox, safari, ie9+和最新版本的opera都支援硬體加速，當它們檢測到頁面中某個dom元素應用了某些css規則時就會開啟，最顯著的特徵的元素的3d變換。

（二）案例分析

首先我們來實現乙個小球動畫，我們先用left和top來控制位置，然後檢視其丟幀情況，然後我們再使用transform來實現一樣的效果, 然後對比兩次的效能報告

我們先給原始碼吧

這是通過left和top實現位移

這是通過translate實現位移

**就是上面，現在我們來看兩個的丟幀情況

我們可以看到因為left和top屬性會導致重繪，導致rending，而且每乙個步驟都有綠色柱狀圖，這是乙個效能代價很高的操作，也是產生丟幀的關鍵。而transform會直接使用硬體加速，在gpu中執行，繞開了軟體渲染。

（三）硬體加速原理

瀏覽器首先頁面解釋成dom輸，dom樹和css讓瀏覽器構建渲染樹，渲染書包含渲染物件 - 在頁面中需要渲染的元素，每乙個渲染物件被分配到乙個圖層中，每乙個圖層被更新到gpu，這裡的秘訣就在於通過transform的層會使用gpu渲染，因此不需要重繪，就像3d圖形一樣。這個轉換是單獨處理的。

當然，瀏覽器建立這種層級的條件有以下幾種

3d 或者 css的transform屬性

和元素

css的filter屬性

覆蓋在其它元素之上的元素，比如通過z-index提公升層級

自然，不是所有的css都會在gpu執行，目前支援是以下幾種

transform

opacity

filter

因此，如果你動畫，考慮效能，建議用以上css3來實現。

（四）開啟硬體加速

可是在一些情況下，我們並不需要對元素應用3d變換的效果，那怎麼辦呢？這時候我們可以使用個小技巧「欺騙」瀏覽器來開啟硬體加速（transform hack）。

雖然我們可能不想對元素應用3d變換，可我們一樣可以開啟3d引擎。例如我們可以用transform: translate3d(0, 0, 0); 來開啟硬體加速。

現在我們使用transform hack對上面修改left和top進行失幀情況

// 修改**

// 將style裡面的樣式修改如下 .container

對比圖

從圖中我們可以看到，重繪的代價雖然變低，但是和直接時候transform還是差太多。

（四）注意事項

大部分重要的問題都是關於記憶體。gpu處理過多的內容會導致記憶體問題。這在移動端和移動端瀏覽器會導致崩潰。因此，通常不會對所有的元素使用硬體加速。

在gpu渲染字型會導致抗鋸齒（-webkit-font-smoothing）無效。這是因為gpu和cpu的演算法不同。因此如果你不在動畫結束的時候關閉硬體加速，會產生字型模糊。