JavaScript Interview Question #156

What is the browser rendering pipeline at a high level?

Performance, Browser APIs, Rendering & Modern Web Architecture Senior Advanced

Quick Interview Answer

At a high level, the browser parses HTML and CSS, builds structures needed for rendering, calculates layout, paints visual content, and composites layers for display. JavaScript can trigger changes that require some of these stages to run again.

Detailed Explanation

At a high level, the browser parses HTML and CSS, builds structures needed for rendering, calculates layout, paints visual content, and composites layers for display. JavaScript can trigger changes that require some of these stages to run again.

Performance-sensitive code should avoid unnecessary repeated layout reads and writes, large DOM changes, and long-running JavaScript on the main thread because these can delay rendering and user interaction.

Code Example

// Batch related DOM writes where practical.
const panel = document.querySelector(".panel");

panel.classList.add("expanded");
panel.style.width = "500px";

// Avoid repeatedly alternating layout reads and writes
// inside large loops when performance matters.