相对于translateZ(0)的CSS性能

许多博客都表示,通过使用transform: translateZ(0)来加速animation和转换,可以“欺骗”GPU来认为元素是3D。 我想知道如果以下面的方式应用这种变换,会产生什么样的影响:

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

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

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

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

如果你想要的话, 在某些情况下,谷歌浏览器的性能是可怕的,硬件加速启用 。 奇怪的是,改变“诀窍” -webkit-transform: rotateZ(360deg); 工作得很好。

我不相信我们知道为什么。

它强制浏览器使用硬件加速访问设备的graphics处理单元(GPU)使像素飞行。 另一方面,Web应用程序运行在浏览器的上下文中,这使软件可以执行大部分(如果不是全部)的渲染,从而导致转换的function减弱。 但是networking一直在追赶,大多数浏览器厂商现在都通过特定的CSS规则来提供graphics硬件加速。

使用-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/

我可以certificate-webkit-transform: translate3d(0, 0, 0); 会混淆新的position: -webkit-sticky; 属性。 当我正在处理左侧抽屉导航模式时,我想要使用transform属性的硬件加速与我的顶级导航栏的固定位置搞混了。 我closures了转换,定位工作正常。

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

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

更好的是,使用3d 转换转换来做像translateX(50px)的animation,而不是left:50px;