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

Javascript – requestAnimationFrame and its lifecycle

I realized that I was confused with requestAnimationFrame, although some time ago I thought I understood how it works.

So what is the essence of my problem:

They say that requestAnimationFrame, namely its callback, will be called before the rendering stages, that is, calling requestAnimationFrame does not mean that the browser will run to execute the callback function passed to it right now.

However, if we take this code:

const run = () => {
  requestAnimationFrame((timeStamp) => {
    console.log(timestamp);
    requestAnimationFrame(run);
  })
};
run();

and if we run on a completely empty page, we will see how the timestamps will be printed in the console, but why if the page is completely empty, there is no reason to render. The reason?

Okay, let’s look at the specification, it says you need to wait for rendering opportunity before starting the task related to rendering, where our requestAnimationFrame will appear. But the code above should not be printed due to the lack of a rendering opportunity reason. Or is the reason exist?

An explanation is needed.

Tags:

2

Answers


  1. 0

    If you are rendering a completely empty page, you are still rendering. The fact that you can run any javascript code, even call the "run" function means that the page has rendered.

    Login or Signup to reply.
  2. 0

    A rendering opportunity in my opinion should be automatic. How will you get a video to work when unless browser renders the update at highest possible frequency (according to its refresh rate).

    Although it is not detailed upon, I think the below holds significance:

    A navigable’s rendering opportunities are determined based on hardware constraints such as display refresh rates and other factors such as page performance or whether its active document’s visibility state is "visible". Rendering opportunities typically occur at regular intervals.

    This is what I speak of Rendering opportunities typically occur at regular intervals.. Typically is used because there are instances when browser is not free to render in the upcoming interval, and that is when we lose frames.

    So I think it is the browser’s job to generate rendering opportunities, and the event loop spec mentions that for every rendering opportunity animation frame callbacks are supposed to be run:

    enter image description here

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

Back To Top
Search