javascript - 为基于网络的动画设置 FPS 基准？

Question

我希望编写一个简单的每秒帧数动画基准 Javascript 实用程序。 FPS 在这里可能是一个模糊的术语，但理想情况下，它可以让我更准确地比较和衡量不同动画 (CSS3/canvas/webgl) 在浏览器和设备之间的表现。 (所以不仅仅是测试特定代码的东西 - 而是页面中包含的 JS 库，它能够自己完成它的事情)

并且正在寻找有关如何最好地处理该主题的想法。

例如，我希望 requestAnimationFrame 是我正在寻找的东西——我已经阅读了一些关于它的内容，似乎每次浏览器可用于重绘/动画时都会调用它，对吧？因此，按照相同的逻辑，如果(在运行动画时)浏览器不可用(例如在空白运行中经常可用)- 我们已经有一些数字可以在那里再次比较。

问题当然是 requestAnimationFrame 没有像我希望的那样广泛支持(尤其是在移动设备上)。可以在那里使用 setInterval 吗？我知道它不那么可靠，但也许这对我有好处——例如，如果我每秒调用它 1000 次，然后再将它与每秒实际执行的次数进行比较——这已经是某种基准。

这里唯一的问题是该方法会返回对任意数量问题的测量结果，而不仅仅是动画 - 例如，我可以想象浏览器会跳过一个间隔，因为它在 DOM 中执行某些操作，等等。你可能会争论浏览器是单进程动物，因此 DOM 更改也会影响动画 - 但是如果例如 CSS3 动画是 GPU 硬件加速的，这仍然是正确的吗？

目前只是一个理论 - 所以非常感谢任何想法! ;-)

Answer 1

这看起来应该很容易适应一组适用于您的特定情况的函数(“做自己的事”):https://gist.github.com/1156092