Simple way to detect browser’s FPS via JS

03, 04, 2019
bullgare
Client Optimization, javascript
No Comments.

It’s dumb and dead simple but works. You can even track browser’s metrics with that.

(() => {
    const times = [];
    let fps;

    function refreshLoop() {
        window.requestAnimationFrame(() => {
            const now = performance.now();
        while (times.length > 0 && times[0] <= now - 1000) {
            times.shift();
        }
        times.push(now);
        fps = times.length;
        refreshLoop();
    });
    }
    refreshLoop();
    
    // output to console once per second
    setInterval(() => {console.log(fps);}, 1000)
})();

(() => {

const times = [];

let fps;

function refreshLoop() {

window.requestAnimationFrame(() => {

const now = performance.now();

while (times.length > 0 && times[0] <= now - 1000) {

times.shift();

}

times.push(now);

fps = times.length;

refreshLoop();

});

}

refreshLoop();

// output to console once per second

setInterval(() => {console.log(fps);}, 1000)

})();

Daily Archives: 04.03.2019

Simple way to detect browser’s FPS via JS