漫话随笔

Appearance

架构 ​

浏览器核心组件 ​

现代浏览器是复杂的软件系统，通常由以下几个核心组件构成：

  1. 用户界面（User Interface）

    • 包括地址栏、前进/后退按钮、书签菜单等
    • 除了网页窗口显示区域外的所有部分
    • 负责与用户直接交互的界面元素

  2. 浏览器引擎（Browser Engine）

    • 在用户界面和渲染引擎之间传送指令
    • 协调UI和渲染进程之间的活动
    • 处理高级操作，如前进/后退/刷新

  3. 渲染引擎（Rendering Engine）

    • 负责显示请求的内容
    • 解析HTML和CSS
    • 布局和绘制网页内容
    • 不同浏览器使用不同的渲染引擎

  4. 网络（Networking）

    • 处理网络调用和请求
    • 实现各种网络协议（HTTP/HTTPS/FTP等）
    • 管理连接池和缓存

  5. JavaScript引擎（JavaScript Engine）

    • 解析和执行JavaScript代码
    • 包含解释器、编译器和优化器
    • 管理内存分配和垃圾回收

  6. UI后端（UI Backend）

    • 绘制基本的窗口小部件，如组合框和窗口
    • 使用操作系统的用户界面方法
    • 提供平台无关的接口

  7. 数据存储（Data Storage）

    • 持久层，保存各种数据
    • 管理Cookie、LocalStorage、IndexedDB等
    • 提供文件系统访问

主流浏览器内核 ​

浏览器渲染引擎JavaScript引擎备注
ChromeBlinkV82013年从WebKit分支
FirefoxGeckoSpiderMonkey最早的JavaScript引擎
SafariWebKitJavaScriptCoreApple开发的WebKit
EdgeBlinkV82019年后采用Chromium内核
OperaBlinkV82013年后采用Chromium内核
IETridentChakra已停止维护

浏览器多进程架构 ​

现代浏览器采用多进程架构以提高稳定性、安全性和性能。以Chrome为例：

主要进程类型 ​

  1. 浏览器进程（Browser Process）

    • 控制浏览器的主用户界面
    • 管理标签页和插件
    • 处理用户权限（如下载请求）
    • 协调其他进程

  2. 渲染进程（Renderer Process）

    • 每个标签页通常都有自己的渲染进程
    • 负责标签页内网页的渲染
    • 运行JavaScript和处理DOM
    • 在沙箱环境中运行，提高安全性

  3. 插件进程（Plugin Process）

    • 运行浏览器插件（如Flash）
    • 隔离插件代码，防止影响浏览器稳定性

  4. GPU进程（GPU Process）

    • 处理GPU任务，加速渲染
    • 跨标签页共享

  5. 网络进程（Network Process）

    • 处理网络请求
    • 实现网络栈
    • 管理HTTP缓存

  6. 存储进程（Storage Process）（较新版本）

    • 管理浏览器的数据存储
    • 处理文件系统访问

多进程架构的优势 ​

  1. 稳定性提升

    • 一个标签页崩溃不会影响整个浏览器
    • 进程隔离避免资源冲突

  2. 安全性增强

    • 沙箱限制渲染进程的系统访问权限
    • 进程间通信受到控制

  3. 性能优化

    • 多核CPU上可并行处理
    • 内存占用虽然增加，但可实现更精细的资源管理

进程间通信（IPC） ​

浏览器进程之间通过IPC（进程间通信）机制进行交互：

  • 使用消息传递模式
  • 通过共享内存传输大块数据
  • 实现通信频道进行请求/响应模式

现代浏览器架构发展趋势 ​

  1. 服务化（Service-oriented Architecture）

    • Chrome正在将浏览器功能拆分为独立服务
    • 每个服务可以在不同进程中运行
    • 允许更灵活的资源分配

  2. 站点隔离（Site Isolation）

    • 不同站点在不同渲染进程中运行
    • 更严格的跨源边界
    • 缓解类似Spectre的侧信道攻击

  3. 进程模型优化

    • 在低内存设备上合并进程
    • 在高性能设备上使用更多进程
    • 动态调整进程分配

  4. WebAssembly沙箱

    • 更细粒度的代码隔离
    • 提高性能的同时保持安全性

不同浏览器架构比较 ​

Chrome (Chromium) ​

  • 最复杂的多进程架构
  • 高度模块化，进程隔离最彻底
  • 内存占用较高

Firefox ​

  • 多进程模型（称为Electrolysis或e10s）
  • 内容进程比Chrome少，更节省内存
  • 使用Fission项目实现站点隔离

Safari ​

  • 分离的UI进程和Web内容进程
  • 强调能效和电池寿命
  • 较少的进程数量，但隔离度较低

Edge (Chromium-based) ​

  • 继承Chrome的多进程架构
  • 微软增加了一些特有的安全功能
  • 增强了企业部署和管理功能