Multiple requestAnimationFrame performance

javascript jquery performance animation requestanimationframe

I don't think any of these answers really explained what I was looking for: "do n calls to requestAnimationFrame" get debounced (i.e. dequeued 1 per frame) or all get invoked in the next frame.

When callbacks queued by requestAnimationFrame() begin to fire multiple callbacks in a single frame (mdn)

This suggests the latter, multiple callbacks can be invoked in the same frame.

I confirmed with the following test. A 60 hz refresh rate translates to a 17ms period. If it were the former, no 2 timestamps would be within 17ms of each other, but that was not the case.

let sleep = ms => new Promise(resolve => setTimeout(resolve, ms));let update = async timestamp => {  console.log('update called', timestamp)  await sleep(10);  requestAnimationFrame(update);}requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);requestAnimationFrame(update);

Expand snippet