相对于 translateZ(0) 的 CSS 性能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10814178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS performance relative to translateZ(0)
提问by Ahmed Nuaman
A number of blogs have expressed the performance gain in 'tricking' the GPU to think that an element is 3D by using transform: translateZ(0)to speed up animations and transitions. I was wondering if there are implications to using this transform in the following manner:
许多博客都表达了通过使用transform: translateZ(0)加速动画和过渡来“欺骗”GPU 认为元素是 3D 的性能提升。我想知道以以下方式使用此转换是否有影响：
* {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
回答by Dan Eden
CSS transformations create a new stacking context and containing block, as described in the spec.In plain English, this means that fixed position elements with a transformation applied to them will act more like absolutely positioned elements, and z-indexvalues are likely to get screwed with.
CSS 转换创建了一个新的堆叠上下文和包含块，如规范中所述。用简单的英语来说，这意味着应用了变换的固定位置元素将更像绝对定位元素，并且z-index值可能会被搞砸。
If you take a look at this demo, you'll see what I mean. The second div has a transformation applied to it, meaning that it creates a new stacking context, and the pseudo elements are stacked on top rather than below.
如果你看看这个演示，你就会明白我的意思。第二个 div 应用了一个转换，这意味着它创建了一个新的堆叠上下文，并且伪元素堆叠在顶部而不是底部。
So basically, don't do that. Apply a 3D transformation only when you need the optimization. -webkit-font-smoothing: antialiased;is another way to tap into 3D acceleration without creating these problems, but it only works in Safari.
所以基本上，不要这样做。仅在需要优化时应用 3D 转换。-webkit-font-smoothing: antialiased;是另一种在不产生这些问题的情况下利用 3D 加速的方法，但它仅适用于 Safari。
回答by o.v.
If you want implications, in some scenarios Google Chrome performance is horrible with hardware acceleration enabled. Oddly enough, changing the "trick" to -webkit-transform: rotateZ(360deg);worked just fine.
如果您想要暗示，在某些情况下，启用硬件加速的 Google Chrome 性能会很糟糕。奇怪的是，将“技巧”更改为-webkit-transform: rotateZ(360deg);工作正常。
I don't believe we ever figured out why.
我不相信我们曾经想出原因。
回答by Neo
It forces the browser to use hardware acceleration to access the device's graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
它强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞扬。另一方面，Web 应用程序在浏览器的上下文中运行，这让软件可以完成大部分（如果不是全部）渲染，从而减少转换的马力。但是 Web 一直在追赶，大多数浏览器供应商现在通过特定的 CSS 规则提供图形硬件加速。
Using -webkit-transform: translate3d(0,0,0);will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
使用-webkit-transform: translate3d(0,0,0);将使 GPU 开始执行 CSS 转换，使它们更平滑（更高的 FPS）。
Note:translate3d(0,0,0)does nothing in terms of what you see. It moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
注意：translate3d(0,0,0)就你所看到的而言，什么都不做。它将对象在 x、y 和 z 轴上移动 0px。这只是一种强制硬件加速的技术。
Good read here: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
在这里阅读好：http: //www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
回答by J. Hogue
I can attest to the fact that -webkit-transform: translate3d(0, 0, 0);will mess with the new position: -webkit-sticky;property. With a left drawer navigation pattern that I was working on, the hardware acceleration I wanted with the transform property was messing with the fixed positioning of my top nav bar. I turned off the transform and the positioning worked fine.
我可以证明这-webkit-transform: translate3d(0, 0, 0);会扰乱新position: -webkit-sticky;属性的事实。使用我正在处理的左侧抽屉导航模式，我想要的具有转换属性的硬件加速与顶部导航栏的固定位置混乱。我关闭了变换，定位工作正常。
Luckily, I seem to have had hardware acceleration on already, because I had -webkit-font-smoothing: antialiasedon the html element. I was testing this behavior in iOS7 and Android.
幸运的是，我似乎已经启用了硬件加速，因为我-webkit-font-smoothing: antialiased启用了 html 元素。我正在 iOS7 和 Android 中测试这种行为。
回答by Perry
On mobile devices sending everything to the GPU will cause a memory overload and crash the application. I encountered this on an iPad app in Cordova. Best to only send the required items to the GPU, the divs that you're specifically moving around.
在移动设备上，将所有内容发送到 GPU 会导致内存过载并使应用程序崩溃。我在 Cordova 的 iPad 应用程序上遇到了这个问题。最好只将所需的项目发送到 GPU，即您专门移动的 div。
Better yet, use the 3d transitionstransforms to do the animations like translateX(50px) as opposed to left:50px;
更好的是，使用 3d过渡变换来执行诸如 translateX(50px) 而不是 left:50px 之类的动画；
