CSS 为什么在 CSS3 中启用硬件加速会降低性能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10014461/
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
Why does enabling hardware-acceleration in CSS3 slow down performance?
提问by Timo
I am moving 6000 small div elements in an css3 experiment using a transition from top: 0to top: 145pxto test performance.
我正在使用从top: 0到top: 145px到测试性能的转换在 css3 实验中移动 6000 个小 div 元素。
Using nohardware-acceleration runs smooth on Google Chrome.
使用没有硬件加速运行平稳谷歌浏览器。
If I enable hardware-acceleration via translateZ(0)performance becomes horrible.
如果我通过translateZ(0)性能启用硬件加速变得可怕。
Why is that so?
为什么呢？
Here is my example code: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
这是我的示例代码：http: //dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
Update(2014-11-13): Since this question is still attracting attention I'd like to point out that the problem itself still seems to exist although the mentioned stuttering might not be visible anymore in the provided demo on modern hardware. Older devices might still see performance issues.
更新（2014 年 11 月 13 日）：由于这个问题仍然引起关注，我想指出问题本身似乎仍然存在，尽管在现代硬件上提供的演示中提到的口吃可能不再可见。较旧的设备可能仍会出现性能问题。
回答by mddw
I always add :
我总是补充：
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
When working with 3d transform. Even "fake" 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome.
使用 3d 变换时。即使是“假的”3D 变换。经验告诉我，这两行总是能提高性能，尤其是在 iPad 上，在 Chrome 上也是如此。
I did test on your exemple and, as far as I can tell, it works.
我确实对你的例子进行了测试，据我所知，它有效。
As for the "why" part of your question... I don't know. 3D transform are a young standard, so implementation is choppy. That's why it's a prefixed property : for beta testing. Someone could fill a bug report or a question and have the team investigate.
至于你问题的“为什么”部分......我不知道。3D 变换是一个年轻的标准，因此实现是不稳定的。这就是为什么它是一个前缀属性：用于 beta 测试。有人可以填写错误报告或问题并让团队进行调查。
Edit per August 19th 2013:
2013 年 8 月 19 日编辑：
There's regular activity on this answer, and I just lost an hour finding that IE10 also need this. So don't forget :
这个答案有定期活动，我只是浪费了一个小时发现 IE10 也需要这个。所以不要忘记：
backface-visibility: hidden;
perspective: 1000;
回答by Dan Dascalescu
The reason animation was slower when you added the null transform hack(translateZ(0)) is that each null 3D transform creates a new layer. When there are too many of these layers, rendering performance suffers because the browser needs to send a lot of textures to the GPU.
添加空变换 hack( translateZ(0))时动画变慢的原因是每个空 3D 变换都会创建一个新层。当这些层过多时，渲染性能会受到影响，因为浏览器需要向 GPU 发送大量纹理。
The problem was noticed in 2013 on Apple's homepage, which abused the null transform hack. See http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/
该问题于 2013 年在 Apple 主页上被发现，该主页滥用了 null 转换 hack。见http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/
The OP also correctly noticed the explanation in their comment:
OP 也正确地注意到了他们评论中的解释：
Moving few big objects is more performant than moving lots of small items when using 3D-acceleration because all the 3D-accelerated layers have to be transferred to the GPU and the way back. So even if the GPU does a good job, the transfer of many objects might be a problem so that using GPU acceleration might not be worth it.
使用 3D 加速时，移动少量大物体比移动大量小物体性能更高，因为所有 3D 加速层都必须传输到 GPU 并返回。因此，即使 GPU 做得很好，许多对象的传输也可能是一个问题，因此使用 GPU 加速可能不值得。
回答by o.v.
Interesting. I've tried playing with a few options in about:flags, specifically these ones:
有趣的。我试过在 中使用几个选项about:flags，特别是这些选项：
GPU compositing on all pagesUses GPU-accelerated compositing on all pages, not just those that include GPU-accelerated layers.
GPU Accelerated DrawingEnable GPU accelerated drawing of page contents when compositing is enabled.
GPU Accelerated Canvas 2DEnables higher performance of canvas tags with a 2D context by rendering using Graphics Processor Unit (GPU) hardware.
所有页面上的 GPU 合成在所有页面上使用 GPU 加速合成，而不仅仅是那些包含 GPU 加速层的页面。
GPU 加速绘图启用合成时启用页面内容的 GPU 加速绘图。
GPU Accelerated Canvas 2D通过使用图形处理器单元 (GPU) 硬件进行渲染，使具有 2D 上下文的画布标签具有更高的性能。
Enabled those, tried it and failed miserably with the tickbox enabled (just like you did). But then I noticed yet another option:
启用这些，尝试它并在启用复选框的情况下惨遭失败（就像你所做的那样）。但后来我注意到了另一种选择：
FPS counterShows a page's actual frame rate, in frames per second, when hardware acceleration is active.
FPS 计数器显示页面的实际帧速率，以每秒帧数为单位， 当硬件加速处于活动状态时。
Given the highlight in the flag description, I'd speculate that hardware acceleration was, in fact, on for me even without the ticked checkbox since I saw the FPS counter with the options above turned on!
鉴于标志描述中的突出显示，我推测硬件加速实际上对我来说即使没有勾选复选框也是如此，因为我看到 FPS 计数器打开了上述选项！
TL;DR:hardware acceleration is, in the end, a user preference; forcing it with dummy translateZ(0)will introduce redundant processing overhead giving the appearance of lower performance.
TL;DR：硬件加速归根结底是用户偏好；用 dummy 强制它translateZ(0)会引入冗余处理开销，从而导致性能降低。
回答by Lion
Check chrome://flags in chrome. It says
在 chrome 中检查 chrome://flags。它说
"When threaded compositing is enabled, accelerated CSS animations run on the compositing thread. However, there may be performance gains running with accelerated CSS animations, even without the compositor thread."
“当启用线程合成时，加速的 CSS 动画会在合成线程上运行。但是，即使没有合成器线程，运行加速的 CSS 动画也可能会提高性能。”
回答by sabof
My expericence is that GPUs aren't generally faster for all kind of graphics. For very "basic" graphics they can be slower.
我的经验是 GPU 对于所有类型的图形通常都不是更快。对于非常“基本”的图形，它们可能会更慢。
You might have gotten different result if you were rotating an image - that's the kind of thing GPUs are good at
如果您旋转图像，您可能会得到不同的结果——这是 GPU 擅长的事情
Also consider that translateZ(0) is an operation in 3 dimensions, while changing top or left is a 2 dimensional operation
还要考虑到 translateZ(0) 是一个 3 维操作，而改变 top 或 left 是一个 2 维操作
回答by u2002476
I saw you two demo， I think I know the reason you confused：
看了你们两个demo，我想我知道你们困惑的原因了：
- The animation elements Do not use the left or top to change the location, try to use the -webkit-transform;
- All child elements need to turn on hardware acceleration such as use translateZ () or translate3D;
- FPS measure animation fluency, your demo FPS on average only 20FPS.
- 动画元素不要使用left或者top来改变位置，尽量使用-webkit-transform；
- 所有子元素都需要开启硬件加速如使用translateZ()或translate3D；
- FPS 衡量动画流畅度，你的演示 FPS 平均只有 20FPS。
Above, only a personal opinion, thank you!
以上，仅代表个人意见，谢谢！
