Overview
The Critical Rendering Path(CRP) is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical rendering path improves the time to first render.
When the browser recieves HTML response via HTTP, the browser immediately begins parsing the HTML, converting the bytes into the DOM tree. Whenever the browser finds a link to external resources, for example:
<script src="example.js"></script> <!-- Scripts -->
<img src="example.png"/> <!-- Images -->
<link rel="stylesheet" href="styles.css"> <!-- CSS files -->it initiates an HTTP request to fetch that resource. Some resources can be blocking, while others can be asyncronous
Once the browser gets to the end of the HTML file, it starts construction the CSS Object Model. Once DOM and CSSOM are complete, the browser builds the Render Tree, computing the styles for all visible content. After the render tree is complete, layout occurs, defining the size and location for every element. Then the rendering (or painting) is complete.
DOM vs CSSOM
- DOM construction is incremental, CSSOM is not.
- this is because CSS is cascading, meaning rules can be overridden by what comes after. While HTML does not have this…(limitation? feature? insanity?)
- CSS is render blocking, therefore CSSOM is render blocking.
The render tree
The render tree is what happens when we combine the DOM and CSSOM. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determines which CSS rules are attached. The render tree only captures visible content. So elements with for example display: none - and all of their children - will not be seen on it.
Layout
This refers to verb of Layout-out as opposed to the term “Layout”. It is the process of laying out the elements on the screen (their size and location, to be specific) layout depends on the size of the screen see also: Layout Thrashing