相对于 translateZ(0) 的 CSS 性能答案

【问题标题】：CSS performance relative to translateZ(0)相对于 translateZ(0) 的 CSS 性能
【发布时间】：2012-06-04 13:31:56
【问题描述】：

许多博客都表达了通过使用transform: translateZ(0) 来加速动画和过渡，“欺骗”GPU 认为元素是 3D 的性能提升。我想知道以下列方式使用此转换是否有影响：

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

【问题讨论】：

你能链接到那些博客文章吗？
@PineappleUndertheSea 这个：blog.teamtreehouse.com/… 发给我这里。
顺便说一句，-o-transform: translateZ(0) 从来都不是一件事。 caniuse.com/#search=translate3d
@Ahmed Nuaman 是的，这不仅仅是一个把戏。但它在某些应用程序中正式使用。但是，如果您最终使用没有 GPU 的设备（低端）......我不确定它的性能如何。但是，如果处理器可以做什么（2D 图形）被委派给 GPU，只是因为有 3D 命令，尽管它没有最终影响。而且 3D 在其内部使用多个内核并且执行速度更快。这就是这里的意义所在。需要更多调查...

标签： performance css translate-animation

【解决方案1】：

CSS 转换创建一个新的堆叠上下文和包含块，如 the spec. 中所述可能会被搞砸。

如果你看看this demo，你就会明白我的意思。第二个 div 应用了一个转换，这意味着它创建了一个新的堆叠上下文，并且伪元素堆叠在顶部而不是底部。

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

【讨论】：

【解决方案2】：

如果你想要暗示，in some scenarios Google Chrome performance is horrible with hardware acceleration enabled。奇怪的是，将“技巧”更改为 -webkit-transform: rotateZ(360deg); 效果很好。

我不相信我们曾经弄清楚原因。

【讨论】：

我在 Safari 5 和 6 中使用 max-height 时遇到了压缩图像和严重错误的动画等问题。当我禁用 GPU 加速 (translateZ(0)) 时，一切都按预期工作，但动画没有不够平滑。我将 translateZ(0) 更改为 rotateZ(360deg)，突然动画变得流畅，硬件加速，不再有任何问题。

【解决方案3】：

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

更好的是，使用 3d ~~transitions~~ 变换来制作像 translateX(50px) 这样的动画，而不是 left:50px；

【讨论】：

您的意思是“使用 3d 转换”而不是“使用 3d 转换”吗？

【解决方案4】：

我可以证明-webkit-transform: translate3d(0, 0, 0); 会与新的position: -webkit-sticky; 属性混淆。使用我正在处理的左抽屉导航模式，我想要的带有 transform 属性的硬件加速与我的顶部导航栏的固定位置相混淆。我关闭了变换，定位工作正常。

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

【讨论】：

【解决方案5】：

它强制浏览器使用硬件加速来访问设备的图形处理单元 (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/

【讨论】：