Modern Browser Architecture (Processes and Threads)

Modern browser architecture is a complex multi-process system where each process is responsible for its own set of tasks. Understanding this architecture is critical for optimizing performance and understanding how web applications work.

Evolution: From Single-Process to Multi-Process Architecture

Problems of Single-Process Architecture

In early browser versions (e.g., Internet Explorer 6), everything ran in one process:

Problems:

• One crashed tab kills entire browser
• Slow JavaScript on one tab freezes all
• No isolation between sites (vulnerabilities)
• Memory leaks accumulate

Multi-Process Architecture

Modern browsers (Chrome, Edge, Firefox, Safari) use multi-process architecture, where each type of task runs in a separate process.

Main Browser Processes

Browser Process

Main process — coordinates all other processes.

Responsibilities:

• UI Thread: rendering browser UI (address bar, buttons, menus)
• Network Thread: managing network requests
• Storage Thread: file system access (cookies, localStorage, cache)
• Managing lifecycle of other processes
• Access rights management and sandboxing

Renderer Process

Key process for displaying web pages. Chrome creates one process per site (Site Isolation).

Responsibilities:

• Main Thread: JavaScript execution, DOM building, style calculation, layout
• Raster Thread: rasterization
• Compositor Thread: layer creation and management
• Worker Threads: Web Workers, Service Workers

GPU Process

Single process for all tabs, responsible for GPU interaction.

Responsibilities:

• Layer composition from all Renderer processes
• Graphics rasterization on GPU
• Hardware-accelerated video
• Canvas, WebGL rendering

Network Process

Isolated process for network operations (Chrome 69+).

Responsibilities:

• HTTP/HTTPS requests
• HTTP cache management
• Cookie management
• CORS checks

Storage Process

Data management for sites (Chrome 102+).

Responsibilities:

• IndexedDB
• Cache API
• LocalStorage
• File System Access API

Site Isolation — Critical for Security

Site Isolation is Chrome's architectural decision where each site gets its own Renderer Process.

Protection Against Spectre and Meltdown

Site Isolation protects against CPU-level attacks (Spectre, Meltdown).

Cost of Site Isolation:

Pros:

• Security: complete site isolation
• Stability: one site crash doesn't affect others
• Spectre/Meltdown protection

Cons:

• Increased memory consumption (~10-20%)
• Architecture complexity

Practical Implications for Developers

Memory Management

// Bad: memory leak in global scope
let heavyData = [];
function leak() {
  heavyData.push(new Array(1000000));
}

// Good: cleanup on close
window.addEventListener('beforeunload', () => {
  heavyData = null;
});

Long-Running Tasks

// Blocks Main Thread
function heavyCalculation() {
  for (let i = 0; i < 1000000000; i++) {
    // Blocking operation
  }
}

// Use Web Worker (separate thread)
const worker = new Worker('worker.js');
worker.postMessage({ task: 'heavy-calculation' });

GPU Acceleration

/* Triggers Layout and Paint on every frame */
.animate-left {
  animation: moveLeft 1s;
}

/* Uses composite layer (GPU) */
.animate-transform {
  animation: moveTransform 1s;
}
@keyframes moveTransform {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

Browser Comparison

Best Practices for Developers

Useful Resources

• Chromium Multi-Process Architecture
• Site Isolation Documentation
• Inside look at modern web browser

Related Articles

• How Browser Works When Requesting
• Critical Rendering Path
• Web Workers
• Service Workers