进程 线程

• 浏览器进程 (Browser Process)：负责浏览器的 TAB 的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作，比如网络请求和文件访问。
• 渲染进程 (Renderer Process)：负责一个 Tab 内的显示相关的工作，也称渲染引擎。
• 插件进程 (Plugin Process)：负责控制网页使用到的插件
• GPU 进程 (GPU Process)：负责处理整个应用程序的 GPU 任务

浏览器架构

• 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
• 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
• 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
• 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
• 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
• JavaScript 解释器。用于解析和执行 JavaScript 代码。
• 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

浏览器是个多进程结构，

1. 浏览器进程:控制除标签页外的用户界面，包括地址，书签，后退，前进按钮等，以及负责与浏览器其他进程负责协调工作 2.
2. 缓存进程
3. 网络进程 发起网络请求
4. 渲染器进程 渲染 Tab 有可能会为每个标签页是一个渲染进程
5. GPU 进程 渲染
6. 插件进程 内置插件

下面说下渲染进程的过程

1. 浏览器通过网络请求后获取 html 数据，通过 tcp 传给渲染器进程
2. DOM - 主线程将 html 解析构造 DOM 树
3. style - 样式计算
4. layoutTree - dom+style 根据 dom 树和样式生成 layoutTree
5. paint -绘制 通过遍历 Layout Tree 生成绘制顺序表
6. laryer - 布局 然后根据主进程将 layoutTree 和绘制信息表传给合成器线程
7. 合成器线程 - 将得到的信息分图层分成更小的图块
8. 栅格线程 - 将更小的图块进行栅格化 raster，返还给合成器线程 draw quads 图块信息 存储在 GPU 中
9. frame 合成器将栅格线程返回的图块合成帧交给浏览器进程
10. 浏览器进程 收到一帧的图像后传给 GPU 进行渲染

重排： 当改变 dom 的属性时，会重新进行样式计算，会重新布局和绘制 重绘： 当改变颜色时，只会发生样式计算和绘制(layer) requestAnimationFrame() 会将主线程的任务分散到每一帧的间隔，从而不影响动画的流程 Fiber react 利用浏览器的空闲时间做优化 Transform 会直接运行合成器线程，所以不会感染主线程的渲染 在移动端使用 3d 转换可以优化性能（如果设备有 3d 加速引擎 GPU 可以提高性能 , 2d 转换是无法调用 GPU，2G 是靠的 CPU）