CODEWITHSUNDEEP
javascript
João Paulo
João Paulo

Reputation: 6670

requestAnimationFrame with higher rate than 60 fps

From MDN, I have this:

Be sure to always use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame, otherwise the animation will run faster on high refresh rate screens.

With this, Can I assume that with a 144hz monitor, for instance, I could have requestAnimationFrame running faster than 60 fps?

Upvotes: 8

Views: 4088

Answers (1)

Drag13
Drag13

Reputation: 5988

Exactly true.

Here is a simple example to measure:

let i = 0;
const start = Date.now();
const stop = start + 5000;

function raf() {
  requestAnimationFrame(() => {
    const now = Date.now();
    if (now < stop){
      i++;
      raf();
    }else{
      const elapsedSeconds = (now - start) / 1000;
      console.log('Frame rate is: %f fps', i / elapsedSeconds);
    }
  });
}

console.log('Testing frame rate...')
raf();

On my machine, it shows 143.7401178670024. And I am using 144HZ monitor.

Upvotes: 9

Related Questions