检测浏览器是否使用GPU加速图形进行渲染

Question

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

1. FF（最新更新）不使用GPU进行translate3d（）图层渲染，也许我错了，mozilla根本不使用GPU加速图形。我真的完全不明白。
2. 即使我欺骗Chrome，例如Chrome使用GPU进行translate3d（）和translateZ（）图层渲染，在GPU不良或没有GPU的计算机上，这些图形非常糟糕，有时你甚至看不到转换的中间位置并结束。

问题：

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

Answer 1

由于WebGL使用GPU，令人惊讶的Modernizr项目允许检查支持webGL的浏览器：http://modernizr.com/news/

在http://modernizr.com/docs/

下查看Modernizr.webgl

Answer 2

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

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

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

总的来说，这是一次巨大的冒险和丰富的经历，希望这个问题/答案有助于某人。