Browser Rendering Cycle

Definition

The steps the browser takes to convert HTML, CSS, and JS into pixels on the screen (Parse -> Style -> Layout -> Paint -> Composite). The Event Loop coordinates with the rendering engine.

Explain Like I'm New

Painting the screen is expensive. The browser tries to paint the screen 60 times a second (every 16.6ms). However, the browser uses the EXACT SAME THREAD for rendering as it uses for JavaScript. If your JavaScript takes 50ms to run, the browser misses 3 frames, resulting in a visually 'janky' or lagging animation.

Real World Example

Using `requestAnimationFrame` to run a piece of JavaScript right before the browser calculates the next frame, ensuring silky smooth 60FPS animations.

Common Use Cases

•60FPS Animations
•Scroll performance optimization

Terminal Output

bash / terminal

// Changing styles multiple times synchronously: div.style.width = '100px'; div.style.height = '100px'; div.style.backgroundColor = 'red'; // The user NEVER sees these intermediate states. // Because JavaScript is synchronous here, the Event Loop cannot reach the Render Phase. // Only the final state (Red 100x100) is painted to the screen in a single batch.

Interview Questions

basic

What causes 'Jank' on a webpage?

intermediate

When does the Event Loop decide to render?

advanced

What is `requestAnimationFrame`?

Flash Cards

Question

When does the Event Loop decide to render?

Click to reveal answer

Answer

The browser attempts to render between Macrotasks. If the Call Stack and Microtask Queue are completely empty, the Event Loop will pause and allow the Rendering Engine to update the DOM visually before picking up the next Macrotask.

Question

What is requestAnimationFrame?

Click to reveal answer

Answer

It is a special API that queues a callback to run at the absolute most optimal time: immediately before the browser performs its next Style/Layout/Paint cycle. It is far superior to `setTimeout` for animations.