GPU加速是幹什麼用的？
我們知道，網頁本身就是需要快速載入執行。從速度來提高使用者體驗才是網頁最基本的存在。而GPU加速是否能做到提高網頁瀏覽速度呢？下面我們就來一起來了接下吧。
一。 GPU 加速能做什麼?
首先我們要了解什麼是 16ms 最佳化
大多數裝置的重新整理頻率是 60 次/秒，(1000/60 = 16.6ms)也就說是瀏覽器對每一幀畫面的渲染工作要在 16ms 內完成，超出這個時間，頁面的渲染就會出現卡頓現象，影響使用者體驗。
瀏覽器在一幀裡面，會依次執行以下這些動作。減少或者避免 layout，paint 可以讓頁面不卡頓，動畫效果更加流暢。
1。 JavaScript：JavaScript 實現動畫效果，DOM 元素操作等。
2。 Style(計算樣式)：確定每個 DOM 元素應該應用什麼 CSS 規則。
3。 Layout(佈局)：計算每個 DOM 元素在最終螢幕上顯示的大小和位置。由於 web 頁面的元素佈局是相對的，所以其中任意一個元素的位置發生變化，都會聯動的引起其他元素髮生變化，這個過程叫 reflow。
4。 Paint(繪製)：在多個層上繪製 DOM 元素的的文字、顏色、影象、邊框和陰影等。
5。 Composite(渲染層合併)：按照合理的順序合併圖層然後顯示到螢幕上。
利用 GPU 加速優先使用渲染層合併屬性，避免 layout，paint。
從上圖可以看出，可以透過改變元素的 transform 實現移動，伸縮變換而非改變物體的 left，top，width，height 避免 layout，paint。讓動畫效果更加流暢。
最佳化
二。 GPU 是什麼，如何用 Chrome devtools 進行分析 debug?
瀏覽器渲染一個頁面大致是按照下面這個步驟執行。
1。 獲取 DOM 並將其分割為多個層(RenderLayer)
2。 將每個層柵格化，並獨立的繪製進點陣圖中
3。 將這些點陣圖作為紋理上傳至 GPU
4。 複合多個層來生成最終的螢幕影象(終極 layer )。
Chrome 開啟檢視 renderlayer
按上面的步驟之後，即可看到
1。 黃色邊框：有動畫 3d 變換的元素，表示放到了一個新的複合層(composited layer)中渲染
2。 藍色的柵格：這些分塊可以看作是比層更低一級的單位，這些區域就是 RenderLayer
開啟一個頁面，如果該頁面的黃色邊框很多，那麼肯定要檢視一下原因了
Chrome 檢視 layer
開啟 timeline 進行錄製，選中 timeline 的某一幀，然後選擇下面的 layer ，可以左右拖動該模組出現 3d。
我們可以看到一個頁面實際是像下面一樣組成的
從上圖不難理解，雖然我們最終在瀏覽器上看到的只是一個影印版，即最終只有一個層。類似於PhotoShop軟體中的“圖層”概念，最後合併所有可檢視層，輸出一張圖片到螢幕上。但實際上一些dom會因為一些規則被提升成獨立的層(開啟 GPU 加速)，一旦被獨立出來之後，便不會再影響其他dom的佈局，因為它改變之後，只是“貼上”了頁面。
根據這個優點，我們可以把頁面中一些佈局經常變換的dom(動畫)提升到獨立的層。那麼，瀏覽器在之後的 16ms 中，只需進行下面的幾個步驟。
三。 如何開啟 GPU 加速?
目前下面這些因素都會引起Chrome建立合成層：
1。 3D 或透視變換(perspective，transform) CSS 屬性
2。 使用加速影片解碼的video元素
3。 擁有 3D (WebGL) 上下文或加速的 2D 上下文的 canvas 元素
4。 混合外掛(如 Flash)
5。 對自己的 opacity 做 CSS 動畫或使用一個動畫 webkit 變換的元素
6。 擁有加速 CSS 過濾器的`元素
7。 元素A有一個 z-index 比自己小的元素B，且元素B是一個合成層(換句話說就是該元素在複合層上面渲染)，則元素A會提升為合成層。
上面7點都非常容易理解，在日常開發中，最容易出現問題的是第7點
四。 GPU 加速隱藏的坑隱式合成
元素A有一個 z-index 比自己小的元素B，且元素B是一個合成層(換句話說就是該元素在複合層上面渲染)
拿實際專案舉個栗子，我們按照上面的步驟開啟 layer borders
尚未給上圖右手新增高層級的 z-index 時，整個頁面在移動端開啟後閃退。而添加了 z-index 之後，頁面正常顯示，不閃退了。
仔細看上面的 gif ，僅僅改變了 z-index ，就會改變大批數量的層(黃色邊框)
為什麼 z-index 力量這麼大?
我們來看一個栗子，B 在做動畫，理所當然把B提到單獨的合成層。減少重繪。
按照上圖，我們遇到一個邏輯問題，元素B應該在單獨的合成層上，並且螢幕的最終影象應該在 GPU 上組成。但是A元素在B元素的頂部，我們沒有指定提升A元素自身層級的東西。那麼瀏覽器會做什麼?它將強制為元素A建立一個新的合成圖層。
這樣，A和B都被提升到單獨的複合層。
因此，使用 GPU 加速提升動畫效能時，最好給當前動畫元素增加一個高一點的 z-index 屬性，人為干擾複合層的排序，可以有效減少 Chrome 建立不必要的複合層，提升渲染效能。
注意：GPU 不僅需要傳送渲染層影象到 GPU ，而且還需儲存它們，以便稍後在動畫中重用。別盲目建立渲染層，一定要分析其實際效能表現。因為建立渲染層是有代價的，每建立一個新的渲染層，就意味著新的記憶體分配和更復雜的層的管理。對於使用移動裝置的使用者來說是很坑的。移動裝置沒有桌上型電腦那麼多的記憶體。過多的 GPU 加速會引起頁面卡頓甚至閃退。
找到 layers，點選當前層，在右邊檢視佔用的 memory(記憶體)
總結
整篇文章介紹了下面幾個部分
● GPU 加速能做什麼
● GPU 是什麼，如何用 Chrome devtools 進行分析 debug?
● 如何開啟 GPU 加速?
● GPU 加速隱藏的坑隱式合成