如何變成復合圖層（硬件加速）

將該元素變成一個復合圖層，就是傳說中的硬件加速技術

• 最常用的方式：translate3d、translateZ

• opacity屬性/過渡動畫（需要動畫執行的過程中才會創建合成層，動畫沒有開始或結束後元素還會回到之前的狀態）

• will-chang屬性（這個比較偏僻），一般配合opacity與translate使用（而且經測試，除了上述可以引發硬件加速的屬性外，其它屬性並不會變成復合層），作用是提前告訴瀏覽器要變化，這樣瀏覽器會開始做一些優化工作（這個最好用完後就釋放）

• <video><iframe><canvas><webgl>

  等元素

• 其它，譬如以前的flash插件

absolute和硬件加速的區別

可以看到，absolute雖然可以脫離普通文檔流，但是無法脫離默認復合層。
所以，就算absolute中信息改變時不會改變普通文檔流中render樹，但是，瀏覽器最終繪制時，是整個復合層繪制的，所以absolute中信息的改變，仍然會影響整個復合層的繪制。

（瀏覽器會重繪它，如果復合層中內容多，absolute帶來的繪制信息變化過大，資源消耗是非常嚴重的）

而硬件加速直接就是在另一個復合層了（另起爐竈），所以它的信息改變不會影響默認復合層（當然了，內部肯定會影響屬於自己的復合層），僅僅是引發最後的合成（輸出視圖）

復合圖層的作用？

一般一個元素開啟硬件加速後會變成復合圖層，可以獨立於普通文檔流中，改動後可以避免整個頁面重繪，提升性能

但是盡量不要大量使用復合圖層，否則由於資源消耗過度，頁面反而會變的更卡

硬件加速時請使用index

使用硬件加速時，盡可能的使用index，防止瀏覽器默認給後續的元素創建復合層渲染

具體的原理時這樣的：
webkit CSS3中，如果這個元素添加了硬件加速，並且index層級比較低，
那麽在這個元素的後面其它元素（層級比這個元素高的，或者相同的，並且releative或absolute屬性相同的），會默認變為復合層渲染，如果處理不當會極大的影響性能

簡單點理解，其實可以認為是一個隱式合成的概念：如果a是一個復合圖層，而且b在a上面，那麽b也會被隱式轉為一個復合圖層，這點需要特別註意

另外，這個問題可以在這個地址看到重現（原作者分析的挺到位的，直接上鏈接）：http://web.jobbole.com/83575/

摘自https://mp.weixin.qq.com/s/vIKDUrbuxVNQMi_g_fiwUA

復合圖層（硬件加速）