What is the critical rendering path in browsers?
Answer
The critical rendering path is the sequence of steps a browser takes from receiving HTML bytes to rendering pixels on screen. The steps are: 1. Parse HTML into the DOM tree. 2. Parse CSS into the CSSOM tree. The browser blocks rendering until all CSS is downloaded and parsed (CSS is render-blocking). 3. Combine DOM and CSSOM into the Render Tree (only visible elements). 4. Layout: calculate each element's size and position. 5. Paint: draw pixels to layers. 6. Composite: assemble layers. To optimize it: inline critical CSS, defer non-critical CSS, use <link rel="preload"> for key resources, and place <script> tags at the end of <body> or use async/defer.
Previous
What is the CSS outline property and how does it differ from border?
Next
What are web fonts and how do you use @font-face?
More HTML / CSS Questions
View all →- Intermediate How does the CSS cascade work?
- Intermediate What is BEM (Block Element Modifier) methodology in CSS?
- Intermediate What are CSS custom properties (CSS variables)?
- Intermediate What is the difference between em, rem, px, vh, and vw units in CSS?
- Intermediate How does Flexbox differ from CSS Grid? When would you use each?