浏览器多进程架构

问题

现代浏览器采用多进程架构，主要包含哪些进程？各自负责什么？

解答

架构概览

┌─────────────────────────────────────────────────────────┐
│                    Browser Process                       │
│  (UI、地址栏、书签、前进后退、网络请求、文件访问)          │
└─────────────────────────────────────────────────────────┘
        │              │              │              │
        ▼              ▼              ▼              ▼
┌───────────┐  ┌───────────┐  ┌───────────┐  ┌───────────┐
│ Renderer  │  │ Renderer  │  │    GPU    │  │  Network  │
│ Process   │  │ Process   │  │  Process  │  │  Process  │
│  (Tab 1)  │  │  (Tab 2)  │  │           │  │           │
└───────────┘  └───────────┘  └───────────┘  └───────────┘

1. Browser Process（浏览器主进程）

负责浏览器的”外壳”功能：

// Browser Process 管理的内容
const browserProcess = {
  ui: '地址栏、书签栏、前进后退按钮',
  tabManagement: '创建、销毁渲染进程',
  storage: 'Cookie、LocalStorage、IndexedDB',
  permissions: '摄像头、麦克风、通知权限',
  download: '文件下载管理'
};

2. Renderer Process（渲染进程）

每个 Tab 通常对应一个独立的渲染进程：

// Renderer Process 的工作
const rendererProcess = {
  parsing: 'HTML/CSS 解析',
  javascript: 'V8 引擎执行 JS',
  layout: '布局计算',
  paint: '绘制',
  compositing: '合成图层'
};

// 进程隔离示例：一个 Tab 崩溃不影响其他 Tab
// Tab A: renderer-process-1 (崩溃)
// Tab B: renderer-process-2 (正常运行)
// Tab C: renderer-process-3 (正常运行)

站点隔离（Site Isolation）：

// 同一 Tab 内的跨站 iframe 也会使用独立进程
// 主页面: https://example.com -> renderer-process-1
// iframe: https://ads.com      -> renderer-process-2

3. GPU Process（GPU 进程）

处理所有 GPU 任务：

// GPU Process 负责的内容
const gpuProcess = {
  '3d': 'WebGL、CSS 3D 变换',
  '2d': 'Canvas 2D 硬件加速',
  video: '视频解码',
  compositing: '图层合成',
  ui: '浏览器 UI 绘制'
};

// 为什么独立成进程？
// 1. GPU 操作可能导致系统挂起，隔离后不影响浏览器
// 2. 安全沙箱隔离

4. Network Process（网络进程）

处理所有网络请求：

// Network Process 的职责
const networkProcess = {
  http: 'HTTP/HTTPS 请求',
  websocket: 'WebSocket 连接',
  cache: 'HTTP 缓存管理',
  dns: 'DNS 解析',
  ssl: 'SSL/TLS 握手'
};

// 独立进程的好处
// 1. 网络请求不阻塞 UI
// 2. 多个 Tab 共享网络连接
// 3. 统一的缓存管理

5. Plugin Process（插件进程）

运行浏览器插件（如 Flash，已废弃）：

// Plugin Process（历史遗留）
const pluginProcess = {
  flash: 'Adobe Flash（已废弃）',
  pdf: 'PDF 查看器',
  // 现代浏览器中，扩展运行在独立的 Extension Process
};

进程间通信（IPC）

// 进程间通过 IPC 通信
// 示例：用户输入 URL 到页面显示

// 1. Browser Process 接收用户输入
// 2. Browser Process 通知 Network Process 发起请求
// 3. Network Process 返回数据给 Browser Process
// 4. Browser Process 将数据发送给 Renderer Process
// 5. Renderer Process 解析渲染，通知 GPU Process 绘制
// 6. GPU Process 完成绘制，显示到屏幕

Chrome 任务管理器查看

打开 Chrome 任务管理器（Shift + Esc）可以看到所有进程：

进程类型          内存      CPU
─────────────────────────────
Browser           150 MB    2%
GPU Process       100 MB    5%
Network Service    30 MB    1%
Tab: Google        80 MB    3%
Tab: GitHub       120 MB    2%
Extension: xxx     20 MB    0%

关键点

• Browser Process：管理 UI、Tab、权限、存储，是主控进程
• Renderer Process：每个 Tab 独立进程，负责页面渲染和 JS 执行
• GPU Process：统一处理 GPU 任务，包括 WebGL、视频解码、图层合成
• Network Process：独立处理网络请求，多 Tab 共享
• 进程隔离：一个 Tab 崩溃不影响其他 Tab，提高稳定性和安全性