In this article, we'll look into actions performed by a browser to render a webpage.
🎯 Steps involved in HTML page rendering:
- Construction of DOM
- Construction of CSSOM
- Construction of Render tree
- Layout Phase
- 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 headerContent-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.
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.
🎯 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,linktags).
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.
- Box model generated in Layout phase:
🎯 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.
🎯 Wrap Up!!
That's all for this article. Thank you for your time!! Let's connect to learn and grow together.
Latest comments (11)
Hey great article....
But I guess CSSOM tree is generated simultaneously when creating the DOM tree.
When html is parsed into Dom Tree ,when it encounters the CSS files it makes a request for it and a CSSOM is created simultaneously.
DOM tree and CSSOM tree are 2 independent tree structures , these two entities are combined to formed a Render tree, a combination of both DOM and CSSOM.
U should have also explained how DOM and CSSOM behaves when encountering Scripts(Javascript) .Like how DOM halts until script execution and script stops until CSSOM execution that led to critical path rendering.
I enjoyed your article with beautiful diagrams ....thankyou.
One question:-
Please free to answer ,
When we create single file and save it with .html and run from browser
WIll it be CSR or SSR?
Great article Anuradha.
Really great article. One question about all the process : how can we have the duration for each steps ? Is there so hook or whatever ? Or only with lighthouse when recording ?
Thanks a lot again for this great article 🙏👍
Thanks for the detailed explanation.
:D
@jothinkumar I'm glad you find it useful 🙂
Good one, seems like I'm seeing ur posts after longtime.
Question on CSSOM , where u mentioned it will copy the css to html element, but again if I understand ur statements correctly Render tree is also doing same job as CSSOM stage, couldn't spot the exact bit which differs , to me both stages looks to club css to html element?
What does it mean by user agent style sheets? Does it mean default browser style that comes i.e the bare html without connecting written css code?
@srikanth597 You are correct. The CSSOM diagram, widely reproduced from a Google source, misrepresents what the CSSOM is. There is no body-to-div-to-img tree structure in the CSSOM. The CSSOM is a like a database of the accumulated stylesheets loaded for the document. All the rules, media queries etc declared, but not yet applied via the cascade to the DOM elements. The CSSOM provides the means for this database of rules to be manipulated by JavaScript.
Only when the CSSOM is applied to the DOM can the cascade be resolved for each element and the render tree (a.k.a box tree) constructed.
CSSOM contains the nodes on which css rules are applied whereas render tree only contains the visible nodes to be displayed on the screen.
And yes, user-agent stylesheet means default styles applied by web browsers in absence of any css rules specify by user.
Great article, it's interesting to position yourself on the web browser side. 👍
Thank you!!