Requesting Repaints with requestAnimationFrame

Let's see how we can use the 'requestAnimationFrame' API to optimize the rendering of the page to avoid unnecessary browser repaints and the now method for the scheduler.

In the world of the <canvas> API, we use requestAnimationFrame to inform the browser that we’re going to write a batch of pixels to the page. This way, we can update the location of everything at once, and the browser only needs to repaint one time, as opposed to the browser redrawing the page for each object we want to write.

requestAnimationFrame API

It takes a single parameter, a function that is typically called recursively. Most usage of requestAnimationFrame looks something like this:

Get hands-on with 1200+ tech skills courses.