Browser Rendering Phase

A browser render at 60fps. We often call it framerate. A second is 1000 millisecond. That's ~16.66ms spent to render each frame. If this rate is maintained by the browser everything on a website will seem silky smooth.

When this framerate drops, users experience jank. A jank is when there is any stuttering or choppiness in motion on screen - for e.g., scrolling, transitions, animations. This negatively affects user experience (UX).

Jank is the result of the browser not being able to budget its compute within the 16 ms for each frame. To understand how tight that time window here is a fun fact. The duration of a blink is on average is 100–150 milliseconds according to this UCL research.

That is way less time than a blink of an eye.

What's going on behind each frame render?

In this post, I attempt at an oversimplified articulation of 6 stage before a frame is rendered. I try to walk through the entire length of that 'rendering' process without getting into too many details,

6 stages in Rendering phase

In the first stage, the browser is listening for input event such as mouse clicks or keyboard presses.

Second stage is to check for scheduling related code has reached maturity. This involved function calls to setInterval & setTimeout.

Then comes the requestAnimationFrame method which is passed a callback containing the animation you want to execute before each paint. The callback is called the number of times same as the frame rate discussed earlier. Although there are times when it is paused such as if the window is running in background, then animation does not need to run. This helps with performance.

Now for the Layout stage, which seems more like a duplication of DOM tree, but it is nuanced. Steps such as excluding 'invisible' elements are performed in this stage. So, an element with display: none is excluded from the layout tree. This stage and the next stage (Paint) are known to perform some heavy operations that libraries like React tend to optimize with the help of a virtual DOM. Think of virtual DOM as a lightweight version of the actual DOM.

In the Paint phase, the browser executes painting of pixels on the screens based on the final computed geometry, layout, colours, positioning etc. This stage is when you start seeing the website as you see it on the browser.

The browser then enters an idle state and starts all over again.