What is the Critical Rendering Path and what are its main stages?

Critical Rendering Path (CRP) is the sequence of steps that the browser performs to convert HTML, CSS, and JavaScript into a visually rendered page.

Main stages of CRP:

1. HTML Parsing — the browser reads HTML and constructs the DOM (Document Object Model).
2. CSS Parsing — CSSOM (CSS Object Model) is built from CSS files and inline styles.
3. Render Tree Construction — combining DOM and CSSOM into a render tree containing only visible elements with their styles.
4. Layout (Reflow) — calculating the sizes and positions of elements on the page.
5. Painting — rendering pixels on the screen.

Optimizing CRP is important for speeding up page load and rendering, for example, by minimizing blocking resources and reducing reflows.