相对于translateZ（0）的CSS性能

96

许多博客都表示，通过“ transform: translateZ(0)加速” GPU来提高动画和过渡的速度，可以认为元素是3D的，从而提高了性能。我想知道以下列方式使用此转换是否有意义：

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

performance css translate-animation

— 艾哈迈德·努曼（Ahmed Nuaman）
source

6

您可以链接到那些博客文章吗？

— 尔根·保罗

@PineappleUndertheSea这个：blog.teamtreehouse.com/…在这里发给我。

顺便说一句，-o-transform: translateZ(0)从来都不是一回事。caniuse.com/#search=translate3d

— Volker E.

@Ahmed Nuaman是的，这不仅是一个把戏。但它已在某些应用中正式使用。但是，如果您最终在没有GPU的设备上（低端）...我不确定其性能如何。但是由于处理器的作用（2D图形）仅出于存在3D命令的原因而委托给GPU，尽管它没有最终影响。3D在其中使用了多个核心，并且执行速度更快。这就是这里的道理。需要更多调查...

— TooGeeky

102

CSS转换会创建一个新的堆栈上下文和包含块，如规范中所述。用通俗易懂的英语来说，这意味着对固定位置的元素应用了转换后，它们的行为将更像是绝对定位的元素，并且z-index值很容易被拧紧。

如果您看一下这个演示，您将明白我的意思。第二个div对其应用了转换，这意味着它创建了一个新的堆叠上下文，并且伪元素堆叠在顶部而不是下面。

所以基本上，不要那样做。仅在需要优化时才应用3D变换。-webkit-font-smoothing: antialiased;是利用3D加速而不产生这些问题的另一种方法，但它仅在Safari中有效。

— 丹·伊甸园
source

27

如果您希望获得启示，在某些情况下启用了硬件加速功能，Google Chrome的性能将非常糟糕。奇怪的是，将“技巧”更改为-webkit-transform: rotateZ(360deg);正常。

我不相信我们曾经想出原因。

— 卵
source

3

我在Safari 5和6中使用max-height出现了图像压缩和动画严重错误等问题。当我禁用GPU加速（translateZ（0））时，一切都按预期工作，但是动画不够流畅。我将translateZ（0）更改为rotateZ（360deg），然后突然动画变得流畅且硬件加速，再也没有问题了。

— jakub_jo 2015年

14

它强制浏览器使用硬件加速来访问设备的图形处理单元（GPU），以使像素飞行。另一方面，Web应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而降低了转换所需的功能。但是Web一直在追赶，大多数浏览器供应商现在都通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0);将使GPU投入CSS过渡的操作，使其更加平滑（较高的FPS）。

注意： translate3d(0,0,0)根据您看到的内容，不会执行任何操作。它将对象沿x，y和z轴移动0px。这只是强制硬件加速的一项技术。

好的阅读这里：http : //www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

— 新
source

7

我可以证明这一事实-webkit-transform: translate3d(0, 0, 0);会与新position: -webkit-sticky;属性混淆。使用我正在处理的左抽屉导航模式，我希望使用transform属性的硬件加速使顶部导航栏的固定位置陷入混乱。我关闭了转换，定位正常。

幸运的是，我似乎已经启用了硬件加速，因为我-webkit-font-smoothing: antialiased使用了html元素。我正在iOS7和Android中测试此行为。

— 霍格
source

5

在移动设备上，将所有内容发送到GPU都会导致内存过载并使应用程序崩溃。我在Cordova的iPad应用程序上遇到了这个问题。最好只将所需的项目发送到GPU（您正在移动的div）。

更好的是，使用3d 过渡转换来制作诸如transformX（50px）之类的动画，而不是left：50px;

— 佩里
source

1

您是说“使用3d转换”而不是“使用3d转换”吗？

— Isius