I am working on a performance test for HTML5 canvas & HTML5 SVG projects. As the projects are graphics-focused and require smooth operation, I've chosen refresh rate (fps) and page paint time (ms) as metrics. I am aware of the fact that values calculated from the javascript code are not representative enough, so these values should be taken from the browsers themselves. Therefore, javascript libraries like Mrdoob's stats.js cannot really be used (correct me if I'm wrong). Any info will be appreciated.

What I have found so far:

Mozilla Firefox:

• FPS: windows.mozPaintCount
• Page Paint Time: ?

Google Chrome:

• FPS: built-in FPS-meter (seems to be working only for DOM-elements)
• Page Paint Time: built-in PPT-meter (also for DOM-related stuff)

I am working on a performance test for HTML5 canvas & HTML5 SVG projects. As the projects are graphics-focused and require smooth operation, I've chosen refresh rate (fps) and page paint time (ms) as metrics. I am aware of the fact that values calculated from the javascript code are not representative enough, so these values should be taken from the browsers themselves. Therefore, javascript libraries like Mrdoob's stats.js cannot really be used (correct me if I'm wrong). Any info will be appreciated.

What I have found so far:

Mozilla Firefox:

• FPS: windows.mozPaintCount
• Page Paint Time: ?

Google Chrome:

• FPS: built-in FPS-meter (seems to be working only for DOM-elements)
• Page Paint Time: built-in PPT-meter (also for DOM-related stuff)

• javascript
• html
• performance
• canvas
• svg

• I am not sure but can you please check page speed plugin in chrome which gives page load time (I think it includes fps,ms etc what you are looking for) and firebug in case of firefox. – Nachiket Kate Commented Jan 22, 2014 at 10:24

2 Answers 2

You can use requestAnimationFrame:

(function () {
  var active = false;
  var frames = 0;
  var start;

  var frame = function () {
    frames = frames + 1;
    if (active) {
      window.requestAnimationFrame(frame);
    }
  };

  window.FPS = {
    start: function () {
      active = true;
      frames = 0;
      start = window.performance.now();
      frame();
    },

    end: function () {
      active = false;
      var seconds = (window.performance.now() - start) / 1000;
      var fps = Math.round(frames / seconds);
      alert(fps);
    }
  };
}());

You can perhaps use window.performance.now(). This new API was intended for things like this where you need sub-ms times.

It will (intend to) give you a high-resolution timestamp in higher resolution than ms but not without drawbacks:

• Chrome currently returns milliseconds so no gain there (may be fixed in Canary by now)
• Resolution depends on the underlying system

and mozPaintCount is a proprietary call which only works in Firefox.

So no matter how you twist and turn on this you will only get so far.

But you can try something like this:

function startPaintOperation() {

    var startTime = 0, endTime = 0;

    startTime = performance.now() || new Date().getTime(); // with fallback

    ... paint

    endTime = performance.now() || new Date().getTime();

    return endTime - startTime;
}

I don't think you can get much closer than this without using built-in tools of the browser.

See specifications here for more details.

Hope this helps.