尽可能使用translate而不是改变top/left进行动画（翻译）

前言

    本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left，本文有改动，添加了一些做者本身的理解，不当之处还请看客指出。

翻译正文

    目前咱们对文档中的某个元素进行移动有两种方式，

        1，使用transform提供的translate族函数进行缓动

        2，对元素进行绝对定位，在制定时间内改变top/left值

    可是，这两种方式有什么区别呢？

    长话短说，做者在经过模拟测试，并在chrome上检测了动画的FPS，发现了二者的显著区别：性能。

    

    左上方的图片是经过改变元素top/left进行动画的帧率，而右上方则是调用translate函数的帧率。咱们能够明显看出左图的每一帧都执行了相对较长时间的paint，在每一帧内，cpu都须要计算该元素的其余样式，特别是相对须要复杂计算的盒阴影，渐变，圆角等样式，最后都须要将这些样式应用到该元素内。从这个角度看，若是对于较为老旧的移动设备进行相对复杂的动画，那么效果确定不理想。

    而经过调用translate，会启动硬件加速，即在GPU层对该元素进行渲染。这样，CPU就会相对解放出来进行其余的计算，GPU对样式的计算相对较快，且保证较大的帧率。咱们能够经过2d和3d的transform来启用GPU计算。

总结

    最后，总结下对元素进行动画的一些要点：

        1，尽可能使用keyframes和transform进行动画，这样浏览器会自身分配每帧的长度，并做出优化

        2，若是非要使用js来进行动画，使用requestAnimateFrame

        3，使用2d transform而不是改变top/left的值，这样会有更短的repaint时间和更圆滑的动画效果

        4，移动端的动画效果可能会比pc端的差，所以必定要注意性能优化，尽可能减小动画元素的DOM复杂性，待动画结束后异步执行DOM操做