Check FPS in JS? [closed]

Answer 1

My 2 cents:

Useful to me to compare optimizations. Burn a bit of ressources, of course, for testings only.

Ideally, your app frame rate should stay above 50 frames by seconds, at full usage, when using events, loops, etc.

Screens won't refresh above than 60hz, anyway, at least for now.

Humans feels lags under 24 FPS, this is 1000 / 24 = 41ms

So, 41ms for a frame is the last critical lowest point, before freezes feelings.

let be = Date.now(),fps=0;
requestAnimationFrame(
    function loop(){
        let now = Date.now()
        fps = Math.round(1000 / (now - be))
        be = now
        requestAnimationFrame(loop)
        if (fps < 35){
          kFps.style.color = "red"
          kFps.textContent = fps 
        } if (fps >= 35 && fps <= 41) {
            kFps.style.color = "deepskyblue"
            kFps.textContent = fps + " FPS"
          } else {
            kFps.style.color = "black"
            kFps.textContent = fps + " FPS"
        }
        kpFps.value = fps
    }
 )

Just a loop to get the idea, 50ms interval, should keep up smooth! See the progress bar jumping? This are frames loss, and browsers trying to keep up by sacrifice, by jumping to the next frame, we must avoid that!

let t
for (let i=0;i<99999;i++){
  t = setTimeout(function(){
   console.log("I am burning your CPU! " + i)
   clearTimeout(t)
  },50)
  
}