translate3d与翻译性能

Question

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

但我们可以选择translate()和translate3d().

哪一种通常更快？

Answer 1

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

http://jsperf.com/translate3d-vs-xy

Answer 2

translate3d的使用将CSS动画推向硬件加速。即使你想做一个基本的2d翻译，使用translate3d来获得更多的能量！所以'T3d‘是更好的，因为它告诉CSS动画推动动画的三维力量！这就是它更快的原因。(卡梅隆·利特尔的回答是证据)

Answer 3

正如卡梅隆所建议的那样，translate3d在很多浏览器中应该更快，大多数浏览器使用GFX硬件加速来加快渲染速度。特别是在WebKit上，translate3d是强制页面项上硬件加速的首选方法。

尽管在我的经验中，有时使用3d转换有一个缺点--在某些浏览器版本/OS组合(我正在看的是macOS+ Safari )--硬件加速渲染可以轻微地改变字体平滑和插值，从而导致轻微的闪烁或模糊。这些情况大多是可以解决的，但要记住。