syedsibtain
Fri Sep 15 2023
Critical Rendering Path: The critical rendering path refers to the sequence of steps that a browser takes between getting the resources like HTML, CSS and JS and displaying a web page on a user's screen(turn them to pixels). It's crucial for web performance optimisation because it directly impacts how quickly a web page loads and becomes interactive.
The key steps involved are:
- HTML parsing: The browser constructs the Document Object Model (DOM) tree by converting the HTML into a structured representation of the web page's content.
- CSS parsing: The browser also parses the stylesheets and create CSS Object Model (CSSOM). The DOM and CSSOM is combined to create render tree.
- Layout: Based on the render tree, the browser calculates the layout of each element, determining the size and position of each element, also called as reflow.
- Paint: Finally, the browser paints pixels on the screen as per the calculated layout and it involves converting the elements into actual pixels on the screen.