浏览器架构
架构演进
- 单进程架构：所有的模块运行在同一个进程里，包含网络、插件、Javascript运行环境等。
- 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程。
- 面向服务架构：将原来的UI、数据库、文件、设备、设备等，作为一个独立的基础服务。
架构对比
| 架构类型 | 扩展性 | 安全性 | 确定性 | 流畅性 |
|---|
| 单进程 | 低 | 低 | 低 | 卡顿 |
| 多进程 | 中 | 高 | 高 | 流畅 |
| 面向服务架构 | 高 | 高 | 高 | 流畅 |
多进程分工
| 进程名称 | 进程描述 |
|---|
| 浏览器（主进程） | 主要负责页面展示逻辑，用户交互，子进程管理；包括地址栏，书签，前进，后退，收藏夹等 |
| GPU进程 | 负责UI绘制，包含整个浏览器全部UI |
| 网络进程 | 网络服务进程，负责网络资源加载 |
| 标签页（渲染进程） | 控制tab内的所有内容，将HTML,CSS和Javascript转换为用户可交互的页面 |
| 操作进程 | 控制网站运行的插件，比如flash,ModHeader |
| 其他进程 | 适用程序Storage/Network/Audio Service等 |
渲染进程
多线程架构
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
多线程工作流畅
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互，定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环，将队列里任务取出交给JS引擎执行
Chrome运行原理
graph TD
输入处理 --> 开始导航 --> 读取响应 --> 寻找渲染进程
渲染进程
资源加载
- 收到主进程的消息后，开始加载HTML文档
- 加载子资源
构建渲染树
- 构建DOM树，将HTML文本转换为浏览器能够理解的结构
- 构建CSSOM树，浏览器同样不认识CSS，需要将CSS代码转化为可理解的CSSOM
- 构建渲染树，渲染树是DOM树和CSSOM树的结合
页面布局
页面绘制
