为什么在CSS3中启用硬件加速会降低性能？

Question

我正在css3实验中移动6000个小div元素,使用从top: 0转换top: 145px到测试性能.

在谷歌浏览器上使用无硬件加速运行平稳.

如果我通过translateZ(0)性能启用硬件加速变得可怕.

为什么会这样？

更新(2014-11-13):由于这个问题仍然引起人们的注意,我想指出问题本身似乎仍然存在,尽管在现代硬件上提供的演示中,所提到的口吃可能不再可见.较旧的设备可能仍然会出现性能问题.

Answer 1

我总是补充说:

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

使用3d变换时.甚至是"假的"3D变换.经验告诉我,这两条线总能提高性能,特别是在iPad上,而且在Chrome上.

我测试了你的例子,据我所知,它有效.

至于你问题的"为什么"部分......我不知道.3D变换是一个年轻的标准,因此实施起伏不定.这就是为什么它是一个前缀属性:用于beta测试.有人可以填写错误报告或问题并让团队进行调查.

2013年8月19日编辑:

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

backface-visibility: hidden;
perspective: 1000;

你应该添加**在哪里**添加这些行,而不仅仅是一般"只是添加这个..."我自己知道在哪里,但很多人不会. (7认同)
将其添加到您要设置动画的元素的父级. (4认同)
我做了另一个测试.基本上与测试#1相同,但这次我让这些方框也通过`-webkit-transform:rotateZ(360deg)绕过z轴旋转;`http://dl.dropbox.com/u/17844821/zeug/ hwtest2.html - 这次硬件加速版更快!如果我删除旋转,硬件加速会减慢动画的速度.如果你的理论是正确的那么这应该不起作用(因为唯一的区别是我添加了`rotateZ(360)`).另一方面,也许铬很聪明,可以意识到围绕Z轴旋转不需要重新绘制这些瓷砖的背面？ (3认同)
@Timo只是一个抬头,w3schools不隶属于w3c:http://www.w3fools.com/ (2认同)

Answer 2

添加空变换hack(translateZ(0))时动画较慢的原因是每个空3D变换都会创建一个新图层.当这些图层太多时,渲染性能会受到影响,因为浏览器需要向GPU发送大量纹理.

这个问题在2013年Apple的主页上被注意到,该主页滥用了null变换黑客.见http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

OP也正确地注意到他们评论中的解释:

移动几个大物体比使用3D加速移动大量小物品更有效,因为所有3D加速层都必须转移到GPU并返回.因此,即使GPU做得很好,许多对象的传输可能也是一个问题,因此使用GPU加速可能不值得.

Answer 3

有趣.我尝试过使用一些选项about:flags,特别是这些选项:

所有页面上的GPU合成在所有页面上使用GPU加速合成,而不仅仅是那些包含GPU加速层的合成.

GPU加速绘图启用合成时启用GPU加速绘制页面内容.

GPU加速画布2D通过使用图形处理器单元(GPU)硬件渲染,使用2D上下文实现更高性能的画布标签.

启用了那些,尝试了它并且在启用了复选框的情况下失败了(就像你一样).但后来我注意到另一种选择:

FPS计数器显示硬件加速处于活动状态时页面的实际帧速率(以每秒帧数 为单位).

鉴于标志描述中的亮点,我推测硬件加速实际上对我来说即使没有勾选复选框,因为我看到FPS计数器打开了以上选项!

TL; DR:硬件加速最终是用户偏好; 用虚拟强制它translateZ(0)会引入冗余的处理开销,从而降低性能.

好吧,那就看看吧.我做了另一个测试.基本上与测试#1相同,但这次我还通过添加`-webkit-transform:rotateZ(360deg);`http://dl.dropbox.com/u/17844821/zeug/让盒子绕自己的轴旋转hwtest2.html - 这次硬件加速版更快!如果我删除旋转,硬件加速会减慢动画的速度. (2认同)