From the course: CSS for Programmers
Unlock this course with a free trial
Join today to access over 25,500 courses taught by industry experts.
The browser rendering stack - CSS Tutorial
From the course: CSS for Programmers
The browser rendering stack
- [Instructor] A typical website or web app is a mix of declarative and imperative code, some of which is hard-coded, some of which is generated just-in-time and some of which is imported from external sources. In other words, as the browser starts loading a webpage, there are a lot of things going on and there are a lot of unknowns. To make sense of all this, browsers go through a sequence of rendering steps for every new page load. In general terms, 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 CSSOM into one proper render tree.…