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

Question

我正在建设一个大型网站，其中使用CSS3转换进行动画（我使用jaquery.transit来操作元素转换及其CSS样式）。但是我遇到了两个问题：

1. FF（最新更新）不使用GPU进行translate3d（）层渲染，也许我错了，mozilla根本不使用GPU加速图形。我还没有完全理解这一点。
2. 即使我欺骗例如Chrome在使用GPU进行translate3d（）和translateZ（）层渲染，在具有糟糕GPU或没有GPU的计算机上，这些图形仍然很可怕，有时甚至看不到过渡的中间部分仅开始和结束。

问题：

1. 我该如何提高过渡元素的FPS，例如，我有3200x3200的
   旋转、缩放和同时在x、y轴上平移，

   表面显示大约5-20个元素？
2. 也许有一种方法可以检测浏览器是否具有足够的GPU支持，以知道是否需要重定向到更简单的网站版本吗？

- skmasq

---

一个3200x3200像素的元素是“巨大”的。我想大多数GPU都会在内存中遇到困难。你可以尝试在一些较小的元素上应用相同的效果，看看是否会出现同样的性能问题吗？ - Olly Hodgson

@OllyHodgson，你看，我需要那个大区域。我的领土面积为3200x3200，但我的视口只有1024x750。我知道游戏只渲染视图区域，但我不知道如何做或者是否可能。回答你的问题，使用较小和较少的对象可以平稳地渲染。 - skmasq

你能否使用CSS媒体查询保持div较小并根据需要进行缩放？ - Mooseman

@Mooseman，你认为我该怎么做？ - skmasq

请参考 http://www.w3.org/TR/css3-mediaqueries/ 了解如何使用媒体查询。但要注意浏览器兼容性问题（http://caniuse.com/#feat=css-mediaqueries）。 - Mooseman

@Mooseman，据我所知，使用媒体查询可以缩放我的内容，但在我的情况下，3.2k x 3.2k大小的div无法缩小到像1k x 1k分辨率这样的尺寸。该div的目的是为其上的内容提供基础支撑。我想我的想法在HTML5和CSS3方面有些超前了，因为只有高端机器才能呈现我的内容。 - skmasq

Answer 1

当时的主要问题是屏幕上所有PNG图像都必须在浏览器中重新计算和重新编译。以下是我为了最大化性能所做的几件事情:

1. 图片始终应该预定义宽度和高度属性。这样可以让浏览器知道图片的大小，当与缩放(scale())一起使用时，它不会重新计算和重新编译这些图片。这些操作非常昂贵。因此，如果没有其他修改图片大小的操作，那么一切都很完美，动画效果也很棒。

2. 在任何可能的情况下避免使用visibility属性，它实际上就像opacity:0，保持元素在布局中，使布局重新计算时间更长。在任何可能的情况下，都应该使用display:none，这将完全消除元素在布局计算中的影响。这是一个主要的陷阱，因为我不得不重新思考UI以排除visibility，并尽量减少使用的DOM节点数。

总的来说，这是一次巨大的冒险和宝贵的经验，希望这个问题/答案能够帮助到某些人。

- skmasq

Answer 2

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

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

- sdespont

---

谢谢回答，但我需要知道浏览器的GPU是否能够正常渲染我的过渡效果。据说Firefox支持WebGL，但问题是它渲染我的过渡效果比Chrome差。另外，如果我使用的浏览器使用GPU进行渲染，我想知道浏览器的GPU是否具有足够的能力或者是否有什么说明会告诉我它在渲染图层时会表现不佳。 - skmasq