author avatar

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:

  1. 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.
  2. CSS parsing: The browser also parses the stylesheets and create CSS Object Model (CSSOM). The DOM and CSSOM is combined to create render tree.
  3. 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.
  4. 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.