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.