CODEWITHSUNDEEP
javascripthtmlcss
JackieWillen
JackieWillen

Reputation: 739

The detail about how browser generate CSSOM according to css style?

enter image description here

In a stackoverflow question said cssom and dom are generated synchronous.If cssom generates firstly, how does it know how the dom look like and generate a cssom tree look like a dom tree plus css properties as pic shown above.why not look like this according to the css.

enter image description here

when my html is like this as below.I can also use the style as above; enter image description here

Even when my html look like this.

enter image description here

Upvotes: 2

Views: 953

Answers (2)

Kasia
Kasia

Reputation: 1725

CSSOM doesn't need to know anything about the dom, because CSSOM is a tree of styling rules only.

You are referring to Render Tree, which is created after DOM and CSSOM are ready.

To make it more clear:

  1. HTML starts being parsed
  2. Style tag appears
  3. Parser not pause DOM tree building and starts process of building CSSOM
  4. DOM tree is built + CSSOM is built = browser starts building Render Tree
  5. Based on Render Tree browser starts calculating layout.
  6. After that painting starts.

Upvotes: 2

user10828808
user10828808

Reputation:

You can find the detailed explanation in the below link Render Tree

Upvotes: 1

Related Questions