GPU加速有坑？

大多數人都知道有動畫的地方可使用GPU來加速頁面渲染。例如，作優化的時候，將使用left和top屬性的動畫修改爲使用transform屬性的CSS動畫。或者聽到別人教你使用transform:translateZ(0）給有動畫的部分額外開啓GPU加速。

 

目前下面這些因素都會引發chrome建立層：

1. 3D 或透視變換(perspective，transform) CSS 屬性
2. 使用加速視頻解碼的 <video> 元素
3. 擁有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
4. 混合插件(如 Flash)
5. 對本身的 opacity 作 CSS 動畫或使用一個動畫 webkit 變換的元素
6. 擁有加速 CSS 過濾器的元素
7. 元素有一個 z-index 比本身小的兄弟節點，且該節點是一個合成層

上面6點都很是容易理解，在平常開發中，最容易出現問題的是第7點

 

隱式合成：元素有一個 z-index 比本身小的兄弟節點，且該節點是一個合成層，則該元素會建立層。

拿實際項目舉個栗子，咱們按照上面的步驟開啓layer borders 

 

還沒有給上圖右手添加高層級的z-index時，整個頁面在移動端打開後閃退。而添加了z-index以後，頁面正常顯示，不閃退了。
仔細看上面的gif，僅僅改變了z-index，就會改變大批數量的層（黃色邊框）

 

爲何z-index力量這麼大？

咱們來看一個栗子，B在作動畫，理所固然把B提到單獨的合成層（給B增長屬性 transform:translateZ(0））。減小重繪。 

按照上圖，咱們遇到一個邏輯問題，元素B應該在單獨的合成層上，而且屏幕的最終圖像應該在GPU上組成。可是A元素在B元素的頂部，咱們沒有指定提高A元素自身層級的東西。那麼瀏覽器會作什麼？它將強制爲元素A建立一個新的合成圖層。

這樣，A和B都被提高到單獨的複合層。 所以，使用GPU加速提高動畫性能時，最好給元素增長一個高一點的z-index屬性，人爲干擾複合層的排序，能夠有效減小chrome建立沒必要要的複合層，提高渲染性能。

 

找到layers，點擊當前層，在右邊查看佔用的memory（內存）

 

注意：別盲目建立渲染層，必定要分析其實際性能表現。由於建立渲染層是有代價的，每建立一個新的渲染層，就意味着新的內存分配和更復雜的層的管理。而且在移動端 GPU 和 CPU 的帶寬有限制，建立的渲染層過多時，合成也會消耗跟多的時間。

 

總結：

使用GPU提高動畫性能時，尤爲是用了輪播、動畫loading的頁面，最好給元素增長一個z-index屬性，人爲干擾複合層的排序，能夠有效減小chrome建立沒必要要的複合層，提高渲染性能。

 

更詳細的內容可前往：https://aotu.io/notes/2017/04/11/GPU/