frontend

How Browser Renders a Page

January 4, 2026

How Browser Renders a Page

Overview

Understanding how browsers render web pages is crucial for web performance optimization. The browser follows a specific sequence of steps known as the Critical Rendering Path (CRP) to transform HTML, CSS, and JavaScript into pixels on the screen.

Critical Rendering Path (CRP)

The Critical Rendering Path is the sequence of steps the browser takes to render a webpage. This process transforms HTML, CSS, and JavaScript into pixels on the screen.

Step 1: HTML Parsing & DOM Construction

The browser fetches and parses HTML into a Document Object Model (DOM) tree.

Process

  1. HTML → Tokens: Browser breaks HTML into tokens
  2. Tokens → Nodes: Tokens are converted into nodes
  3. Nodes → DOM Tree: Nodes are organized into a tree structure

Characteristics

  • DOM construction is incremental
  • Each DOM node represents an HTML element with its properties
  • Parsing happens as HTML is received (streaming)
<!-- HTML -->
<div>
  <h1>Title</h1>
  <p>Content</p>
</div>

// Resulting DOM Tree
div
├── h1 ("Title")
└── p ("Content")

Step 2: CSS Parsing & CSSOM Creation

The browser fetches and parses CSS files and inline styles to create the CSS Object Model (CSSOM).

Key Differences from DOM

  • CSSOM is not incremental: All CSS must be processed before rendering
  • CSS is render-blocking: Browser waits for CSS before painting
  • Rules can be overwritten: Requires complete CSSOM for correct specificity

Process

/* CSS */
body { font-size: 16px; }
h1 { font-size: 24px; }

// CSSOM Structure
{
  body: { fontSize: "16px" },
  h1: { fontSize: "24px" }
}

Step 3: Render Tree Construction

The browser combines DOM and CSSOM into a render tree.

Characteristics

  • Only includes visible elements
  • Excludes hidden elements:
    • display: none
    • head elements
    • script tags
  • Contains styling and layout information

Example

<!-- DOM includes all elements -->
<div style="display: none">Hidden</div>
<div>Visible</div>

// Render Tree only includes visible elements
div (Visible)

Step 4: Layout (Reflow)

The browser calculates the exact size and position of each element.

Process

  • Determines viewport-relative positioning
  • Calculates dimensions for each element
  • Handles box model calculations

Performance Impact

  • Changes can trigger cascading reflows
  • Expensive operation - minimize layout changes
  • Batch DOM modifications when possible
// ❌ Bad: Multiple reflows
element1.style.width = '100px'; // Reflow
element2.style.height = '200px'; // Reflow
element3.style.margin = '10px'; // Reflow

// ✅ Good: Single reflow
element1.style.cssText = 'width: 100px; height: 200px; margin: 10px;';

Step 5: Paint

The browser converts the render tree into pixels.

Visual Properties Applied

  • Colors
  • Borders
  • Backgrounds
  • Other visual styles

Optimization

  • Optimized for rendering speed
  • May paint in layers for compositing

Step 6: Compositing

The browser combines painted layers into the final display.

Process

  • Uses hardware acceleration
  • GPU rendering for better performance
  • Handles layer stacking and blending

Layers

// Elements that create new layers
{
  transform: 'translateZ(0)', // Force layer
  willChange: 'transform',     // Hint for layer
  position: 'fixed'            // Creates layer
}

Complete Rendering Flow

HTML → DOM Tree
  ↓
CSS → CSSOM
  ↓
DOM + CSSOM → Render Tree
  ↓
Layout (Reflow) → Calculate positions
  ↓
Paint → Draw pixels
  ↓
Compositing → Final display

Performance Optimizations

1. Caching

  • Browser caches resources
  • Reduces network requests
  • Speeds up subsequent loads

2. Lazy Loading

<!-- Lazy load images -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- Lazy load iframes -->
<iframe src="video.html" loading="lazy"></iframe>

3. Incremental Rendering

  • Browser renders as content arrives
  • Shows content progressively
  • Improves perceived performance

4. Hardware Acceleration

/* Force GPU acceleration */
.element {
  transform: translateZ(0);
  will-change: transform;
}

Additional Factors

Browser Extensions

  • Can modify rendering
  • May add overhead
  • Affect performance metrics

Plugins

  • Legacy plugins (Flash, etc.)
  • Modern browsers have limited plugin support

User Preferences

  • Font size preferences
  • Color scheme preferences
  • Accessibility settings

Device Capabilities

  • Screen resolution
  • GPU capabilities
  • Memory constraints
  • CPU performance

Optimizing Critical Rendering Path

1. Minimize Render-Blocking Resources

<!-- ❌ Bad: Render-blocking CSS -->
<link rel="stylesheet" href="styles.css">

<!-- ✅ Good: Non-blocking CSS -->
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

2. Defer Non-Critical JavaScript

<!-- ❌ Bad: Blocking script -->
<script src="analytics.js"></script>

<!-- ✅ Good: Deferred script -->
<script src="analytics.js" defer></script>

3. Inline Critical CSS

<!-- Inline critical CSS -->
<style>
  /* Critical above-the-fold styles */
  body { margin: 0; }
  .header { height: 60px; }
</style>

<!-- Load non-critical CSS asynchronously -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

4. Optimize Images

<!-- Use modern formats -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Measuring Performance

Performance API

// Measure rendering performance
window.addEventListener('load', () => {
  const perfData = performance.getEntriesByType('navigation')[0];
  console.log('DOM Content Loaded:', perfData.domContentLoadedEventEnd);
  console.log('Load Complete:', perfData.loadEventEnd);
});

Chrome DevTools

  • Performance tab for detailed analysis
  • Lighthouse for optimization suggestions
  • Network tab for resource loading

Common Performance Issues

1. Render-Blocking CSS

<!-- Multiple render-blocking stylesheets -->
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">

Solution: Combine and minify CSS, use critical CSS inline.

2. Large JavaScript Bundles

// Large bundle blocks parsing
<script src="bundle.js"></script>

Solution: Code splitting, lazy loading, defer/async.

3. Excessive Reflows

// Multiple style reads/writes cause reflows
const width = element.offsetWidth; // Read - triggers reflow
element.style.width = width + 10 + 'px'; // Write - triggers reflow

Solution: Batch reads and writes, use requestAnimationFrame.

Best Practices

  1. Minimize render-blocking resources
  2. Optimize CSS delivery
  3. Defer non-critical JavaScript
  4. Use modern image formats
  5. Implement lazy loading
  6. Minimize layout shifts
  7. Use hardware acceleration
  8. Monitor performance metrics

Summary

Understanding the browser rendering process helps optimize web performance. The Critical Rendering Path consists of: HTML parsing (DOM), CSS parsing (CSSOM), render tree construction, layout, paint, and compositing. Optimizing each step reduces load times and improves user experience. Focus on minimizing render-blocking resources, optimizing CSS and JavaScript delivery, and using modern performance techniques.