javascript - requestAnimationFrame with higher rate than 60 fps - Stack Overflow

admin管理员组

文章数量:1315779

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?

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?

• javascript

Share Improve this question Follow edited Nov 22, 2020 at 15:07 João Paulo asked Nov 22, 2020 at 14:51 João PauloJoão Paulo 6,71055 gold badges5454 silver badges8383 bronze badges 6

• Can you clarify on what the "elapsed technique" is? Not sure how you can "control" (increase) refresh rate at native code level with sandboxed script. – Daniel Cheung Commented Nov 22, 2020 at 15:03
• Sry, forget about this elapsed technique, it does not apply to requestAnimationFrame . – João Paulo Commented Nov 22, 2020 at 15:07
• 4 From the same MDN page, "The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C remendation." So yes. – Daniel Cheung Commented Nov 22, 2020 at 15:11
• Nice, didn't see this one! Thank you. – João Paulo Commented Nov 22, 2020 at 15:12
• 3 Just remember JS is browser dependent. Make to to test on different browsers. I also won't be surprised it's OS dependent as well, since browsers rely on the desktop's window management program as well to give them reliable information about the displays. – Daniel Cheung Commented Nov 22, 2020 at 15:13

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 9

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.

本文标签： javascriptrequestAnimationFrame with higher rate than 60 fpsStack Overflow