引言
在h5開發中，我們經常會需要實作一些動效來讓頁面視覺效果更好，談及動效便不可避免地會想到動效性能優化這個話題:
- 減少頁面DOM操作，可以使用CSS實作的動效不多出一行js代碼
- 使用絕對定位脫離讓DOM脫離檔案流，減少頁面的重排(relayout)
- 使用CSS3 3D屬性開啟硬體加速
那么，CSS3與動效優化有什么關系呢，本文將從瀏覽器渲染層面講述CSS3的動效優化原理
瀏覽器頁面展示程序
首頁，我們需要了解一下瀏覽器的頁面展示程序:
- Javascript：主要負責業務互動邏輯，
- Style: 根據 CSS 選擇器，對每個 DOM 元素匹配對應的 CSS 樣式，
- Layout: 具體計算 DOM 元素顯示在螢屏上的大小及位置，
- Paint: 實作一個 DOM 元素的可視效果(顏色、邊框、陰影等)，一般來說由多個渲染層完成，
- Composite: 當每個層繪制完成后，瀏覽器會將所有層按照合理順序合并為一個圖層，顯示到螢屏，
本文我們將重點關注Composite程序，
瀏覽器渲染原理
在討論 Composite 之前，我們還需要了解一下瀏覽器渲染原理
從該圖中，我們可以發現：
DOM 元素與Layout Object存在一一對應的關系- 一般來說，擁有相同坐標空間的
Layout Object屬于同一個Paint Layer (渲染層)，通過position、opacity、filter等 CSS 屬性可以創建新的 Paint Layer - 某些特殊的
Paint Layer會被認為是Composite Layer (合成層/復合層)，Composite Layer 擁有單獨的Graphics Layer (圖形層)，而那些非 Composite Layer 的 Paint Layer，會與擁有 Graphics Layer 的父層共用一個
Graphics Layer
我們日常生活中所看到螢屏可視效果可以理解為：由多個位圖通過 GPU 合成渲染到螢屏上，而位圖的最小單位是像素，如下圖：
那么位圖是怎么獲得的呢，Graphics Layer 便起到了關鍵作用,每個 Graphics Layer 都有一個 Graphics Context, 位圖是存盤在共享記憶體中，Graphics Context 會負責將位圖作為紋理上傳到GPU中，再由GPU進行合成渲染，如下圖：
CSS在瀏覽器渲染層面承擔了怎樣的角色
大多數人對于CSS3的第一印象，就是可以通過3D(如transform)屬性來開啟硬體加速，許多同學在重構某一個專案時，考慮到影片性能問題，都會傾向:
- 將2Dtransform改為3Dtransform
2.將 left ( top、bottom、right )的移動改為 3Dtransform
但開啟硬體加速的底層原理其實就在于將 Paint Layer 提升到了 Composite Layer
以下的幾種方式都用相同的作用：
- 3D屬性開啟硬體加速(3d-transform)
- will-change: (opacity、transform、top、left、bottom、right)
- 使用fixed或sticky定位
- 對opacity、transform、filter應用了 animation(actived) or transition(actived)，注意這里的 animation 及 transition 需要是處于
激活狀態才行
我們來寫兩段 demo 代碼，帶大家具體分析一下實際情況
demo1. 3D屬性開啟硬體加速(3d-transform)
.composited{
width: 200px;
height: 200px;
background: red;
transform: translateZ(0)
}
</style>
<div >
composited - 3dtransform
</div>
可以看到是因為使用的CSS 3D transform，創建了一個復合層
demo2. 對opacity、transform、filter應用 animation(actived) or transition(actived)
<style>
@keyframes move{
0%{
top: 0;
}
50%{
top: 600px;
}
100%{
top: 0;
}
}
@keyframes opacity{
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#composited{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 0;
top: 0;
}
.both{
animation: move 2s infinite, opacity 2s infinite;
}
.move{
animation: move 2s infinite;
}
</style>
<div id="composited" >
composited - animation
</div>
<script>
setTimeout(function(){
const dom = document.getElementById('composited')
dom.className = 'move'
},5000)
</script>
這里我們定義了兩個keyframes(move、opacity)，還有兩個class(both、move)，起初 #composited 的 className = 'both'，5秒延時器后，className = 'move'，我們來看看瀏覽器的實際變化，
起初：#composited 創建了一個復合層，并且運動時 fps 沒有波動，性能很穩定
5秒后：復合層消失，運動時 fps 會發生抖動，性能開始變得不再穩定
如何查看復合層及fps
在瀏覽器的 Dev Tools 中選擇 More tools，并勾選 Rendering 中的 FPS meter
影片性能最優化
之前，我們提到了頁面呈現出來所經歷的渲染流水線，其實從性能方面考慮，最理想的渲染流水線是沒有布局和繪制環節的，為了實作上述效果，就需要只使用那些僅觸發 Composite 的屬性，
目前，只有兩個屬性是滿足這個條件的：transforms 和 opacity（區域分瀏覽器支持），
相關資訊可查看：css Triggers
總結
提升為合成層簡單說來有以下幾點好處：
- 合成層的位圖，會交由 GPU 合成，比 CPU 處理要快
- 當需要 repaint 時，只需要 repaint 本身，不會影響到其他的層
- 對于 transform 和 opacity 效果，部分瀏覽器不會觸發 Layout 和 Paint， 相關資訊可查看：css Triggers
缺點：
- 創建一個新的合成層并不是免費的，它得消耗額外的記憶體和管理資源，
- 紋理上傳后會交由 GPU 處理，因此我們還需要考慮 CPU 和 GPU 之間的帶寬問題、以及有多大記憶體供 GPU 處理這些紋理的問題
大多數人都很喜歡使用3D屬性 translateZ(0) 來進行所謂的硬體加速，以提升性能，但我們還需要切實的去分析頁面的實際性能表現，不斷的改進測驗，這樣才是正確的性能優化途徑，
參考資料
無線性能優化：Composite - 淘系前端團隊
歡迎關注凹凸實驗室博客：aotu.io
或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/302693.html
標籤：JavaScript
上一篇：回圈結構 while do-while for break continue語法
下一篇：「免費開源」基于Vue和Quasar的前端SPA專案crudapi零代碼開發平臺后臺管理系統實戰之元資料匯出匯入（十五）