I guess it’s pretty important to figure how the browser actually works behind the scene.
I didn’t know the answer profoundly though, but I discover several interesting sources you may want to checkout!
- 10 ways to minimize reflows and improve performance
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.
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 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.
Important to note is if you’re reading a DOM node, it will force a reflow, and your cache will directly be implemented.