内容参考以下文章
//www.greatytc.com/p/8a21deb5e0b2
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
https://juejin.im/entry/59dc9aedf265da43200232f9
使用transform更好。
浏览器渲染页面涉及到两个线程，渲染线程和排版线程。
渲染主线程进行元素的尺寸、位置等的计算，并且绘制出位图，然后交给排版线程。
排版线程通过GPU进行图像合成最终绘制到屏幕上。
浏览器在渲染的时候，当渲染对象处于相同的坐标空间时，就会形成渲染层，多个渲染层公用一个GraphicsLayer来向屏幕进行像素绘制。而某些特殊的渲染层，被称为合成层（Compositing Layer），拥有独立的GraphicsLayer，然后会被GPU直接处理。
那么不同的属性引起的重新绘制分为3种情况：
- layout -> paint -> composite
- paint -> composite
- composite
transform和opacity属性，会使得浏览器将该元素直接提升到合成层。
于是，使用绝对定位做动画时，主线程需要不断的计算位置，合成位图，同步到合成线程绘制，消耗较大；而使用transform进行动画时，主线程只需第一次时进行布局计算和位图绘制，之后的动画过程都在GPU进行绘制，两个线程不再来回切换，因此比较流畅。
另外，其他可能导致浏览器将一个元素提升到合成层的因素包括：
- 3D变换：translate3d，translateZ
- video、canvas、iframe元素
- 通过Element.animate()的transform和opacity动画
- 通过CSS transition 和animation设置的transform和opacity动画
- position: fixed
- will-change
- filter
