CSS性能相对于translateZ(0)

Question

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

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

Answer 1

CSS转换创建一个新的堆叠上下文并包含块,如规范中所述.简单来说,这意味着应用了变换的固定位置元素将更像绝对定位的元素,并且z-index值可能会被搞砸.

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

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

Answer 2

如果您需要影响,在某些情况下,启用硬件加速后,Google Chrome的性能会非常糟糕.奇怪的是,改变"技巧" -webkit-transform: rotateZ(360deg);工作得很好.

我不相信我们曾经弄明白为什么.

Answer 3

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

Answer 4

我可以证明这个事实-webkit-transform: translate3d(0, 0, 0);会搞乱新position: -webkit-sticky;房产.使用我正在处理的左抽屉导航模式,我想要的转换属性的硬件加速是弄乱我的顶部导航栏的固定位置.我关闭了变换,定位工作正常.

幸运的是,我似乎已经有硬件加速,因为我有-webkit-font-smoothing: antialiasedhtml元素.我在iOS7和Android中测试了这种行为.

Answer 5

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

更好的是,使用3d 过渡变换来完成动画,如translateX(50px)而不是左:50px;