The delay/interval of animation frames are auto calculated when using requestAnimationFrame. Its calculated based on several factors:
- The fps is decided by the display refresh rate(60 Hz is 60 fps) and computer computation power.
- requestAnimationFrame slows down the rate when browser is in backgroundState. This helps to reduce power consumption and prevents computer from heating.
- When we using requestAnimationFrame the browser knows that we are creating animations there it can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. It can prevent unnecessary reflows and repaints.
- requestAnimationFrame prevents frame dropping because knows the refresh rate.