Mattias Wallander

Developing myself

FPS Counter for Firefox

| Comments

For hardware accelerated content in Chrome, you can get the number of painted frames per second by switching it on in about:flags.

Firefox also has a flag like that (layers.acceleration.draw-fps in about:config) but it seems a bit shaky. I have gotten it to work on Firefox Mobile but not on desktop (only tried Linux and Windows though). For Windows there is a fixed bug that is targeted for Firefox 32. And on Linux, hardware acceleration is generally problematic as I understand it.

Therefore I wanted to write an FPS counter that worked even if all the constraints were not fulfilled. So here it is, a simple FPS counter that places itself in the bottom right corner and updates about once a second.

FPS Counter 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

(function () {
    var overlay, lastCount, lastTime, timeoutFun;

    overlay = document.createElement('div');
    overlay.style.background = 'rgba(0, 0, 0, .7)';
    overlay.style.bottom = '0';
    overlay.style.color = '#fff';
    overlay.style.display = 'inline-block';
    overlay.style.fontFamily = 'Arial';
    overlay.style.fontSize = '10px';
    overlay.style.lineHeight = '12px';
    overlay.style.padding = '5px 8px';
    overlay.style.position = 'fixed';
    overlay.style.right = '0';
    overlay.style.zIndex = '1000000';
    overlay.innerHTML = 'FPS: -';
    document.body.appendChild(overlay);

    lastCount = window.mozPaintCount;
    lastTime = performance.now();

    timeoutFun = function () {
        var curCount, curTime;

        curCount = window.mozPaintCount;
        curTime = performance.now();
        overlay.innerHTML = 'FPS: ' + ((curCount - lastCount) / (curTime - lastTime) * 1000).toFixed(2);
        lastCount = curCount;
        lastTime = curTime;
        setTimeout(timeoutFun, 1000);
    };

    setTimeout(timeoutFun, 1000);
}())

Just copy the code and paste it into your console. The easiest way to use it though, is as a bookmarklet. Just drag this FPS Counter link to your bookmarks toolbar.

The functionality I am using is a Firefox specific property on the window object called mozPaintCount. It contains the number of times the document has been painted since it was created.

Note that mozPaintCount shows actual paints, not how many would be possible at a maximum rate. There are several things that make a browser lower the number of paints, e.g. when switching to another tab. Also, most of the time (depending on hardware), the maximum rate is usually capped at 60 FPS since there is no need to update more often than the screen refreshes itself.

There are solutions where the code counts the number of times that a callback for requestAnimationFrame is called, but that does not exactly correspond to the number of actual paints done.

Also, I use performance.now() instead of Date.now(), which is independent of the system clock and has a (up to) microsecond resolution.

Comments