Module 2 · 1 chapters

Browser Rendering Pipeline

Once HTML and CSS reach the browser, a fixed pipeline converts bytes into pixels on screen. Every frontend performance decision — animations, layout changes, lazy loading — maps to one of these five stages.

This module is built for SDE-2 frontend interviews: you will learn not just the stages, but which CSS properties trigger layout vs paint vs composite-only updates, how forced reflow happens, and how LCP, INP, and CLS connect to the pipeline.

By the end, you will be able to explain the critical rendering path end-to-end, diagnose layout thrashing in DevTools, and recommend animation and DOM strategies that stay on the compositor thread.

The Concepts tab walks through each pipeline stage with examples; the Interview tab covers reflow vs repaint, GPU layers, and how to fix CLS and INP issues rooted in layout work.

Chapters in this module

  1. Browser Rendering PipelineFrom URL to pixels in five stages: Parse (DOM & CSSOM), Style (render tree), Layout, Paint, and Composite. Learn what triggers each stage, which CSS properties are cheap vs expensive, and how to avoid forced reflow and layout thrashing.
Start with Browser Rendering Pipeline