🎨

Critical Render Path

intermediate

The Critical Render Path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on screen. Optimizing it is key to fast page loads and smooth interactions.

🎮Interactive Visualization

Code
1<html>
2  <head>
3    <link href="style.css" rel="stylesheet">
4  </head>
5  <body>
6    <div class="box">Hello</div>
7  </body>
8</html>
HTML→DOM
CSS→CSSOM
Render Tree
Layout
Paint
DOM Tree
<html>
Step 1/6Browser receives HTML and starts parsing
Key Insight: The Critical Render Path: HTML→DOM, CSS→CSSOM, Render Tree, Layout, Paint. CSS blocks rendering!

Key Points

  • HTML parsing builds the DOM (Document Object Model)
  • CSS parsing builds the CSSOM (CSS Object Model)
  • DOM + CSSOM = Render Tree (only visible elements)
  • Layout: calculates exact position and size of each element
  • Paint: fills in pixels (colors, images, text)
  • Composite: layers are combined and sent to GPU

💻Code Examples

Render Pipeline

<!-- Browser processes this: -->
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box">Hello</div>
    <script src="app.js"></script>
  </body>
</html>

<!-- Pipeline:
1. Parse HTML → Build DOM
2. Parse CSS → Build CSSOM
3. Combine → Render Tree
4. Layout → Calculate positions
5. Paint → Fill pixels
6. Composite → Send to GPU -->

The browser pipeline from HTML to pixels

Render-Blocking CSS

<!-- CSS blocks rendering! -->
<head>
  <!-- This blocks paint until loaded -->
  <link rel="stylesheet" href="styles.css">

  <!-- This doesn't block (print only) -->
  <link rel="stylesheet" href="print.css" media="print">

  <!-- Preload critical CSS -->
  <link rel="preload" href="critical.css" as="style">
</head>

<!-- Browser waits for CSS before
     painting anything to avoid FOUC
     (Flash of Unstyled Content) -->

CSS blocks rendering until fully loaded

Parser-Blocking JavaScript

<!-- JS blocks HTML parsing! -->
<body>
  <div>Content above</div>

  <!-- Blocks parsing until executed -->
  <script src="app.js"></script>

  <!-- Use defer: loads async, runs after HTML -->
  <script defer src="app.js"></script>

  <!-- Use async: loads async, runs immediately -->
  <script async src="analytics.js"></script>

  <div>Content below (blocked by script)</div>
</body>

Scripts block HTML parsing unless defer/async

Reflow (Layout)

// EXPENSIVE: Triggers layout recalculation

// Reading layout properties:
element.offsetHeight;
element.getBoundingClientRect();

// Changing layout properties:
element.style.width = "100px";
element.style.margin = "10px";

// BAD: Layout thrashing
for (let i = 0; i < 100; i++) {
  el.style.width = el.offsetWidth + 10 + "px";
  // Read → Write → Read → Write...
}

// GOOD: Batch reads, then writes
const width = el.offsetWidth;
el.style.width = width + 1000 + "px";

Avoid layout thrashing by batching DOM operations

Repaint vs Reflow

// REPAINT only (cheap)
// Changes visual properties, not layout
element.style.color = "red";
element.style.backgroundColor = "blue";
element.style.visibility = "hidden";

// REFLOW + REPAINT (expensive)
// Changes geometry/layout
element.style.width = "200px";
element.style.fontSize = "20px";
element.style.display = "none";

// NEITHER (use transform/opacity)
element.style.transform = "translateX(100px)";
element.style.opacity = "0.5";
// Compositor-only, no layout/paint!

Prefer compositor properties for animations

Optimize Critical Path

<!-- 1. Inline critical CSS -->
<style>
  /* Above-the-fold styles only */
  .header { ... }
</style>

<!-- 2. Defer non-critical CSS -->
<link rel="preload" href="full.css" as="style"
      onload="this.rel='stylesheet'">

<!-- 3. Defer JavaScript -->
<script defer src="app.js"></script>

<!-- 4. Lazy load images -->
<img loading="lazy" src="below-fold.jpg">

<!-- 5. Use resource hints -->
<link rel="preconnect" href="https://api.com">

Techniques to speed up initial render

Common Mistakes

  • Putting blocking scripts in <head> without defer/async
  • Not inlining critical CSS for above-the-fold content
  • Causing layout thrashing by mixing reads and writes
  • Animating layout properties instead of transform/opacity

Interview Tips

  • Draw the render pipeline from HTML to pixels
  • Explain the difference between reflow and repaint
  • Know which CSS properties trigger layout vs paint vs composite
  • Understand defer vs async for script loading

🔗Related Concepts

🔄

Event Loop

How async JavaScript works

👷

Web Workers

Multi-threading in the browser

🧠

Memory Model

Stack vs Heap and garbage collection