CSSOM Construction
How the browser converts CSS rules into the CSS Object Model tree.
What it is
The CSSOM (CSS Object Model) is a tree-like data structure that represents all of the CSS styles mapped to the DOM nodes.
Just like HTML is parsed into the DOM, CSS is parsed into the CSSOM. The browser cannot render a page without both.
Why it matters
CSS is render-blocking. The browser will halt rendering the page until it has fully downloaded and built the CSSOM.
Understanding the CSSOM is crucial for performance. A massive, unoptimized CSS file can delay the First Contentful Paint (FCP) significantly.
How it works
When the browser encounters a <link rel="stylesheet"> tag in the <head>, it immediately issues a request for that file.
Once downloaded, the browser reads the raw bytes, tokenizes them, and builds a tree of style rules (the CSSOM).
The CSSOM tree structure is determined by CSS selectors. More specific rules cascade down the tree and overwrite generic rules inherited from ancestor nodes.
Try it
Watch how the browser builds a CSSOM tree by applying styles recursively downwards based on selector specificity.
The browser parses these rules into a CSS Object Model tree. Notice how styles cascade down from the body to the child nodes.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- The CSSOM is the style equivalent of the DOM.
- CSS is render-blocking by default.
- The DOM and CSSOM are independent trees that are combined later.
Done with this concept?
Mark it complete to track your progress. No login needed.