浏览器多进程架构
浏览器的 Browser、Renderer、GPU、Network、Plugin 进程及其职责
问题
现代浏览器采用多进程架构，主要包含哪些进程？各自负责什么？
解答
架构概览
┌─────────────────────────────────────────────────────────┐
│ 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-23. 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，提高稳定性和安全性
目录