DEV Community

Cover image for How does a Browser render a Webpage?
Anuradha Aggarwal
Anuradha Aggarwal

Posted on • Updated on • Originally published at anuradha.hashnode.dev

How does a Browser render a Webpage?

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 thebinary 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

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

🎯 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

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

  • Box model generated in Layout phase:

box-model.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

🎯 Wrap Up!!

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

LinkedIn Twitter Instagram

Buy-me-a-coffee

Discussion (8)

Collapse
srikanth597 profile image
srikanth597

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?

Collapse
alohci profile image
Nicholas Stimpson

@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.

Collapse
anuradha9712 profile image
Anuradha Aggarwal Author • Edited on

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.

Collapse
geminii profile image
Jimmy

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 🙏👍

Collapse
clementgaudiniere profile image
Clément Gaudinière

Great article, it's interesting to position yourself on the web browser side. 👍

Collapse
anuradha9712 profile image
Anuradha Aggarwal Author

Thank you!!

Collapse
jothinkumar profile image
Jothin kumar

Thanks for the detailed explanation.
:D

Collapse
anuradha9712 profile image
Anuradha Aggarwal Author

@jothinkumar I'm glad you find it useful 🙂