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

Question

在现代 HTML5 浏览器中测量帧率（即 FPS）的最准确方法是什么？我对 Canvas 动画的 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 时才会开启加速。因此，无法在 Mac 版 Chrome 上检查 FPS 的画布。

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

谢谢！

Answer 1

请检查：

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

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

此外，在新的 chrome 版本（可能是金丝雀流）中，应该有一个选项可以在about:flags.