[Study Notes] Browser Rendering Phase

After the HTTP/HTTPS connection is established between the client and server, the HTML file is sent over to begin loading the page. This is the beginning of the Browser Rendering Phase.

Browser Rendering Phases

1. HTML Parsing -> DOM Tree creating
2. CSS Parsing -> CSSOM Creating
3. Render Tree (Combines DOM and CSSOM)
4. Layout Phase (Reflow occurs here)
5. Paint Phase (Repaint occurs here)
6. Composite Phase

HTML Parsing (Document Object Model Tree)

After receiving the HTML file from the server, the browsers begins the Browser rendering process by parsing the HTML file and begins to create the DOM Tree (Document Object Model).

CSS Parsing (CSSOM Casscade Style Object Model)

During the parsing process of the HTML file, if it runs into a style tag, the CSS file parsing begins in parrel with the HTML parsing. However, the HTML render is blocked until CSSOM rendering is finished.

Render Tree

Once the DOM and CSSOM trees are created, it combines the two to create the Render Tree. The render tree is the visible elements that will be displayed on the browser.

Get Giwon’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In here, elements with the CSS property “display: none” are excluded. Whereas, “visibility: hidden” is hidden, but included.

Layout Phase (Reflow)

Calculation phase of each elements (Node) of the tree. It calculates the actual size and position of each elements such as width, height, and location of node on the screen. If any changes occurs after the calculation is finished, it restarts this process called the “Reflow” stage.

Paint Phase (Repaint)

Once calculation of each node is finishes, the Paint phases begins. This is the phase where the styling of each node begins. Repaint is when styling is changed. Also, if a reflow phase happens, the repaint phase repeats as well.

Composite Phase

The final phase where the Layout and Paint phase layers are combined and outputted to the browser screen.