What is requestAnimationFrame and what does its call frequency depend on?

requestAnimationFrame is a browser method that schedules the execution of a function before the next screen repaint. It is used to create smooth animations synchronized with the display's refresh rate.

The frequency of requestAnimationFrame calls depends on the display's refresh rate (usually 60 frames per second, or approximately every 16.7 ms). If the device supports a different rate (for example, 120 Hz), the calls will occur more frequently.

The frequency can also decrease if the tab is inactive or if the browser optimizes resources, reducing the call rate to save energy.

Example usage:

function animate(time) {
  // update animation state
  // draw frame
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);