DEV Community

Discussion on: How does a Browser render a Webpage?

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.