Basics

1. Dom tree

The HTML DOM (Document Object Model) is a programming interface that represents the structure of a web page in a way that programming languages like JavaScript can understand and manipulate.

Browser Parse the HTML source code and construct the DOM Tree

2. Reflow

Calculate the position and size of each visible element. The Reflow happens when changes are made to the elements, that affect the layout of the partial or whole page. The Reflow of the element will cause the subsequent reflow of all the child and ancestor elements in the DOM

3. Repaint

The Repaint occurs when changes are made to the appearance of the elements that change the visibility, but doesn't affect the layout Eg: Visibility, background color, outline

Rendering Flow

1. Initial rendering

1. Browser Parse the HTML source code and construct the DOM Tree

2. Browser generate CSSOM tree from the CSS rules

3. then browser combine the DOM and CSSOM tree into the RenderTree

2. Dynamic Rendering (If there are any changes to the DOM after initial rendering)

1. browser reflow the RenderTree (Calculate the position and size of each visible node)

2. browser repaint the renderTree on the screen

If there are any changes to the DOM, it is rebuilt on the Element and its child elements as well. This process will recalculate the layout and repaint it and eventually will cause a reduction in performance as it continues the process of Rendering the tree, Layout, and Paint.

eg:

Let’s say the green box below is a div element and a change was added to the element within the DOM. It will go through the process of re-rendering the tree, calculating the space where it should be placed again (Layout), and painting it on the user’s screen again.

Therefore, even if one change was made into a single element, all the elements have to be re-rendered and painted on the screen again, regardless if they were manipulated or not.

1. Reflow will happen when Adding, Removing, Updating the DOM nodes

2. Hiding DOM Element with display: none will cause both reflow and repaint

3. Hiding DOM Element with visibility: hidden will cause the only repaint, because no layout or position change

4. Moving, animating a DOM node will trigger reflow and repaint

5. Resizing the window will trigger reflow

6. Changing font-style alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform reflow. Once those layout operations have completed any damaged pixels will need to be a repaint

7. Adding or removing Stylesheet will cause the reflow/repaint

8. Script manipulating the DOM is the expensive operation because they have recalculated each time the document, or part of the document modified. As we have seen from all the many things that trigger a reflow, it can occur thousands and thousands of times per second