The Secrets of the CSSOM & Why You Should Care
I spent a handful of year building websites without knowing how exactly one is rendered. I’d hear things about “painting” and “layout,” but I never really felt like I needed to dive into it in order to do my job.
I was wrong (kind of).
Sure, you can get by having a passing knowledge of how browsers create the page, but understanding the details helps you step up your game. It helps you optimize performance, and make more informed decisions around how you develop.
For years, I wondered things like:
- Does the size or complexity of your CSS really matter?
- When does a browser set the “layout,” and why?
- When does a page “paint”?
- Why does the render process matter?
It’s time we finally find out. Let’s dive in.
How is a page rendered?
#1 - Load the data
The browser loads the page from the network. The browser looks up the DNS to find the right place to connect, makes a TCP connection, and finally makes & receives a request for the page.
#2 - Document Object Model (DOM)
Browser starts to parse the HTML. It "tokenizes" the structure and creates a tree of related nodes called the DOM (Document Object Model).
#3 - CSSOM
The browser builds the CSSOM, by tokenizing the CSS rules and laying them out in a relational tree it can traverse when rendering the page.
#4 - Render Tree
The browser combines the CSSOM and the DOM trees and shows the result as the rendered page.
#5 - Layout
#6 - Paint
The browser uses the output from the layout and “paints” the pixel on the screen. Some CSS properties impact only paint, only layout or both. For example, the opacity property only triggers a re-paint, since it doesn’t change the positioning of the element, the page doesn’t need to be laid out again. This is why using opacity is more performant than display or margin when toggling it’s appearance.
Not all CSS properties are created equal; they have different paint times, depending on how much “work” is required by the browser. Equally important, different combinations of properties can affect the paint time. For instance, combining the border-radius and box-shadow of an element can triple the paint time for an element.
What is the CSSOM?
CSSOM stands for “CSS Object Model.” In order quickly traverse the styles that are needs to render a page, browsers create a “tree” or “map” of all the CSS it’s been given. The browser uses this tree, which holds all the styles for every element specified in the CSS, and stacks them up in the right order so they cascade correctly.
It does a similar job as the DOM (Document Object Model) for the styles on a page instead of the HTML. The CSSOM gathers all the selectors in the CSS (called “tokens”) and coverts them into nodes in a tree.
Why is the CSSOM Important?
It’s needed to start rendering the page
The browser needs to fully construct the CSSOM before rendering the page. That means it needs to load all the CSS and map all the selectors contained within, then it can start the rendering process that eventually displays the pixels you see.
The CSSOM Cannot be Cached
Although your browser will cache assets (including the CSS files you link to), it does not cache the CSSOM. Even if it has the CSS file in cache, the CSSOM is build from scratch every time the page is rendered, meaning if you have a hefty pile of CSS, you will negatively impact the performance of the page, even if you don’t have to load anything.
I’ve been a front-end developer for ten years and only ever really had a basic understanding of page rendering and the CSSOM. Understanding the nuances of CSSOM isn’t critical to building websites, since much of it happens under-the-hood, but understanding what’s happening can help guide you in a more wholistic way. It’s important for performance optimization and it’s a good basis for all the work we do.
We can’t hope to deliver something quickly without understanding what it takes to do so, and the CSSOM is a critical part of the equation.
In The Web Performance Handbook, you will learn the core concepts of web performance, the tools you need to build performant websites, and how to make good performance part of your team’s workflow.
Build better web apps, increase conversion times, and charge your clients more by using what you learn in The Web Performance Handbook.