"RequestAnimationFrame()" FPS = Display refresh rate? is this affect the performance?

Question

I tested the "RequestAnimationFrame()" method speed and I noticed that it fires exactly at the speed of my monitor refresh rate (60 / 100 / 144)

• I suppose the browser keeps track of the refresh rate of the display and applies it to the "RequestAnimationFrame" method

• I believe it does not affect the performance because it stacks multiple functions and executes them in the same frame.

• Am I right, can you please confirm These?

Answer 1

You're right, when you call window.requestAnimationFrame, what it does is keep in memory the function you provided as argument.

When the next DOM repaint happen (which happens the next time your monitor refreshes) it will empty the function stacks before it repaints the DOM.

This is particularly useful when you want to throttle for example a game loop or a scroll event listener (or any action that can be executed at a higher rate than your monitor refresh rate) allowing your program to compute to save performance