3

所以我正在构建大型网站，它使用 css3 动画转换（我正在使用 jaquery.transit 来操作元素转换及其 css 样式）。我偶然发现了两个问题：

  1. FF（最新更新）不使用 GPU 进行 translate3d() 层渲染，也许我错了，mozilla 根本不使用 GPU 加速图形。我真的还没有完全理解。
  2. 即使我欺骗 Chrome 使用 GPU 进行 translate3d() 和 translateZ() 层渲染，但在 GPU 不好或没有 GPU 的计算机上，这些图形非常糟糕，有时甚至看不到过渡的中间开始和结束。

问题：

  1. 我该怎么做才能提高过渡元素的 FPS，例如，我有 3200x3200 的div旋转和缩放以及同时在 x，y 轴上平移，大约。该表面上显示 5-20 个元素div's？
  2. 也许有一种方法可以检测浏览器是否有足够的 GPU 支持来知道我是否需要重定向到更简单的网站版本？
4

2 回答 2

1

因为WebGL使用 GPU，这个惊人的Modernizr项目允许检查 webGL 支持的浏览器：http: //modernizr.com/news/

Modernizr.webgl在http://modernizr.com/docs/下查看

于 2013-01-28T19:08:13.833 回答
1

当时的主要问题是屏幕上的所有 PNG 都必须在浏览器中重新计算和重新编译。

为了最大限度地提高性能，我必须做几件事：

  1. 始终在图像上具有预定义width和height属性。这样做是让浏览器知道图片应该是什么大小，并且与它一起使用scale()时不会重新计算和重新编译这些图像。这些东西非常昂贵。因此，基本上，除了scale()修改图像大小之外，一切都很完美，动画也很棒。
  2. 尽可能避免使用visibility属性，它实际上就像opacity: 0将元素保留在布局中，使布局重新计算的时间更长。始终尽可能使用display: none，这将完全消除布局计算中的元素。这是一个主要的缺陷，因为我必须重新考虑要排除的 UI，visibility并且必须尽量减少使用的 DOM 节点数。

总的来说，这是一次巨大的冒险和丰富的体验，希望这个问题/答案对某人有所帮助。

于 2016-05-09T14:32:33.250 回答