How to accurately measure HTML5 Browser Framerates (FPS)?

Question

What is the most accurate way to measure framerates, i.e. FPS, in modern HTML5 browsers? I'm specifically interested in FPS for Canvas animations.

http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html will tell you that trying to measure framerate by counting how often your setTimeout runs is not accurate. The browser can run your Timeout callback multiple times between screen paints.

Turns out Mozilla has a window.mozPaintCount https://developer.mozilla.org/en/DOM/window.mozPaintCount available, which should provide an accurate FPS. However, this only works for Mozilla.

There's an open issue for Chrome for something similar: http://code.google.com/p/chromium/issues/detail?id=65348

A manual way to check for hardware accelerated FPS in Chrome is to grab the Chrome Beta channel (as of posting date) and go to about:flags and turn on FPS Counter. However, on a Mac, acceleration only turns on when using WebGL. So, no way to check FPS for Canvas on Chrome for Mac.

What are other strategies for accurately measuring HTML5 FPS?

Thanks!

Answer 1

Please check:

• https://github.com/mrdoob/stats.js - it's the best FPS monitor I know. It also gives you some stats about mem/cpu usage (you have to run your browser with special parameter to expose that data), but may also suffer from the inaccuracy you described.

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

Also, in new chrome builds (probably canary stream) there should be an option for displaying FPS in about:flags.