1. 提升移動或漸變元素的繪製層
繪製並非總是在記憶體中的單層畫面裡完成的。實際上，瀏覽器在必要時將會把一幀畫面繪製成多層畫面，
然後將這若干層畫面合併成一張圖片顯示到螢幕上。通過渲染層提升可以減小繪製區域，我們可以用除錯工具檢視到繪製層：
在頁面中新建一個渲染層最好的方式就是使用 will-change 屬性，同時再與 transform 屬性一起使用，就會建立一個新的組合層：
.element { will-change: transform; }
對於那些目前還不支援 will-change 屬性、但支援建立渲染層的瀏覽器，可以使用一個 3D transform
屬性來強制瀏覽器建立一個新的渲染層：
.element { transform: translateZ(0); }
注意: 別盲目建立渲染層，一定要分析其實際效能表現。因為建立渲染層是有代價的，每建立一個新的渲染層，
就意味著新的記憶體分配和更復雜的層的管理。並且在移動端 GPU 和 CPU 的頻寬有限制，
建立的渲染層過多時，合成也會消耗跟多的時間。
2. 元素提升為合成層後，transform 和 opacity 才不會觸發 paint，如果不是合成層，則其依然會觸發 paint
在 Blink 和 WebKit 核心的瀏覽器中，對於應用了 transition 或者 animation的 opacity 元素，瀏覽器會將渲染層提升為合成層。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 來人為地強制性地建立一個合成層。