How does DOM created and rendered in browser?

Delivering content on the browser requires lots of work in the background. It involves series of steps before we see it on the browser screes

When a user types a web URL in the address bar and press enter, the address is resolved to an IP address (it is called DNS resolve). Now it looks up for this IP address on the network and reaches the server. The server receives the request and serves the HTML content. Content is transferred in bytes stream. Once the browser receives the bytes it does the following.

DOM Tree construction

• Reading Bytes
• Converting Bytes to characters
• Converting characters to tokens
• Converting tokens to nodes
• Converting nodes to DOM tree

CSS OM Creation is the next step after DOM tree creation. The process is the same as DOM tree creation. At the end the CSSOM tree is created.

CSSOM Tree construction

• Reading Bytes
• Converting Bytes to characters
• Converting characters to tokens
• Converting tokens to nodes
• Converting nodes to CSSOM tree

Finally, the DOM tree and CSSOM tree are combined and we get the Render tree. Render tree is the exact DOM nodes that will be rendered on the browser. But wait, Though we have CSS rule information and we have already created a CSSOM tree but still we have to calculate the layout for the screen (Means- width, size, and position of each element). The next phase is the Layout Phase. Render Tree is used in the Layout phase to calculate the size, width, and location of elements. After layout phase is done Painting Phase started. Now the painting phase starts rendering the pixels to the browser.

Conclusion

HTML markup is transferred into DOM and CSS markup is transferred into a CSSOM. DOM and CSSOM both are independent data structure. DOM and CSSOM are combined into a render tree. Render tree is then used to compute the layout of each node (each visible element). Once layout process is done, it is served as input to paint process. Paint process finally renders the pixels to the screen. It is very important to optimise all these steps to achieve optimal rendering performance of webpage.