1. 何為硬件加速
就是將瀏覽器的渲染過程交給GPU處理，而不是使用自帶的比較慢的渲染器。這樣就可以使得animation與transition更加順暢。
我們可以在瀏覽器中用css開啟硬件加速，使GPU (Graphics Processing Unit) 發揮功能，從而提升性能
現在大多數電腦的顯卡都支持硬件加速。鑒於此，我們可以發揮GPU的力量，從而使我們的網站或應用表現的更為流暢。
2硬件加速原理
瀏覽器接收到頁面文檔后，會將文檔中的標記語言解析為DOM樹。DOM樹和CSS結合后形成瀏覽器構建頁面的渲染樹。渲染樹中包含了大量的渲染元素，每一個渲染元素會被分到一個圖層中，每個圖層又會被加載到GPU形成渲染紋理，而圖層在GPU中transform 是不會觸發 repaint 的，最終這些使用 transform 的圖層都會由獨立的合成器進程進行處理。
CSS transform 會創建了一個新的復合圖層，可以被GPU直接用來執行 transform 操作。
瀏覽器什么時候會創建一個獨立的復合圖層呢？事實上一般是在以下幾種情況下：
- 3D 或者 CSS transform
- <video> 和 <canvas> 標簽
- CSS filters
- 元素覆蓋時，比如使用了 z-index 屬性
3 為什么硬件加速會使頁面流暢
因為 transform 屬性不會觸發瀏覽器的 repaint（重繪），而絕對定位absolute中的 left 和 top 則會一直觸發 repaint（重繪）。
為什么 transform 沒有觸發 repaint 呢？簡而言之，transform 動畫由GPU控制，支持硬件加速，並不需要軟件方面的渲染。
瀏覽器什么時候會創建一個獨立的復合圖層呢？事實上一般是在以下幾種情況下：
3D 或者 CSS transform
<video> 和 <canvas> 標簽
CSS filters
元素覆蓋時，比如使用了 z-index 屬性
4並不是所有的CSS屬性都能觸發GPU的硬件加速，實際上只有少數屬性可以，比如下面的這些：
transform
opacity
filter
5.如何在桌面端和移動端用CSS開啟硬件加速
CSS animations, transforms 以及 transitions 不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執行。那我們怎樣才可以切換到GPU模式呢，很多瀏覽器提供了某些觸發的CSS規則。
現在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規則時就會開啟，最顯著的特征的元素的3D變換。
例如：
.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}
可是在一些情況下，我們並不需要對元素應用3D變換的效果，那怎么辦呢？這時候我們可以使用個小技巧“欺騙”瀏覽器來開啟硬件加速。
雖然我們可能不想對元素應用3D變換，可我們一樣可以開啟3D引擎。例如我們可以用transform: translateZ(0); 來開啟硬件加速 。
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}
在 Chrome and Safari中，當我們使用CSS transforms 或者 animations時可能會有頁面閃爍的效果，下面的代碼可以修復此情況：
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}
在webkit內核的瀏覽器中，另一個行之有效的方法是
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
原生的移動端應用(Native mobile applications)總是可以很好的運用GPU，這是為什么它比網頁應用(Web apps)表現更好的原因。硬件加速在移動端尤其有用，因為它可以有效的減少資源的利用(移動端本身資源有限)。
6.使用硬件加速的問題
使用硬件加速並不是十全十美的事情，比如：
1內存。如果GPU加載了大量的紋理，那么很容易就會發生內容問題，這一點在移動端瀏覽器上尤為明顯，所以，一定要牢記不要讓頁面的每個元素都使用硬件加速。
2使用GPU渲染會影響字體的抗鋸齒效果。這是因為GPU和CPU具有不同的渲染機制。即使最終硬件加速停止了，文本還是會在動畫期間顯示得很模糊。
總結
只對我們需要實現動畫效果的元素應用以上方法，如果僅僅為了開啟硬件加速而隨便亂用，那是不明智的。
小心使用這些方法，如果通過你的測試，結果確是提高了性能，你才可以使用這些方法。使用GPU可能會導致嚴重的性能問題，因為它增加了內存的使用，而且它會減少移動端設備的電池壽命。