高层结构 ​

浏览器的高层结构

• 用户界面(User Interface)：除主窗口展示文档之外的部分，如 地址栏、书签菜单、前进后退刷新按钮等
• 浏览器引擎(Browser Engine)：在用户界面与渲染引擎之间传送指令
• 渲染引擎(Rendering Engine)：负责显示请求的内容
• 网络(Networking)：用于网络调用
• 用户界面后端(UI Backend)：用于绘制基本的窗口小部件
• js 解释器(JS Interpreter)：用于解析和执行 JS 代码
• 数据存储(Data Storage)：数据持久层。如 Storage、IndexedDB、Cookie

注：Chrome 中对于每一个标签页都创建一个新的渲染引擎示例

graph TD
  A[User Interface]
  B[Browser Engine]
  C[Rendering Engine]
  D[Networking]
  E[JS Interpreter]
  F[UI Backend]
  G[Data Persistence]

  A --> B
  A --> F
  B --> C
  B --> G
  C --> D
  C --> E
  C --> F

工作进程 ​

• Browser 进程：浏览器主进程，负责界面展示、各页面管理、各进程管理
• Render 进程：页面渲染进程
• GPU 进程：最多 1 个，当 GPU 硬件加速打开时创建
• 工具进程
• 插件进程

渲染进程 ​

渲染进程有四个线程组成

• 主线程：负责构建 DOM、网络通信、资源解析、JS 执行、样式布局
• 工作线程：包括 Web Worker 与 Service Worker，无法访问 DOM
  • Web Worker：负责分担主线程的计算压力
  • Service Worker：充当代理服务器，旨在提高离线访问体验
• 光栅线程
• 排版线程

参考资料 ​

浏览器的工作原理