Tell me about the critical stages of browser rendering (Critical Rendering Path)

Critical Rendering Path is the sequence of steps that the browser performs to display a web page to the user:

1. HTML Parsing — the browser receives HTML and constructs the DOM tree.
2. CSS Parsing — CSS files are loaded and processed, creating the CSSOM (CSS Object Model).
3. Building the Render Tree — combining DOM and CSSOM into the render tree, which contains only visible elements with their styles.
4. Layout (Reflow) — calculating the exact positions and sizes of elements on the page.
5. Painting — rendering pixels on the screen.

Optimizing the Critical Rendering Path is important for speeding up page load times and improving user experience. For example, minimizing blocking CSS and JavaScript, using asynchronous script loading, and inlining critical styles help reduce the time to first contentful paint.