CSS Render Layer

此文章是 FrontendMaster 上的 Advanced Web Development Quiz 課程筆記

問題

Which of the following properties causes the element to be promoted to its own RenderLayer?

Select all the correct answers.

[1] z-index: 1
[2] translate3d: (0, 0, 0)
[3] will-change: transform
[4] transform: rotate(45deg)
[5] position: fixed
[6] position: absolute

瀏覽器大致的呈現畫面的流程是：layout > paint > compositing (把各個 Layer 拼起來)
而這個 Render Layer 就是瀏覽器把元素分離成獨立的 Layer，之後若有位置、透明度...等變化時，可以只在 compositing 階段完成即可，不需要重新計算 layout、paint，這樣子就可以跳過前兩個步驟來降低成本

需要注意的是，每多一層 Layer，就多一份記憶體與管理成本，所以還是不能濫用

不同的瀏覽器與版本可能會有不同的結果

3D / transform 相關：translate3d(...)、translateZ(0) 這類 3D transform 常被用來「強制」為元素建立到新的 Layer，一般 transform（例如 rotate(...)）也常觸發。
position: fixed：它常促使獨立 Layer，理由是 fixed 元素要相對視窗固定，若每次 scroll 都重 paint 畫面會很不順暢。
will-change：will-change: transform、will-change: opacity 是告訴瀏覽器「等等會改這些」，用來提前告訴瀏覽要建立 Layer 的屬性。
視覺效果：opacity、filter（這兩個屬性只能在 compositing 處理，如果有相關的動畫依靠這些屬性，可以直接為這些元素加上 will-change）
backface-visibility: hidden、video 元素、以及 WebGL canvas

需要注意的是 z-index、position: absolute 都不會建立出新的 Layer

[2] translate3d: (0, 0, 0)
[3] will-change: transform
[4] transform: rotate(45deg)
[5] position: fixed