Is it possible to find out what is the monitor frame rate in javascript?

You may have some luck on modern browsers using window.requestAnimationFrame with a trivial callback that measures the time between successive invocations and from that calculate the FPS.

You should also be able to easily skip your render function every nth invocation to reduce the desired frame rate.

I put a rough example at http://jsfiddle.net/rBGPk/ - the math may be slightly wrong but it should be enough to show the general idea.


The solution below works by measuring the number of milliseconds between two consecutive animation frames.

Warning: It often returns an incorrect FPS because sometimes an animation frame is skipped when your CPU is busy with other tasks.

// Function that returns a Promise for the FPS
const getFPS = () =>
  new Promise(resolve =>
    requestAnimationFrame(t1 =>
      requestAnimationFrame(t2 => resolve(1000 / (t2 - t1)))
    )
  )

// Calling the function to get the FPS
getFPS().then(fps => console.log(fps));

Tips

  • Do not abuse setInterval and setTimeout for real-time rendering
  • Instead use requestAnimationFrame
  • Review the MDN Tutorial on Timeouts and Intervals, particularly the section on requestAnimationFrame

Tags:

Javascript

Recent Posts