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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (61)

我使用由过渡移动6000个小div元素在CSS3实验top: 0top: 145px测试性能。

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

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

为什么?

提问于
用户回答回答于

补充:

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

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

用户回答回答于

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

这个问题在2013年被苹果公司,它滥用了null变换技术。

所属标签

可能回答问题的人

  • HKC

    红客学院 · 创始人 (已认证)

    26 粉丝7 提问5 回答
  • Dingda

    Dingda · 站长 (已认证)

    4 粉丝0 提问3 回答
  • 西风

    renzha.net · 站长 (已认证)

    9 粉丝1 提问3 回答
  • 螃蟹居

    1 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券