术语
进程： cpu 资源分配的最小单元
线程：
cpu 调度的最小单元
浏览器进程
- 浏览器进程
- 浏览器界面显示，用户交互
- tab 页管理，页面的创建与销毁
- 网络资源管理，下载
- 插件进程（第三方插件）
- GPU 进程
- 渲染进程（又称浏览器内核，每个 tab 页面都有独立的渲染进程）
- 页面渲染
- 脚本执行
- 事件处理
多进程优势
保障浏览器的稳定性。
- tab 页崩溃，不会影响其他页面
- 插件崩溃，不会影响其他页面
多进程劣势
创建进程，由于需要分配新的内存，因此，性能开销比创建线程大。
渲染进程-多线程
- GUI 渲染线程
- JS 引擎线程
- 事件触发线程
- 定时器触发线程
- 异步 http 请求线程
浏览器工作
当我们访问一个页面时，大致分为下面几个阶段
- 地址导航
- 响应
- 解析
- 渲染
- 交互
地址导航
这个阶段主要是客户端与服务端建立链接。涉及：
- DNS 解析
- TCP 握手
- TLS 协商
响应
响应阶段主要涉及
- TCP 慢启动 14KB
- TCP 拥塞控制
解析
当浏览器收到第一个数据包14KB 的html时，开始解析文件。
- 构建DOM
- 预加载扫描器
- 构建CSSOM
- 编译执行Javascript
渲染
- Style：DOM+CSSOM => RenderTree;
- Layout: RenderTree 只有样式，没有具体的位置已经尺寸，在这个阶段，通过从根节点 (body) 开始，计算其后代元素的计算样式;
- Paint: RenderTree 布局完成后，需要将其绘制到屏幕上，浏览器会按层绘制各个元素盒子，类似于PS里面的图层。但是由于层太多，为了节约内存，因此会有层合并，子元素默认继承父元素的 RenderLayer。RenderLayer 在提交给绘制前，会以为 GraphLayer 图层的方式提交给 GPU。而在这个阶段，可以将某些元素单独的提取出来，成为一个新的独立的 GraphLayer，这样当这些元素发生变化时，就不会影响其他的元素。可以通过
will-change等操作完成，即我们常说的硬件加速。 - Compositing：
浏览器中某些元素会自带独立的 GraphLayer， 比如
<video>、<canvas>元素，亦或者使用了will-change的元素。因此，一个页面提交给 GPU 的是多个图层，而这些图层会有重叠的部分。因此在 GPU 的最后一步就是将这个图层合并到一起，最终成为一张图片，并展示到浏览器窗口上。
交互
当页面渲染完成后，此时我们此时我们还有一部分 js 还没有执行结束。比如 onload 事件。因此后面还要等待我么剩余的代码执行完成，页面才能提供完整的交互功能。
