Loading...
Loading...
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.
In early browser versions (e.g., Internet Explorer 6), everything ran in one process:
Problems:
Modern browsers (Chrome, Edge, Firefox, Safari) use multi-process architecture, where each type of task runs in a separate process.
Main process — coordinates all other processes.
Responsibilities:
Key process for displaying web pages. Chrome creates one process per site (Site Isolation).
Responsibilities:
Single process for all tabs, responsible for GPU interaction.
Responsibilities:
Isolated process for network operations (Chrome 69+).
Responsibilities:
Data management for sites (Chrome 102+).
Responsibilities:
Site Isolation is Chrome's architectural decision where each site gets its own Renderer Process.
Site Isolation protects against CPU-level attacks (Spectre, Meltdown).
Cost of Site Isolation:
Pros:
Cons:
// Bad: memory leak in global scope
let heavyData = [];
function leak() {
heavyData.push(new Array(1000000));
}
// Good: cleanup on close
window.addEventListener('beforeunload', () => {
heavyData = null;
});
// 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' });
/* 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 | 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 |
Use Web Workers for heavy computations. Main Thread should be free for rendering.
Animations via transform and opacity run on Compositor Thread without blocking Main Thread.
Each tab is a separate process. Memory leaks scale linearly with tab count.
Cross-origin iframe = separate process. Minimize iframes from different origins.
Summary:
Multi-process architecture of modern browsers provides:
Understanding this architecture helps write more performant and secure code, properly use Web Workers, optimize animations through GPU, and avoid blocking the Main Thread.