DEV Community

Discussion on: How the browser renders a web page

Collapse
 
starkiedev profile image
James Starkie

Thanks for the feedback, yes I see what you're saying. It's a great point. I'm happy to admit I'm no expert on the inner workings of the CSSOM. I'll do some more investigation and see if I can update the diagram to better reflect what's happening 👍

Collapse
 
luiz0x29a profile image
Real AI • Edited

From what I've read on Firefox source code, James is right.
You can actually make the CSS tree at #3. Both trees are constructed at the same time. Rules are just rules, they are attached in reverse order from what you expect, you can actually build the entire rule tree without having the DOM, its the DOM that does the lookup on the CSSOM when its time to render.

Its more like the body rule is the child of the div rule, CSS is inverted. The lookup is the inverse of what common sense says it is. Its a literal inverted tree, it actually is.

Thread Thread
 
alohci profile image
Nicholas Stimpson

What do you mean by both trees? The DOM tree and the CSSOM tree, or the CSSOM tree and the render tree? Have you got a link to the relevant bit of the Firefox source code?