被解放的GPU與CSS3中對GPU的應用分析
概念- 圖形處理器（ Graphics Processing Unit ）
- 專門用來處理在個人電腦、工作站或遊戲機上圖像運算工作
- 顯卡的“心臟”
- 90%以上的新型臺式電腦和筆記本型電腦擁有集成圖形處理器，但是在性能上往往低於那些獨立顯卡。
按照類型來分，可以分爲獨立顯卡GPU和集成繪圖GPU。
獨立顯卡GPU
性能最高的一類繪圖處理器是通過PCI-Express、PCI或AGP等擴展槽界面與主板連接的，而通常它們可以相對容易地被取代或升級（假設主板能支持升級）。現在，仍然有少數顯卡採用帶寬有限的PCI插槽作連接，但它們通常只會在主板沒有提供PCI-Express和AGP插槽的情況下才會使用。常見的獨立顯卡GPU如：Nvidia GeForce GTX 260。
集成繪圖GPU
集成繪圖處理器（或稱自帶顯示核心）是設在主板上的繪圖處理器，運作時會借用電腦內部分的系統存儲器，而沒有自己獨立的圖形存儲器。因爲自帶核心的運算速度較低，相應的造成性能也較低。常見的有：Intel GMA X3000 集成圖形處理器。
發展
1999年NVIDIA發佈GeForce256芯片時首先提出GPU的概念，現在GPU在也在很多領域發揮着它的作用，如下圖：
我們知道測試CPU參數的話有CPU-Z軟件，同樣的，也有GPU-Z可以用來測試GPU的參數：
那CPU和GPU在處理任務的時候有什麼區別呢？
（橙色：存儲單元，黃色：控制邏輯單元，綠色：運算單元）
CPU方面，性能比較出衆的有intel i7-3770k一共有四核，3.9GHz，8MB Cache。
GPU方面，NVIDIA新近推出的基於Kepler架構的GeForce GTX680，共有1536個核（CUDA Core），時鐘頻率1.06GHz，顯存（上圖中的DRAM）2048MB，支持很炫的CUDA5。
CPU擅長處理具有複雜計算步驟和複雜數據依賴的計算任務，如分佈式計算，數據壓縮，人工智能，物理模擬，以及其他很多很多計算任務等。CPU可以渲染圖像，可以解碼視頻、可以解碼音頻、可以3D渲染，但在執行效率方面，就不如專門的硬件了。
GPU的衆核架構非常適合把同樣的指令流並行發送到衆核上，採用不同的輸入數據執行。在2003-2004年左右，圖形學之外的領域專家開始注意到GPU與衆不同的計算能力，開始嘗試把GPU用於通用計算（即GPGPU）。之後NVIDIA發佈了CUDA，AMD和Apple等公司也發佈了OpenCL，GPU開始在通用計算領域得到廣泛應用，包括：數值分析，海量數據處理（排序，Map-Reduce等），金融分析等等。
更直觀的區別來看下面這張圖：
可以看到，CPU更靈活，負載小，而GPU雖然處理速度沒有那麼快，但在處理高併發任務時有優勢。
GPU之於動畫
還記得我們打遊戲時屏幕上在某個位置會出現60FPS等等一樣的數字麼，我們來看看這究竟代表什麼。
FPS
幀率或畫面更新率是用於測量顯示幀數的量度。測量單位爲“每秒顯示幀數”（Frame per Second，FPS，幀率）或“赫茲”，一般來說FPS用於描述視頻、電子繪圖或遊戲每秒播放多少幀，而赫茲則描述顯示屏的畫面每秒更新多少次。
由於人類眼睛的特殊生理結構，如果所看畫面之幀率高於每秒約10-12幀的時候，就會認爲是連貫的， 此現象稱之爲視覺暫留。這也就是爲什麼電影膠片是一格一格拍攝出來，然後快速播放的。而超過大概85赫茲的圖像，像是畫面每更新一次只會發光幾百分之一秒的陰極射線管及等離子顯示屏，此時已經到達大腦處理圖像的極限，人眼並無法分辨與更高更新率的差異，因此使用主動式快門眼鏡的3D電視更新率達到200赫茲或以上，對人眼來說是無法看到左右視角切換的過程。
所以說，FPS值越高代表畫面越流暢。現在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規則時就會開啓，最顯著的特徵的元素的3D變換。
例如：
1 2 3 4 5 |
.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)來開啓硬件加速 。
1 2 3 4 5 6 7 8 |
.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時可能會有頁面閃爍的效果，下面的代碼可以修復此情況：
1 2 3 4 5 6 7 8 9 10 11 12 |
.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內核的瀏覽器中，另一個行之有效的方法是:
1 2 3 4 5 6 7 |
.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)表現更好的原因。硬件加速在移動端尤其有用，因爲它可以有效的減少資源的利用。
只對我們需要實現動畫效果的元素應用以上方法，如果僅僅爲了開啓硬件加速而隨便亂用，那是不明智的。小心使用這些方法，如果通過你的測試，結果確是提高了性能，你纔可以使用這些方法。使用GPU可能會導致嚴重的性能問題，因爲它增加了內存的使用，而且它會減少移動端設備的電池壽命，在耗電量這方面還沒有什麼數據，如果你有歡迎來交流哦。
檢驗理論
你所聽到的看到的都可能不是正確的，唯有親身驗證才能證明對否，下面我們就來測下吧。
1.absolute vs translate
我們知道做CSS3動畫時，上面2個屬性都可以實現同樣的效果，那它們有優劣之分嗎？
對比可以看出，當多元素時，translate的FPS值是absolute的5倍之多，誰優誰劣，一目瞭然。通過Chrome的Timeline工具也可以清晰的看出GPU加速前後的對比：
2.rotate()啓用GPU
3.scale()啓用GPU
對比都可以看出，前面的理論是正確的，啓用GPU可以提高CSS3動畫性能。
我們再來簡單瞭解下GPU在Chrome裏如何工作的，傳統來說，網頁內容是完全依賴於CPU來渲染的，這也稱作軟件渲染 （software rendering），隨着GPU的發展越來越好，在圖形3D等方面的優勢很明顯，GPU有個特性是分層渲染，這樣的話就可以讓CPU和GPU同時並行工作，大大提高網頁渲染的速度，下圖是兩種方式的過程圖，更詳細介紹看GPU Accelerated Compositing in Chrome
關於測試
測試對於論證尤其重要，如果你的測試用例不科學，那得到的結果可能就是誤導，覺得擴大測試數量級和多次採樣取平均值可以更好的規避這個問題。
小結
既然GPU加速可以提高CSS3性能，那對其他元素例如img等渲染會有幫助呢，或者更極致的情況是，我們可不可以用*{硬件加速}呢。IE瀏覽器從IE9開始全面支持GPU加速，但是它的加載網頁的速度不過如此，甚至是個反面例子，但不是說一定就是GPU加速導致的。你如果搜索關鍵字GPU帶來的問題，發現它也不是那麼完美，我們可以用，但一定要先確認，它真正爲我們帶來益處，東施效顰要不得。