From the course: CSS for Developers

Browser rendering stack - CSS Tutorial

From the course: CSS for Developers

Start my 1-month free trial Buy for my team

Browser rendering stack

“

- [Instructor] A typical website or web app is a mix of declarative and imperative code. Some of which is hardcoded, some of which is generated on the fly, and some of which is imported from external or third party sources. In other words, as the browser starts loading a webpage, there are a lot of moving parts. And some elements may be unknown. This is the nature of the web, and it's what we signed up for as web developers. To make sense of all this, browsers go through a sequence of rendering steps for every new page load. Generally speaking, that sequence looks like this. First, the browser processes the HTML markup and builds a DOM tree. Each element in the HTML becomes a node on that DOM tree. And the final tree makes up a document object model for the page. Second, the browser processes the CSS markup and builds a CSSOM tree. At this point, the document object model and the CSS object model are separate entities in the browser. Third, the browser combines the DOM and the CSSOM into a single render tree. This is where the relevant CSS properties are attached to each node on the DOM tree. Next, the browser recalculates the layout on the render tree down to each individual node. For each node, it computes the geometry, including size, position, and relation to other nodes. Finally, the browser paints the individual nodes in the viewport in accordance with both their DOM order and their CSSOM properties. As an interesting aside, JavaScript can intervene at any point through this rendering sequence to make changes to both the DOM and the CSSOM. Every time that happens, rendering has to stop and restart to make sure the geometry of each node is recalculated. Ever heard the term render blocking? That's what this is. What's important for our purposes is to understand the interplay between the document object model, the DOM, and the CSS object model, the CSSOM. They're separate entities, and they're combined in the browser at rendering time. Meaning there's a total separation between the content and the style, all the way until the content is painted in the browser.

Contents