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)