How does a Browser render a Webpage?
Tags: webdev, javascript, html, css
Published: 2021-12-20 09:21:49

In this article, we'll look into actions performed by a browser to render a webpage.
 
## 🎯 Steps involved in HTML page rendering:
1. Construction of DOM
2. Construction of CSSOM
3. Construction of Render tree
4. Layout Phase
5. Painting Phase

### 🎯 Construction of DOM

- Browser receives an HTML document from the server in the`binary stream format`, which is basically a text file with a response header `Content-Type = text/html; charset=UTF-8`.

- When the browser reads the HTML document, whenever it encounters an HTML element, it creates a JS object called a **Node**. Eventually, all html elements will be converted to a **Node**.  

- After the browser has created nodes from the HTML document, it has to create a "tree-like" structure of these node objects.

![dom.drawio.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639942223254/opMTE9wJ9.png)

**Document Object Model** is a high-level Web API provided by the browser to efficiently render a webpage & expose it publically for the developers to dynamically manipulate DOM elements for various purposes.

### 🎯 Construction of CSSOM

- After constructing the DOM, the browser reads CSS from all the sources & constructs a CSSOM (CSS Object Model) - a tree-like structure.

- Each node in this tree contains CSS-style information that will be copied to the DOM element it targets.

- Most of the browser comes with their own stylesheet which is called **user-agent stylesheets**. It is a default stylesheet used by web browsers. in the absence of any CSS applied, the browser still has to render the content somehow, and the browser uses the user-agent stylesheet for that.

![CSSOM-2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640073959808/1vYqb3r5B.png)

### 🎯 Construction of Render Tree

- DOM & CSSOM are combined together to form a Render tree that contains the nodes which have to be displayed on the page.

- From the root of the DOM tree, each **visible** node is traversed and a respective CSSOM rule is applied. Finally, it gives the render tree containing **visible** nodes with content and styling. 

- It is a low-level representation of what will eventually get printed on the screen, it won't contain nodes that do not hold any area in the pixel matrix (like `head`, `meta`, `link` tags).

![RENDER-TREE.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640074387488/9q_5r7hTF.png)

As you notice above, nodes that contain `display: none` CSS properties are not part of the render tree.

### 🎯 Layout Phase

- This phase can be said as a **geometry phase**, where we calculate the geometry of the nodes.

- In the layout phase, the exact position of the nodes and their size respective to the view-port of the browser is computed. In this way, a **box model** is generated which knows the exact positions and size. This process is also known as **layout** or **reflow**.

![layout.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639943885518/Jz7bruFfF.png)

- Box model generated in Layout phase:

![box-model.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640074982590/znytiyVvy.png)

### 🎯 Painting Phase

- As we know the visible nodes, their styling, & their geometry, now all this information is used to render the nodes from the render tree to actual pixels on the screen. This process is referred to as Painting. It uses the UI backend layer.

![DOM Lifecycle.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639944825643/nqjp1rPMo.png)

## 🎯 Wrap Up!!

That's all for this article. Thank you for your time!! Let's connect to learn and grow together.

[LinkedIn](https://www.linkedin.com/in/anuradha-aggarwal-4a2751107/) [Twitter](https://twitter.com/Anuradh06359394) [Instagram](https://www.instagram.com/blogcode404/)

[![Buy-me-a-coffee](https://cdn.buymeacoffee.com/buttons/v2/default-blue.png)](https://www.buymeacoffee.com/anuradha2612)