How Browsers Render Webpages: A Deep Dive into Reflow, Paint, and Repaint

#webdev #browser #programming #frontend

If you’ve ever built a webpage and noticed things getting a bit laggy after adding styles or dynamic elements, you’ve likely triggered something under the hood - like reflow, repaint, or paint.

Don’t worry - these terms might sound complex at first, but they’re actually pretty straightforward once you get the hang of them. Let’s break them down together with real-world examples you can relate to.

The Big Picture: How a Web Page is Rendered
When a browser loads a webpage, it follows a process:

Parses HTML → Creates the DOM Tree
Parses CSS → Builds the CSSOM Tree
Combines DOM + CSSOM → Builds the Render Tree
Performs Layout → Decides the size and position of each element
Paints → Fills in colors, borders, text, shadows
Composites → Draws everything on the screen

Reflow (aka Layout)

Reflow happens when the browser needs to figure out where and how elements should appear on the page - basically recalculating the layout.

Any time you change something that affects an element’s size or position - boom, reflow kicks in.

Example
Imagine you have a blog post with a Read more button. When someone clicks it, more content shows up, pushing the rest of the page down. The browser has to recalculate the layout to fit everything in - that’s reflow.

Paint

Paint is the step where the browser actually fills in the pixels - adding colors, borders, shadows, images, text… basically everything you see.

Repaint

Repaint is a type of paint that happens when an element’s visual appearance changes, but its size or position doesn’t.

So, if you change something like the color, opacity, or visibility of an element, the browser can skip layout calculations and just update the pixels.

Example
Think about switching your website from light mode to dark mode. Text becomes white, backgrounds turn black, but nothing shifts in layout. That’s repaint.

Think of your browser as an artist: