HTML, CSS Parsing and Web Page Rendering Process in Browser | Critical Rendering Path

Critical Rendering path is the sequence of actions or steps performed by the browser in order to render a web page on the screen.

Critical Rendering path is the sequence of actions or steps performed by the browser in order to render a web page on the screen. These steps include fetching resources (HTML, CSS, JavaScript) from the server, parsing received HTML to create DOM, parsing CSS to create CSSOM, creating Render Tree which is the combination of DOM and CSSOM, calculating positioning and dimensions (Layout) of all elements, and finally Painting actual pixels on the screen.

We will use the example shown below to understand the whole process

Document Object Model

After fetching HTML from the server, the browser starts parsing it and creating DOM, This process itself is divided into many further steps that are needed to be performed in order to create the DOM tree, these steps include, converting received HTML bytes into Tokens, creating nodes using these tokens and then connecting these nodes to create DOM Tree.