How browsers render a page: DOM, CSSOM, render tree, layout, paint

How browser rendering works

1. First, the browser downloads the HTML and CSS from the server.

It turns the HTML and CSS files, which are plain text, into Object Models.

HTML becomes the DOM, and CSS becomes the CSSOM.

The DOM Tree and the CSSOM Tree are created.

2. Once the DOM Tree and CSSOM Tree are created, the browser uses the two to build the Render Tree.

The Render Tree has style information set on it and is made up of the nodes that actually appear on screen.

3. The browser calculates the exact position and size of each node within its viewport. This is the step that takes the styles and attributes

of the created Render Tree nodes and calculates where on the browser screen, and at what size, each one will be drawn.

In the layout step, relative position and size values like %, vh, and vw are converted to px, the unit drawn on the actual screen.

4. Once the layout calculation is done, the elements are drawn on the actual screen. The more complex the styles to process, the longer the paint step

takes. (Ex: gradients, shadow effects > solid background)

1. Build the DOM and CSSOM -> 2. Build the Render Tree -> 3. Layout -> 4. Paint

Source: https://amyhyemi.tistory.com/224