- 1. Render tree construction
- The first step is to construct the render tree. The render tree is a subset of the DOM tree that contains only the elements that are visible on the page.
- 2. Layout
- The next step is to layout the render tree. This is done by calculating the exact size & position of each element in the render tree.
- This step happens every time we change something in the DOM that affects the layout of the page, even partially.
- Examples of situations when the positions of the elements are recalculated are:
- Adding or deleting elements from the DOM
- Resizing the browser window
- Changing the width, height, or the position of an element
-
- 3. Painting
- Next, the browser decides which nodes need to be visible and calculates their position in the viewport, it's time to paint them (render the pixels) on the screen. This phase is also known as the rasterization phase, where the browser converts each element calculated in the layout phase to actual pixels on the screen.
- Just like the layout phase, this phase happens every time we change the appearance of an element in the DOM, even partially.
- Examples of situations when the positions of the elements are recalculated are:
- Changing the outline of an element
- Changing the opacity or visibility of an element
- Changing the background color of an element
- 4. Layering and Compositing
- The final step is to composite the layers. This is done by the browser to optimize the rendering process.
Compositing is a technique to separate parts of a page into layers, painting them separately and compositing as a page in a separate thread called the compositor thread. When sections of the document are drawn in different layers, overlapping each other, compositing is necessary to ensure they are drawn to the screen in the right order and the content is rendered correctly
The browser uses the DOM tree and CSSOM to render the page.
Important!
DOM updates, specifically layout and paint, are extremely expensive operations, which can be noticed significantly on low-end devices. It is important to minimize the number of times it is triggered.