Question 240993 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Which queue is associated with requestAnimationFrame?

Today I was asked this question on an interview. I couldn’t answer this question and the interviewer said there was a special queue for requestAnimationFrame callbacks. But I can’t find any information on this.

If rAF has it’s own queue then why is this queue never mentioned anywhere? We only mention macro- and microtask queues when we talk about Event Loop?

Could you please explain or share links to good videos/articles on rAF?

Tags:

3

Answers


  1. 0

    Regarding your question about the queue associated with requestAnimationFrame: rAF callbacks do not have their own separate queue. Instead, they are executed within a specific phase of the browser’s event loop. This phase is known as the rendering phase or paint phase of the event loop.

    Here are some links:

    1. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
    2. https://web.dev/animations-guide/
    3. https://www.youtube.com/watch?v=8aGhZQkoFbQ
    Login or Signup to reply.
  2. 0

    requestAnimationFrame is specific to the Web API. The callback that is given as argument is collected in an ordered map, which the HTML Standard identifies as a map of animation frame callbacks. This map is associated with the HTML document (or the global scope in case of a dedicated web worker).

    This map (which can be understood as a queue), gets processed after the current task has completed, including the processing of the microtask queue. This map is consumed as part of the rendering phase of the event loop. The HTML Standard specifies as step 13 of the rendering process:

    1. For each fully active Document in docs, run the animation frame callbacks for that Document, passing in now as the timestamp.

    So the short answer to "which queue" would be: the map of animation frame callbacks as specified in the HTML Standard.

    Login or Signup to reply.
  3. 0

    requestAnimationFrame has its own queue separate from DOM events. The events are invoked during the rendering phase of the event loop.

    The spec calls it the "animation frame request callback list" — though I wouldn’t expect anyone other than a browser developer to be able to recite that name in an interview situation! For most web developers, this is browser-internal detail that doesn’t normally impact the day to day; I’m surprised this was used as an interview question (unless you’re interviewing to work for a browser developer.)

    Here’s a duplicate (but unanswered) question which has some more links in comments you might find useful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search