一个将DOM元素平移100像素的动画效果，是通过绝对定位改变left、top值来做好，还是通过transform： translate来做好？为什么？

内容参考以下文章
https://www.jianshu.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种情况：

1. layout -> paint -> composite
2. paint -> composite
3. 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