Web 性能優化-CSS3 硬件加速(GPU 加速)

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 進行渲染，減少 CPU 操作的一種優化方案。由於 GPU 中的 transform 等 CSS 屬性不會觸發 repaint，所以能大大提高網頁的性能。

動畫與幀

瀏覽器中動畫也是由一幀一幀的圖片組成的。我們首先看一下，瀏覽器每一幀都做了什么。

1. JavaScript：JavaScript 實現動畫效果，DOM 元素操作等。
2. Style（計算樣式）：確定每個 DOM 元素應該應用什么 CSS 規則。
3. Layout（布局）：計算每個 DOM 元素在最終屏幕上顯示的大小和位置。由於 web 頁面的元素布局是相對的，所以其中任意一個元素的位置發生變化，都會聯動的引起其他元素發生變化，這個過程叫 reflow。
4. Paint（繪制）：在多個層上繪制 DOM 元素的的文字、顏色、圖像、邊框和陰影等。
5. Composite（渲染層合並）：按照合理的順序合並圖層然后顯示到屏幕上。

動畫與圖層

瀏覽器在獲取 render tree（詳細知識可以查看Web性能優化-頁面重繪和回流（重排））后，渲染樹中包含了大量的渲染元素，每一個渲染元素會被分到一個圖層中，每個圖層又會被加載到 GPU 形成渲染紋理。GPU 中 transform 是不會觸發 repaint 的，這一點非常類似 3D 繪圖功能，最終這些使用 transform 的圖層都會由獨立的合成器進程進行處理。

過程如下：

render tree -> 渲染元素 -> 圖層 -> GPU 渲染 -> 瀏覽器復合圖層 -> 生成最終的屏幕圖像。

chrome devtools 中可以開啟 Rendering 中的 Layer borders 查看圖層紋理。
其中黃色邊框表示該元素有 3d 變換，表示放到一個新的復合層（composited layer）中渲染，藍色柵格表示正常的 render layer。

在 GPU 渲染的過程中，一些元素會因為符合了某些規則，而被提升為獨立的層（黃色邊框部分），一旦獨立出來，就不會影響其它 DOM 的布局，所以我們可以利用這些規則，將經常變換的 DOM 主動提升到獨立的層，那么在瀏覽器的一幀運行中，就可以減少 Layout 和 Paint 的時間了。

創建獨立圖層

哪些規則能讓瀏覽器主動幫我們創建獨立的層呢？

1. 3D 或者透視變換（perspective，transform） 的 CSS 屬性。
2. 使用加速視頻解碼的 video 元素。
3. 擁有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素。
4. 混合插件（Flash)。
5. 對自己的 opacity 做 CSS 動畫或使用一個動畫 webkit 變換的元素。
6. 擁有加速 CSS 過濾器的元素。
7. 元素有一個包含復合層的后代節點(換句話說，就是一個元素擁有一個子元素，該子元素在自己的層里)。
8. 元素有一個兄弟元素在復合圖層渲染，並且該兄弟元素的 z-index 較小，那這個元素也會被應用到復合圖層。

關於 z-index 導致的硬件加速的問題，可以查看這篇文章 CSS3硬件加速也有坑！！

開啟 GPU 加速

CSS 中的以下幾個屬性能觸發硬件加速：

1. transform
2. opacity
3. filter
4. will-change

如果有一些元素不需要用到上述屬性，但是需要觸發硬件加速效果，可以使用一些小技巧來誘導瀏覽器開啟硬件加速。

.element {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);
}

注意：我在不同的資料中查到的 transform 是否能觸發硬件加速的結果不同，自己測試后，發現結果是可以。

要注意的問題

（1）過多地開啟硬件加速可能會耗費較多的內存，因此什么時候開啟硬件加速，給多少元素開啟硬件加速，需要用測試結果說話。
（2）GPU 渲染會影響字體的抗鋸齒效果。這是因為 GPU 和 CPU 具有不同的渲染機制，即使最終硬件加速停止了，文本還是會在動畫期間顯示得很模糊。

轉自：https://juejin.cn/post/6844903903826296846