如何准确测量HTML5浏览器Framerates(FPS)?

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

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

结果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 Beta频道(截至发布日期),然后转到about:flags并打开FPS Counter.但是,在Mac上,加速仅在使用WebGL时打开.所以,没有办法在Chrome for Mac上检查Canvas的FPS.

准确测量HTML5 FPS的其他策略是什么?

谢谢!

解决方法

请检查:

> https://github.com/mrdoob/stats.js – 这是我知道的最好的FPS监视器.它还提供了有关mem / cpu使用情况的一些统计信息(您必须使用特殊参数运行浏览器才能公开数据),但也可能会受到您所描述的不准确的影响.
> https://github.com/pcwalton/firefox-framerate-monitor

此外,在新的chrome构建(可能是金丝雀流)中,应该有一个选项可以在about:flags中显示FPS.

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码