The Secrets of the CSSOM & Why You Should Care

How browsers render & style a page

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).

While the browser is busy making the DOM, it stops to download any links to external resources, then continues. It stops because it assumes whatever is linked to is required in order to render the page properly (like images, CSS, or Javascript files).

#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

The browser then calculates the size and position of every visible element. Whenever the render tree is changed (for example, javascript DOM manipulation or a change in the viewport), the layout is created again.

#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.

Javascript can block the CSSOM from being built, which in turn delays the page from starting to render. That’s one reason why you typically see stylesheets loaded at the top of the page, and the javascript at the very end. Your browser can start building the CSSOM while it completed scanning the remaining HTML and loading the javascript.

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.

Conclusion

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.

The Web Performance Handbook, by Glen Elkins

Want more?

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.

Front End dev + Solution Architect. Read The Web Performance Handbook — https://amzn.to/39dGsT9

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store