The critical rendering path includes building the Document Object Model (DOM), which is a parsed representation of the HTML document, building the CSS Object Model (CSSOM) which contains all the styles of the page, generating the render tree, and finally determining the layout based on the screen size.
The path happens as follows:
- The document object model is created as the main HTML document of a page is parsed.
- The HTML can also reference CSS, either inline or as an external stylesheet, which in turn builds the CSS object model.
- The browser then combines the DOM and CCSOM to create the Render Tree which allows the browser to determine the size and location of everything on the page.
- Once layout is determined, the page is displayed on the screen.