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

我正在使用从top: 0top: 145px的转换在css3实验中移动6000个小div元素以testing性能。

Google Chrome浏览器无需使用硬件加速运行。

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

为什么?

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


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

6 Solutions collect form web for “为什么在CSS3中启用硬件加速会降低性能?”

我总是补充:

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

使用3d变换时。 即使是“假”3D转换。 经验告诉我,这两条线总是提高性能,特别是在iPad上,而且在Chrome上。

我testing了你的例子,据我所知,它的工作原理。

至于你的问题的“为什么”部分…我不知道。 3D变换是一个年轻的标准,所以实现起伏不定。 这就是为什么它是一个前缀属性:用于betatesting。 有人可以填写错误报告或问题,并让团队调查。

编辑每2013年8月19日

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

 backface-visibility: hidden; perspective: 1000; 

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

这个问题在2013年被苹果公司的主页发现了,它滥用了null变换技术。 见http://wesleyhales.com/blog/2013/10/26/Jank-Binging-Apples-Home-Page/

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

在使用3D加速时,移动less量大物体比移动大量小物体的性能更高,因为所有3D加速层必须转移到GPU并返回。 所以,即使GPU做得很好,许多对象的传输可能是一个问题,所以使用GPU加速可能不值得。

有趣。 我已经尝试了几个about:flags选项,特别是这些:

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

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

GPU Accelerated Canvas 2D通过使用graphics处理器单元(GPU)硬件进行渲染,可在2D上下文中实现更高的canvas标签性能。

启用这些,尝试它,并启用tickbox惨败失败(就像你做的那样)。 但后来我注意到另一个select:

FPS计数器 当硬件加速处于活动状态时 ,以每秒帧数显示页面的实际帧速率。

鉴于标志描述中的亮点,我推测硬件加速对于我来说甚至没有打勾的checkbox,因为我看到FPS计数器打开了上面的选项!

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

在chrome中检查chrome://标志。 它说

“当启用线程合成时,加速的CSSanimation会在合成线程上运行,但是,即使没有合成器线程,运行加速的CSSanimation也可能会有性能提升。

我的经验是GPU对于各种graphics通常不会更快。 对于非常“基本”的graphics,它们可能会变慢。

如果你正在旋转图像,你可能会得到不同的结果 – 这是GPU擅长的

还要考虑translateZ(0)是一个3维操作,而顶部或左边是2维操作

我看了你两个demo,我想我知道你弄糊涂的原因:

  1. animation元素不要使用left或者top来改变位置,尝试使用-webkit-transform;
  2. 所有子元素都需要打开硬件加速,比如使用translateZ()或者translate3D;
  3. FPS测量animation的stream畅度,你的演示FPS平均只有20FPS。

以上只是个人意见,谢谢!

  • CSS Calc替代
  • 检测'transform:translate3d'的支持
  • 保持div与CSS的纵横比
  • 当flexbox项目以列模式包装时,容器不会增加其宽度
  • 高级CSS技巧:如何跨越CSS3网站布局中的多个列的图像?
  • CSS3框的大小:边界框; 为什么不?
  • 如何使用CSS(和JavaScript?)创build一个模糊的“磨砂”背景?
  • CSS / JS防止拖影的鬼影?
  • 在IE中支持“border-radius”
  • CSS background-image-opacity?
  • CSS3转换事件