为什么在CSS3中启用硬件加速会降低性能？ [英] Why does enabling hardware-acceleration in CSS3 slow down performance?

问题描述

我在css3实验中使用从 top：0 到顶部：145px

I am moving 6000 small div elements in an css3 experiment using a transition from top: 0 to top: 145px to test performance.

使用无硬件加速在Google Chrome上顺利运行。

Using no hardware-acceleration runs smooth on Google Chrome.

如果我通过 translateZ（0）启用硬件加速，性能变得可怕。

If I enable hardware-acceleration via translateZ(0) performance becomes horrible.

？

这是我的示例代码： http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

更新（2014-11-13）：由于这个问题仍然引起注意我想指出，问题本身仍然似乎存在，虽然提到的口吃可能不是在现代硬件 中提供的演示中可见。旧的设备可能仍会遇到性能问题。

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.

推荐答案

我总是添加：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

使用3D变换时。甚至假3D变换。经验告诉我，这两行总是提高性能，特别是在iPad上，但也在Chrome上。

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.

我测试了你的例子，据我所知，工作。

I did test on your exemple and, as far as I can tell, it works.

至于你的问题的为什么部分...我不知道。 3D变换是一个年轻的标准，所以实现是波动。这就是为什么它是一个前缀属性：用于beta测试。

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.

2013年8月19日修改：

这个答案有定期活动，我只是失去了一个小时，发现IE10也需要这个。
所以不要忘记：

There's regular activity on this answer, and I just lost an hour finding that IE10 also need this. So don't forget :

backface-visibility: hidden;
perspective: 1000;

这篇关于为什么在CSS3中启用硬件加速会降低性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！