浏览器的进程与线程

进程：cpu 资源分配的最小单位，每个进程有自己的内存空间，进程之间相互独立
线程：cpu 调度的最小单位，一个进程包括多个线程，线程共享所属进程的内存空间，线程之间协作完成任务

浏览器的进程与线程.png

GUI 线程和 JS 引擎线程互斥
事件处理线程、计时器线程、Ajax 请求线程、worker 线程一开始并不存在，是由于 JS 引擎线程中的某些操作，而由 Render 进程动态创建出的线程，这些线程可以帮助 JS 引擎线程来完成一些工作

1. 浏览器输入 url
2. Browser 进程开一个下载线程，请求资源，将资源交给 Render 进程
3. Render 命令 GUI 渲染页面
4. 需要 3D 渲染，则 GUI 向 Render 报告，Render 告诉 Browser，Browser 请来 GPU 来帮助渲染
5. 需要加载其他资源，则 GUI 向 Render 报告，Render 告诉 Browser，Browser 开一个下载线程请求资源，然后将资源返回给 Render
6. 遇到 JS 脚本，GUI 挂起，JS 引擎开始工作，解析并运行脚本

GUI 渲染页面:

1. html -> dom 树
   css -> css 树
2. dom 树 + css 树 -> render 树
3. layout/reflow render 树，负责各元素尺寸、位置的计算
4. paint/repaint render 树，绘制页面像素信息
5. GUI 渲染完了告诉 Render，Render 告诉 Browser，Browser 将各层信息交给 GPU，GPU 会将各层合成（composite），显示在屏幕上

GUI 线程一边渲染，css 下载线程一边下载，它们同时进行。 GUI 线程是 Render 进程的，css 下载线程是 Browser 进程的。

总结：

浏览器的每个选项卡是一个 Render 进程
Render 进程包括 GUI 线程和 JS 线程
GUI 线程和 JS 线程互斥，一个工作另一个停止
JS 线程可以开启其他帮助线程，例如定时器线程、Ajax 线程等
JS 线程和帮助线程可以并行运行
所有 JS 代码运行在单个 JS 线程，通过事件循环和消息队列来执行异步代码