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.

Browser Process Main process

Renderer Process 1 Tab 1

Renderer Process 2 Tab 2

Renderer Process N Tab N

GPU Process Graphics

Network Process Network

Storage Process Storage

Plugin Process Plugins

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

javascript

// 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

javascript

// 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

css

/* 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

Browser	Architecture	Site Isolation	Renderer Processes
Chrome	Multi-process	Full	One per site
Firefox	Multi-process (e10s)	Partial	Up to 8 processes
Safari	Multi-process	Partial	One per tab
Edge	Multi-process (Chromium)	Full	One per site

Best Practices for Developers

Minimize Main Thread Load

Use Web Workers for heavy computations. Main Thread should be free for rendering.

Use Compositor Thread

Animations via transform and opacity run on Compositor Thread without blocking Main Thread.

Optimize Memory

Each tab is a separate process. Memory leaks scale linearly with tab count.

Consider Site Isolation

Cross-origin iframe = separate process. Minimize iframes from different origins. Summary:

Multi-process architecture of modern browsers provides:

Security through Site Isolation
Stability through process isolation
Performance through parallelism

Understanding this architecture helps write more performant and secure code, properly use Web Workers, optimize animations through GPU, and avoid blocking the Main Thread.

Useful Resources

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems