translate3d 与翻译性能

Question

我们现在都知道，特别是从那篇好文章中，我们应该更喜欢 css 变换而不是动画位置。

但是我们可以在

translate()

和

translate3d()

之间做出选择...

哪一个通常更快？

Answer 1

下面这个网站运行测试比较

translate()

、

translate3d()

和其他几个属性。据它称，

translate3d()

在大多数浏览器中速度更快。

Answer 2

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

Answer 3

正如 Cameron 建议的那样，

translate3d

在很多浏览器中应该更快，大多数浏览器使用 GFX 硬件加速来加速渲染。尤其是在 WebKit 上，

translate3d

是在页面项上强制硬件加速的首选方式。

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

Answer 4

总长：

这些之间的性能差异通常可以忽略不计。

全文：

正如已经提到的，

translate3d

通常可以将动画推入硬件加速，这非常有用并且可以带来性能优势。虽然这看起来是一件好事，并建议您始终使用

translate3d

，但事实并非如此。您应该仅在需要时使用硬件加速。过度使用实际上会导致性能恶化。

最终，每个翻译选项之间的性能差异几乎可以忽略不计。您应该使用适合您的设计的一种。如果需要一维变换，请使用

translateX()

或

translateY()

；如果需要 2D 变换，请使用

translate()

；如果您需要 3D 变换，请使用

translate3d()

。这样做将使您的代码更具可读性和可维护性。

如果您需要将动画卸载到 GPU，请这样做，但这不应该是默认设置。

Answer 5

为那些从 Google 来到这里想知道为什么 Raspberry Pi 上的浏览器在处理 CSS 动画方面表现不佳的人添加对话。正如许多其他人所说，

translate3d

可以“强制”硬件加速。这是网络开发人员用于响应式设计的技巧。他们发现强制 GPU 在智能手机上特别有用。事实证明它对于 Pi 也非常有效。