2

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

2 Answers 2

2

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.
11
  • it's more complicated if Javascript is attached to the HTML - as JS has impact on both (just for different reasons)
    – Kasia
    Sep 19, 2019 at 13:15
  • I just want to understand a simple example as my question.No javascript to append html dynamically。I want to know how the browser parse css line by line then generate cssom.Why the tree node sort like this no like that. Sep 19, 2019 at 13:30
  • because this tree (CSSOM) is built only based on css selectors - there is body selector - body node, p selector (p can only appear in body) so body->p node and so on
    – Kasia
    Sep 19, 2019 at 13:32
  • we have span selector and this is another node in the CSSOM body->span, we have also more complicated selector p span, and it creates another node in CSSOM body->p->span
    – Kasia
    Sep 19, 2019 at 13:33
  • 1
    nice question! it's based on CSS selector only - we have img selector which is body img by default but applies to all img in the body (no matter if it will be in div, p, section or in the body directly) only if there would be added css selector div img new node would be created in CSSOM div->img and would contain rules only for images inside div - this rules would by cascade get rules from body img and add it's own rules on top of that
    – Kasia
    Sep 19, 2019 at 13:53
1

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

2
  • I have read this article but still don't know the details about how the cssom generated。Why it generates cssom look like pic above not like other tree.What is the rule to generate cssom according to css style line-by-line? Sep 19, 2019 at 13:18
  • it's based on your css selectors - CSSOM has no connection with your HTML just yet. As you can see CSSOM contains nodes related to css rules only - even if your HTML contains more different HTML tags
    – Kasia
    Sep 19, 2019 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.