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!

score 10 · Answer 1 · answered Mar 28 '11 at 12:59

10

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.

answered Mar 28 '11 at 12:59

wildcard

7,353
3
27
25

Thanks, I've been using the FPS display from Chrome's about:flags, but that only turns on when you have anything hardware accelerated. – Seth Ladd Mar 29 '11 at 04:34
1

I'll have to check out mrdoob's stats.js, I'm curious how he is measuring FPS. – Seth Ladd Mar 29 '11 at 04:34

How to accurately measure HTML5 Browser Framerates (FPS)?

1 Answers1

Linked