浏览器开发随笔

浏览器多进程架构(Chrome)

+-----------------------------+
|         Browser Process     |
|-----------------------------|
| UI 线程、主控、导航、安全策略 |
+-----------------------------+
        |         |        |
        ↓         ↓        ↓
+---------+ +-----------+ +-----------+
|Renderer | | Renderer  | | Renderer  | ← 每个标签页(或网站)一个进程
+---------+ +-----------+ +-----------+
   |             |
   ↓             ↓
+---------+   +---------+
| V8引擎 |   | DOM/CSS |
+---------+   +---------+

+----------------+
| GPU Process    | ← 专门负责合成图层、硬件加速
+----------------+

+----------------+
| Network Service| ← 独立网络进程(下载、Cookie、缓存)
+----------------+

+----------------+
| Utility Process| ← PDF 渲染、音视频编解码等
+----------------+

1. Browser Process(主浏览器进程)

  • 控制整个浏览器的生命周期

  • 处理地址栏、标签页、书签等 UI

  • 管理所有 Renderer 进程

  • 实现进程间通信(IPC)

  • 安全控制、沙箱策略、权限验证

Chrome 的 Browser Process 位于 chrome/browser/,它不会渲染页面,只负责“调度”。

 

2. Renderer Process(渲染进程)

每个网站或标签页通常对应一个 Renderer。

负责:

  • 解析 HTML/CSS → 构建 DOM 树、Style 树

  • JS 执行(V8 引擎)

  • Layout → Paint → 合成图层

  • 与 GPU 通信提交图层

Renderer 进程是浏览器架构中最复杂、最关键的部分之一。

在 Chromium 中位于 content/renderer/,JS 引擎 V8 位于 v8/,DOM/CSS 渲染在 Blink 引擎中(third_party/blink/

 

3. GPU Process(图形进程)

  • 专门负责合成多个图层(Layer)

  • 执行 OpenGL / DirectX / Vulkan 指令

  • 加速 CSS transform、video、WebGL 渲染

减少主线程压力,提升页面平滑度和动画性能

4. Network Service(网络进程)

  • 独立进程处理网络请求(HTTP、WebSocket 等)

  • 管理 Cookie、缓存、代理等

  • 可重启/复用,提升安全性与稳定性

网络模块源码位于 net/services/network/

 

5. Utility Processes(通用服务进程)

  • 拆分出来的子服务,如:

    • PDF 渲染

    • 音视频编解码

    • 安全扫描

    • 插件(如 Pepper Flash)

便于崩溃隔离、防止单点故障。

 

多进程为浏览器提供了天然的“安全边界”:

  • Renderer 运行在沙箱内,无权限访问文件系统、摄像头等敏感资源

  • 所有敏感操作必须通过 Browser Process 进行中转授权

  • 防止跨站脚本攻击(XSS)、站点隔离(Site Isolation)

Chrome 的站点隔离策略:不同域名的内容,强制分配不同 Renderer 进程

由于功能分布在多个进程中,浏览器需要高效的 IPC 机制。

Chrome 使用 Mojo:

  • 高效、异步、跨平台的消息通信系统

  • .mojom 接口定义文件 → 自动生成通信代码

  • 支持多线程传递、共享内存、高安全性

IPC 在 Chromium 中广泛使用于进程管理、页面导航、JS 执行控制等。

Renderer 子线程架构

线程 作用
Main Thread DOM、JS 执行、Style/Layout
Compositor Thread 合成图层,异步滚动、动画
Raster Thread 将绘制命令转换为像素
GPU Thread 调用 OpenGL/Vulkan 显卡接口绘制图像

Firefox 的新架构叫 Project Fission,目标也是站点隔离和多进程:

  • 主进程(Parent Process)功能类似 Browser Process

  • 子进程使用 Content Process

  • 使用 Gecko 引擎(非 Blink)

  • JS 引擎为 SpiderMonkey(非 V8)

Firefox 的多进程支持起步晚一些,但理念趋同于 Chrome。

Renderer 进程是浏览器中最核心、最复杂的模块,主要负责将 HTML/CSS/JS 代码转换为用户可见的页面内容。这个过程通常被称为:

从 HTML 到像素(From HTML to Pixels)

 总流程如下:

HTML → DOM 树 → Style 计算 → Render Tree 
→ Layout → Paint → Composite → GPU → 屏幕

1. 解析 HTML,构建 DOM 树

  • 浏览器通过 HTML 解析器(HTML Parser)将文本流逐行解析为一个树状结构:DOM(Document Object Model)。

  • 遇到

你可能感兴趣的:(chrome)