translate3d 与翻译性能答案

【问题标题】：translate3d vs translate performancetranslate3d 与翻译性能
【发布时间】：2014-04-02 09:43:33
【问题描述】：

我们现在都知道，尤其是 that nice article，我们应该更喜欢 css-transforms 而不是动画位置。

但我们可以在 translate() 和 translate3d() 之间进行选择...

哪个一般更快？

【问题讨论】：

在我的 chrome 测试之后。发现 translateX 比 translate3d 快，不解enter image description here enter image description here

【解决方案1】：

下面的这个网站运行测试比较 translate()、translate3d() 和其他几个属性。据它说，translate3d() 在大多数浏览器中都更快。

【讨论】：

那个测试是假的，这个问题是关于渲染性能的——在这个 jsperf 中根本没有测试过
@abernier 不，您无法将其与 jsperf 进行比较。要进行比较，您可以使用 chrome 开发工具的 Timeline。
希望获得一些有关渲染性能的最新硬数据，因为我仍然对 2D 和 3D 转换之间的真正区别感到困惑，以及将动画从 2D 转换为 3D 是否只是一个微优化.我找到的所有文章和资源都是 3 年和 4 年以上的。
就我而言，翻译更快。不是 translate3d
这个测试是假的，因为每个版本的 chrome 都有非常不同的结果。完全不能相信这个。一个更好的测试是让我看动画不？

【解决方案2】：

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

虽然根据我的经验，有时使用 3d 转换存在一个缺点 - 在某些浏览器版本/操作系统组合中（我正在看你的是 macOS + Safari）硬件加速渲染可能会稍微改变字体平滑和插值，从而导致轻微闪烁或模糊。这些情况大多可以解决，但应牢记。

【讨论】：

【解决方案3】：

使用 translate3d 将 CSS 动画推入硬件加速。即使您要进行基本的 2d 翻译，也可以使用 translate3d 以获得更多功能！所以“T3d”更好，因为它告诉 CSS 动画以 3d 的力量推动动画！这就是为什么它更快。（Cameron Little的回答就是证明）

【讨论】：

如果我只想垂直翻译怎么办？我会为此使用 translateY() 。但是我怎样才能只用 translate3d 实现垂直翻译呢？
@Limpuls 首先：你应该问你自己的问题。其次：只需将translate3d 的y 值设置为在垂直轴上平移即可。 transform: translate3d(0, 42px, 0);