JS Animation - requestAnimationFrame

programming web dev
1

Hi

As mentioned in the requestAnimationFrame tutorial, I am confused with these two statements

  1. requestAnimationFrame requests the browser to call the animation loop when it is ready for a redraw
  2. The animation loop is called max of 60 times a second.

Does this mean, requestAnimationFrame will call its ‘callback’ method only when it knows that the browser is ready for a redraw i.e. if the browser is busy, the number of times animation loop gets called is eventually reduced.

Or

Does this mean that the callback is called 60 times a second and redraw happens when browser is ready for repaint?

Regards
Norma

2

The first one. requestAnimationFrame is not guaranteed to run 60 fps. In fact in background tabs it will run much slower because there’s far less priority for things happening in background tabs. But this also will get called even if there’s no need to redraw, for example in the case where nothing is changing. The callback gets called when the browser could redraw. There could be nothing to draw up until your callback where you might do something that does require a redraw.

1 Like
3

Thank you

1 Like