Day20 GPU! 啟動! - 淺談 CSS3 硬體加速
今天我們要來探討如何善用使用者的 GPU 資源，讓網頁的動畫更加順暢。我盡量讓內容簡單易懂，可以當一篇科普文章閱讀。
瀏覽器的渲染流程
在我們討論之前，我們先來看看瀏覽器的渲染流程。這裡我畫了一張可愛的小圖
- JavaScript: JavaScript 實現動畫效果，DOM 元素操作等。
- Style（計算樣式）: 決定每個 DOM 元素應該套用什麼 CSS 規則。
- Layout（佈局）: 計算每個 DOM 元素在最終畫面上顯示的大小和位置。 由於 web 頁面的元素佈局是相對的，所以其中任一個元素的位置發生變化，都會聯動的引起其他元素發生變化，這個過程叫做 reflow。
- Paint（繪製）: 在多個圖層上繪製 DOM 元素的文字、顏色、圖像、邊框和陰影等。
- Composite（渲染圖層合併）: 依照合理的順序合併圖層然後顯示到螢幕上。
在這裡你可以看到每次你的動畫在跑， CPU 都會需要重新計算一次佈局，然後重新繪製，最後再合併圖層。這個過程會造成 CPU 的負擔，導致電腦發熱，耗電量增加，然後全台停電等等。這時候 CSS3 硬體加速就派上用場了。
啊 GPU 買你那麼貴你在那裡爽啊
其實 GPU 也不是一直在爽，它有時候也有在做事情。我們先來談談 GPU 厲害的點在哪裡。
GPU 厲害的是他會把在改變的元素獨立抽出來一個圖層，修改完再插回去。這樣就不用每次都重新繪製整個畫面，只需要繪製這個塗層就好了。這樣就可以大大減少 CPU 的負擔，讓動畫更加順暢。
如何使用 CSS3 硬體加速
但由此你也可以看出，一定要瀏覽器建立獨立圖層才能使用 GPU 加速。
自動建立條件
以下這些情況瀏覽器會自動幫你建立獨立圖層：
- 使用某些特定的3D或透視效果的CSS屬性。
- 在顯示視頻時，使用支援硬體加速的video元素。
- 在畫布上繪製圖像時，使用3D(WebGL)技術或硬體加速的2D畫布(canvas)元素。
- 如果你的網頁使用了Flash等外掛程式。
- 當改變元素的透明度（opacity）時，使用CSS動畫，或者對元素應用webkit
- 畫變換。
- 使用支援硬體加速的CSS濾鏡效果的元素。
- 當一個元素包含其他子元素，這些子元素在自己的圖層中。
- 當一個元素有一個兄弟元素，並且這個兄弟元素在一個特別的圖層中，同時這個兄弟元素的顯示順序比較低（z-index較小）。
GPU! 啟動!
這幾個 CSS 屬性會觸發建立獨立圖層：
- transform
- opacity
- filter
- will-change
但如果你沒有想要使用這些屬性但是你還是想要使用 GPU 加速，你可以用一些小手段來誘導瀏覽器開啟 GPU 加速。
1.element {
2 transform: translateZ(0);
3 /**或著**/
4 transform: rotateZ(360deg);
5 transform: translate3d(0, 0, 0);
6}
注意事項
當使用3D硬體加速來提升動畫性能時，最好為元素添加一個z-index屬性，手動調整複合層的排序。這樣可以有效減少Chrome創建不必要的複合層，提高渲染性能，特別是在安卓手機上，優化效果很明顯。
過多地開啟硬體加速可能會消耗較多的內存，因此在什麼情況下啟用硬體加速，以及為多少元素啟用硬體加速，需要根據測試結果來決定。
GPU 渲染會影響字體的抗鋸齒效果。這是因為 GPU 和 CPU 具有不同的渲染機制，即使最終停用硬體加速，文字在動畫期間仍可能顯示得模糊不清。
結論
今天我們講了一下 GPU 的運作原理，以及如何使用 CSS3 硬體加速。希望你們可以在開發網頁時，能夠善用 GPU 資源，讓網頁的動畫更加順暢。
或著是冬天快要到了，知道怎麼用安卓手機以及學校電腦製作暖暖包了吧w
沒有在開玩笑，這個就是一個不錯的暖暖包網頁。以上就是我今天的分享，歡迎在 Instagram 和 Google 新聞追蹤毛哥EM資訊密技，也歡迎訂閱我新開的YouTube頻道:網棧。
我是毛哥EM，讓我們明天再見。