關於硬件渲染瞭解一下

瀏覽器的渲染方式，主要分爲兩種，第一種是軟件渲染，第二種是硬件渲染。若是繪製工做只是由 CPU 完成，那麼稱之爲軟件渲染，若是繪製工做由 GPU 完成，則稱之爲硬件渲染。軟件渲染與硬件渲染有不一樣的緩存機制，只要咱們合理利用，就能發揮出最好的效果。

開啓

瀏覽器還有一種名爲硬件渲染的渲染方式，它是使用 GPU 的硬件能力來幫助渲染頁面,那麼是怎麼設置的？

• 啓用硬件加速 在chrome的地址欄中輸入chrome://settings/回車滾動頁面到地步，點擊顯示高級設置再次滾動到頁面地步，找到使用硬件加速模式
• 開啓gup硬件加速 在chrome的地址欄中輸入chrome://flags/#disable-accelerated-video-decode找到硬件加速的視頻解碼，點擊啓用

完成上面兩步後重啓瀏覽器

能作什麼

你們都知道在頁面性能優化的時候都會用到 GPU 加速、硬件加速相似方式，瀏覽器一幀（1000/16ms）會依次執行如下，減小或者避免 layout，paint 可讓頁更加流暢：

1. JavaScript：JavaScript 實現動畫效果，DOM 元素操做等。
2. Style（計算樣式）：肯定每一個 DOM 元素應該應用什麼 CSS 規則。
3. Layout（佈局）：計算每一個 DOM 元素在最終屏幕上顯示的大小和位置。因爲 web 頁面的元素佈局是相對的，因此其中任意一個元素的位置發生變化，都會聯動的引發其餘元素髮生變化，這個過程叫 reflow。
4. Paint（繪製）：在多個層上繪製 DOM 元素的的文字、顏色、圖像、邊框和陰影等。
5. Composite（渲染層合併）：按照合理的順序合併圖層而後顯示到屏幕上。

一個頁面是由多個圖層最後造成一個完整的合成層才被渲染出來效果就像這樣：

硬件渲染 WebKit 會依據指定條件決定將那些 RenderLayer 對象組合在一塊兒造成一個新層並緩存在 GPU，這些新層咱們統稱爲合成層（Compositing Layer）。這些合成層提高成獨立的層，被獨立出來以後，便不會再影響其餘 dom 的佈局。若是發生 偏移、透明度等等變換 GPU 要作的只是把更新的合成層進行相應的變換並送入 Compositor 從新合成便可，利用這個優勢咱們能夠把頁面中一些佈局常常變換的 dom 提高到獨立的層。

在上圖中黃色邊框表示放到了一個新的複合層（composited layer）中渲染，左側的列表裏列出頁面裏存在哪些渲染層，右側的 Details 顯示的是這些渲染層的詳細信息，包括渲染層的大小、造成緣由等。

如何觸發合成層

1. 根節點 document
2. HTML5 Video或者Canvas元素。
3. 元素有一個 z-index 較低且包含一個複合層的兄弟元素
4. 3D 或透視變換(perspective，transform) CSS 屬性 好比經常使用的 （設置translateZ()、backface-visibility爲hidden）

注意事項

也就是上面第三條，英文原版是這麼說

Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)

意思是，若是有一個元素，它的兄弟元素在複合層中渲染，而這個兄弟元素的 z-index 比較小，且兩個元素有重疊（顯式的重疊好比能夠經過 margin 的負值來實現，隱式的重疊好比未指定本身及浮動層兄弟元素的 z-index），那麼這個元素（不論是不是應用了硬件加速樣式）也會被放到複合層中。

因此用輪播、動畫loading等頁面的時候要注意下要遵循最小化影響原則，若是調試看到有不少 黃色邊框 就要注意了。

使用 3D 硬件加速提高動畫性能時，最好給元素增長一個 z-index 屬性，人爲干擾複合層的排序，能夠有效減小 chrome 建立沒必要要的複合層，提高渲染性能，移動端優化效果尤其明顯。

關於 CSS3 will-change

前面說的那些有點hach，CSS3 will-change 纔是正規軍是屬於 web 標準屬性，兼容性這塊 Chrome/FireFox/Opera 是支持的，他是提早通知瀏覽器元素將要作什麼動畫，讓瀏覽器提早準備合適的優化設置，具體值：

/* 關鍵字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 兩個<animateable-feature>示例 */

/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;
複製代碼

will-change 雖然能夠加速,可是不可濫用。。。