如何准确测量HTML5浏览器帧率(FPS)？

Question

在现代HTML5浏览器中,测量帧速率(即FPS)的最准确方法是什么？我对FPS for Canvas动画特别感兴趣.

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版本(可能是金丝雀流)中,应该有一个显示FPS的选项about:flags.