🧱 一、浏览器总体架构（多进程 + 多线程）
现代浏览器（如 Chrome、Edge、Safari）是多进程架构，其主要进程有：
| 进程名称 | 数量 | 主要作用 |
|---|---|---|
| 浏览器主进程 | 唯一 | 控制页面显示、地址栏、书签栏、创建其他进程，协调资源加载与生命周期等 |
| 渲染进程 | 每个标签页至少一个 | 渲染页面内容，执行 JS、布局、绘制等；被强沙箱保护 |
| 网络进程 | 一般一个 | 负责网络请求（HTTP/HTTPS、缓存、Cookie），和服务器交互 |
| GPU 进程 | 通常一个 | 专门处理图像、图层合成和 GPU 加速绘制等 |
| 插件进程 | 可选 | 用于处理浏览器插件，如 PDF 阅读器 |
| 辅助进程（Service Worker） | 可多个 | 用于后台运行的 JS 脚本，实现缓存、离线、推送等 |
🔁 二、模块间通信关系图
用户操作 → 浏览器主进程 → 网络进程 ←→ 服务器
↓
渲染进程（执行 JS / 渲染 DOM）
↓
GPU 进程（合成/绘制）
🔍 三、各进程详解
1️⃣ 浏览器主进程（Browser Process）
-
唯一存在
-
主要职责：
- 管理所有标签页的生命周期（创建、销毁）
- 处理地址栏、书签、历史记录等 UI
- 负责与操作系统交互
- 创建和管理其它进程（渲染进程、网络进程等）
- 进程间通信的“协调者”
2️⃣ 渲染进程（Renderer Process）
-
每个页面（或 iframe）通常对应一个渲染进程（Site Isolation 策略下甚至更细粒度）
-
运行在沙箱环境中（避免对系统造成威胁）
-
职责：
- 解析 HTML、构建 DOM 树
- 解析 CSS、构建 CSSOM
- 执行 JavaScript（由 V8 引擎完成）
- 构建渲染树 → 布局 → 绘制
- 与 GPU 进程协作完成图像渲染
渲染进程内线程模型：
| 线程名称 | 职责 |
|---|---|
| 主线程 | JS 执行、DOM 操作、布局计算、事件分发 |
| 样式线程 | 并行解析 CSS（非所有浏览器都有） |
| 合成线程 | 图层合成、处理滚动等 |
| 光栅线程 | 将绘制指令转成位图（raster） |
| Worker 线程 | Web Worker / Service Worker |
3️⃣ 网络进程（Network Process）
-
独立进程（Chrome M76 后从主进程中拆分出来）
-
职责：
- 负责网络请求（HTTP、WebSocket）
- 处理缓存、Cookie、HTTP 缓存、DNS 查询等
- 下载资源、处理分片下载
4️⃣ GPU 进程（GPU Process）
-
独立存在，仅用于加速合成与绘制
-
职责：
- 图层合成
- 执行 GPU 光栅化（硬件加速）
- 与渲染进程配合完成最终页面绘制
5️⃣ 插件进程（可选）
- 运行浏览器插件，如 Flash（已淘汰）、PDF 阅读器等
- 与主进程或渲染进程隔离，避免崩溃传播
6️⃣ 服务工作线程（Service Worker）
-
非常关键的离线缓存机制
-
在后台运行的 JS，能够：
- 拦截请求
- 缓存静态资源
- 支持离线模式和推送通知
🔐 四、沙箱机制（Sandbox）
渲染进程运行在沙箱环境中，有效防止网页执行恶意代码访问系统资源。
-
无法访问本地文件系统
-
无法调用操作系统 API
-
无法与其他进程通信（除非通过受控接口）
-
不具备高权限，无法执行破坏性操作
🧠 五、关键优化机制
| 技术机制 | 描述 |
|---|---|
| 多进程架构 | 提升稳定性（一个崩溃不影响其他标签页） |
| GPU 合成与加速绘制 | 利用 GPU 提高渲染性能 |
| Service Worker | 提供离线访问与缓存控制 |
| V8 引擎优化 | 高效执行 JavaScript |
| Brotli 压缩 | 降低传输大小，节省带宽 |
| HTTP/2、QUIC 支持 | 多路复用与低延迟传输 |
📦 六、数据流动总结（一个请求如何流转）
用户输入 URL →
浏览器主进程 → 网络进程发起请求 →
服务响应 →
主进程将响应转发给渲染进程 →
渲染进程解析内容 → DOM/CSSOM/RenderTree →
合成 → GPU 渲染 → 页面展示
📝 七、思维导图结构
浏览器架构
├── 主进程
│ ├── 创建管理其他进程
│ ├── 控制 UI
├── 网络进程
│ ├── 发起网络请求
│ ├── 处理缓存、Cookie
├── 渲染进程
│ ├── 构建 DOM/CSSOM
│ ├── 执行 JS
│ ├── 布局与绘制
├── GPU 进程
│ ├── 合成图层
│ ├── 光栅化
├── 插件进程
├── Service Worker
│ ├── 缓存控制
│ ├── 离线加载
🧠 八、浏览器架构中的线程分布图
浏览器架构
├── 浏览器主进程（UI 进程）
│ ├── UI线程
│ ├── IO线程
│ └── 浏览器事件处理线程
├── 渲染进程（每个页面一个）
│ ├── 主线程（JS 执行 / DOM 操作）
│ ├── 样式计算线程
│ ├── 合成线程
│ ├── 光栅线程（Raster）
│ └── Web Worker / Service Worker线程
├── 网络进程
│ ├── 网络线程
│ └── 缓存管理线程
├── GPU 进程
│ ├── GPU 执行线程
│ └── 合成线程（与渲染协同）
🔍 九、各进程下的线程详解
1️⃣ 浏览器主进程（Browser Process）
- UI线程
控制浏览器界面（地址栏、书签栏、前进后退按钮等） - IO线程
处理磁盘读写、下载、Cookie、本地存储等 - 事件处理线程
管理用户输入事件（如点击、键盘）分发给相应页面进程
2️⃣ 渲染进程（Renderer Process）
负责页面的核心渲染任务，是线程最复杂的部分。
| 线程名称 | 职责 |
|---|---|
| 主线程 | 执行 JavaScript（由 V8 引擎）、构建 DOM、触发布局和绘制流程 |
| 样式计算线程 | 并行计算样式（有些浏览器启用） |
| 合成线程 | 负责合成图层，处理滚动、动画等 |
| 光栅线程（Raster） | 将图层转为位图，可能用 GPU 加速 |
| Web Worker | 背景 JS 线程，做计算不阻塞主线程 |
| Service Worker | 拦截网络请求，离线缓存，与页面分离 |
📌 渲染进程是沙箱环境，不允许直接访问文件系统或网络。
3️⃣ 网络进程（Network Process）
处理所有网络资源的下载与缓存：
| 线程名称 | 职责 |
|---|---|
| 网络线程 | 发起、监听、管理 HTTP/HTTPS 请求响应 |
| 缓存线程 | 管理缓存文件、本地存储等资源 |
4️⃣ GPU 进程（GPU Process）
配合渲染进程将位图渲染到屏幕上：
| 线程名称 | 职责 |
|---|---|
| GPU 执行线程 | 调用 GPU 指令、合成图层 |
| 合成线程 | 与渲染进程协同，将图层组织成最终画面 |
