- Published on
What is Critical Rendering Path
- Authors
- Name
- Mohit Verma
The critical rendering path is the sequence of steps that a web browser takes to render a webpage on the screen. It includes several stages that are essential to deliver a fast and responsive user experience. The key steps in the critical rendering path are:
HTML Parsing
The browser starts by fetching the HTML file from the server and parsing it to create a Document Object Model (DOM) tree. This tree represents the structure of the webpage and contains all the HTML elements, their attributes, and their content.
CSS Parsing and Styling
Once the DOM tree is created, the browser fetches the CSS files referenced by the HTML and parses them to create a CSS Object Model (CSSOM) tree. This tree represents the styles applied to each HTML element and contains all the CSS rules, their selectors, and their properties.
Render Tree Construction
The browser combines the DOM tree and the CSSOM tree to create a Render Tree, which is an internal representation of the page optimized for rendering. The Render Tree contains only the nodes that need to be rendered, and their style information is also included.
Layout
After the Render Tree is constructed, the browser performs a layout step to calculate the size and position of each element on the page. This step takes into account the styles applied to the elements, their content, and the available space on the screen.
Painting
Finally, the browser performs a painting step to render the elements on the screen. This involves drawing each element in the correct position with the correct size and applying the styles defined in the CSS.