如何准确测量HTML5浏览器帧率（FPS）？

Question

在现代HTML5浏览器中，测量帧速率（即FPS）的最准确方法是什么？我对Canvas动画的FPS特别感兴趣。

http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html会告诉您尝试通过计算setTimeout运行频率来测量帧率是不准确的。浏览器可以在屏幕绘制之间多次运行Timeout回调。

原来Mozilla有一个window.mozPaintCount https://developer.mozilla.org/en/DOM/window.mozPaintCount可用，它应该提供准确的FPS。但是，这仅适用于Mozilla。

对于类似的内容，Chrome存在一个未解决的问题：http://code.google.com/p/chromium/issues/detail?id=65348

在Chrome中检查硬件加速FPS的手动方法是获取Chrome测试版渠道（截至发布日期）并转到about：flags并启用FPS Counter。但是，在Mac上，加速仅在使用WebGL时打开。因此，无法在Chrome for Mac上检查Canvas的FPS。

准确衡量HTML5 FPS的其他策略是什么？

谢谢！

Answer 1

请检查：

• https://github.com/mrdoob/stats.js - 这是我所知道的最好的FPS监视器。它还为您提供了有关mem / cpu使用情况的一些统计信息（您必须使用特殊参数运行浏览器以公开该数据），但也可能会受到您所描述的不准确性的影响。

• https://github.com/pcwalton/firefox-framerate-monitor

此外，在新的Chrome版本（可能是金丝雀流）中，应该有一个在about:flags中显示FPS的选项。