In order to understand front end performance, one of the key concepts to grasp is how the browser renders the page. They way it does this is going through steps called the critical render path. This articles will go through the nuts and bolts.
How it works
First, the browser establishes the connection to the server and get the HTML page. While parsing the HTML, it will request the related assets (CSS and JavaScript). CSS is render blocking: the browser won’t put anything in front of the user until it’s done downloading. This is because a partial CSS file can’t be parsed correctly (later CSS rules can overwrite earlier rules).
The browser will then construct the DOM (document object model) from the HTML and the CSSOM (CSS object model) from the CSS. After the CSSOM is finished, JavaScript can run (remember that CSS is render blocking). Javascript can change both the DOM and the CSSOM, so the browser waits for the JavaScript to finish changing the page before going on to the next step of the process.
After the CSSOM and DOM are complete and the synchronous JavaScript is finished, the browser combines the information from both parts and establishes the render tree, the thing that combines the CSS, HTML and JavaScript for all the elements that will be rendered on the page. Because the render tree only contains what’s on the page, DOM nodes with the CSS property display: none; will not be included as part of the render tree.
From the render tree, the browser will use the size of the viewport in conjunction with the hierarchy of the render tree and the CSS information in it to lay out the page in preparation for rendering. Every time the render tree updates or the viewport size changes (a user rotating their phone or resizing their browser some other way), the browser has to go though the layout process again.
After the layout is done, the browser can now paint what it has from the layout onto the page.
That’s the critical render path! You can use this knowledge to build performant pages. We’ll talk about the implications of the way the browser renders to performance next time.