translate3d vs翻译表现

Question

我们现在都知道,特别是从那篇好文章中我们应该更喜欢css-transforms来制作动画位置.

但是,我们得到了之间的选择translate()和translate3d()...

哪一个通常更快？

Answer 1

下面这个网站运行测试,比较translate(),translate3d()和其他几个属性.根据它,translate3d()在大多数浏览器中更快.

那个测试是假的,这个问题是关于渲染性能 - 在这个jsperf中根本没有测试过 (25认同)
@abernier没有,你无法与jsperf进行比较.要进行比较,您可以使用chrome dev工具的时间轴. (2认同)
很想获得一些关于渲染性能的当前硬数据，因为我仍然对 2D 和 3D 转换之间的真正区别感到困惑，如果将动画从 2D 转换为 3D 只是一个微优化。我找到的所有文章和资源都有 3 年和 4 年以上的历史。 (2认同)

Answer 2

translate3d的使用将CSS动画推入硬件加速.即使您正在寻找基本的2d翻译,也可以使用translate3d获得更多功能!因此'T3d'更好,因为它告诉CSS动画以3d动力推动动画!这就是它更快的原因.(Cameron Little的答案就是证据)

Answer 3

正如Cameron建议的那样translate3d,在很多浏览器中应该更快,主要是那些使用gfx硬件加速来加速渲染的浏览器.尤其是webkit translate3d是强制页面项上硬件加速的首选方式.

虽然在mit体验中有时候使用3d变换有一个缺点 - 在某些浏览器版本/ os组合中(osx + safari我正在看着你)硬件加速渲染可能会略微改变字体平滑以及插值,从而导致轻微的闪烁或模糊.这些情况大多可以解决,但应该牢记在心.