內(nèi)容參考以下文章
http://www.reibang.com/p/8a21deb5e0b2
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
https://juejin.im/entry/59dc9aedf265da43200232f9
使用transform更好欲间。
瀏覽器渲染頁(yè)面涉及到兩個(gè)線程，渲染線程和排版線程断部。
渲染主線程進(jìn)行元素的尺寸猎贴、位置等的計(jì)算，并且繪制出位圖蝴光，然后交給排版線程她渴。
排版線程通過(guò)GPU進(jìn)行圖像合成最終繪制到屏幕上。
瀏覽器在渲染的時(shí)候蔑祟，當(dāng)渲染對(duì)象處于相同的坐標(biāo)空間時(shí)趁耗，就會(huì)形成渲染層，多個(gè)渲染層公用一個(gè)GraphicsLayer來(lái)向屏幕進(jìn)行像素繪制疆虚。而某些特殊的渲染層苛败，被稱為合成層（Compositing Layer），擁有獨(dú)立的GraphicsLayer径簿，然后會(huì)被GPU直接處理罢屈。
那么不同的屬性引起的重新繪制分為3種情況：
- layout -> paint -> composite
- paint -> composite
- composite
transform和opacity屬性，會(huì)使得瀏覽器將該元素直接提升到合成層篇亭。
于是缠捌，使用絕對(duì)定位做動(dòng)畫時(shí)，主線程需要不斷的計(jì)算位置译蒂，合成位圖曼月，同步到合成線程繪制谊却，消耗較大；而使用transform進(jìn)行動(dòng)畫時(shí)哑芹，主線程只需第一次時(shí)進(jìn)行布局計(jì)算和位圖繪制炎辨，之后的動(dòng)畫過(guò)程都在GPU進(jìn)行繪制，兩個(gè)線程不再來(lái)回切換绩衷，因此比較流暢蹦魔。
另外激率，其他可能導(dǎo)致瀏覽器將一個(gè)元素提升到合成層的因素包括：
- 3D變換：translate3d咳燕，translateZ
- video、canvas乒躺、iframe元素
- 通過(guò)Element.animate()的transform和opacity動(dòng)畫
- 通過(guò)CSS transition 和animation設(shè)置的transform和opacity動(dòng)畫
- position: fixed
- will-change
- filter
