Ronaldo Vitto Lewerissa

Software engineering learning documentation.

How Browser Rendering Works

I guess it’s pretty important to figure how the browser actually works behind the scene.

We all know how to write HTML, CSS, and JavaScript. But how do browser actually use those languages to actually produce something useful to the user?

I didn’t know the answer profoundly though, but I discover several interesting sources you may want to checkout!

Reflow & Repaint is a useful concept the browser implements whenever changes occur. It is important for you to consider because it affects your web performance.

This is my conclusion for the preceding articles.

Big Picture:

DOM + CSSOM –> Render Tree –> Layout –> Paint

HTML parsed to a DOM (Document Object Model). I believe it contains information like type of the node and attributes (so it include inline style, and mutable using the domNode.style).

CSS parsed to a CSSOM (CSS Object Model).

Together, DOM and CSSOM blends into Render Tree.

The browser layout each node of the Render Tree, then paints them to the page.

Repaint is a concept where the browser repaints your node to the page.

Reflow is when the browser relayout your node, and then repaints it back, so it’s considered more expensive.

I believe changes occur because we mutate the DOM, not the Render Tree (I mean, changes to the DOM reflects to the Render Tree, but we can not directly change the Render Tree).

What expensive for the browser:

  • Multiple pass

  • Multiple node needed to reflow & repaint during each pass

And by mean pass is the rendering flow.

So multiple pass means multiple rendering flow.

One of the article mention that the browser is smart enough to cache changes before actually do an actual rendering.

So if you update a single node using several statement in JavaScript, the browser will cache the changes first, then when all your statement ends the browser will implement all the changes in a single pass.

Important to note is if you’re reading a DOM node, it will force a reflow, and your cache will directly be implemented.

Written by Ronaldo Vitto Lewerissa

Read more posts by this author.