浏览器工作流程（简化）

以下内容全部参考与 图解浏览器的基本工作原理

一、CPU，进程与线程

CPU，好比工厂，内存大小好比电力
进程，好比车间，会占用电力用于工作
线程，好比工人

每个车间的容纳人数有限，怕挤爆了，于是有了Mutex（“互斥锁”）以及Semaphore（“信号量”）的防冲突的方法

然后提供了每个车间之间的通信方法叫 IPC（Inter Process Communication）

二、Chrome（谷歌）浏览器的工作流程：

谷歌浏览器软件好比一家影视公司，它主要有以下4个部门（进程）：

信息部门（浏览器进程），拍摄剪辑部门（渲染进程），对外合作部门（插件进程）以及发行部门（图形处理进程）

Browser Process（浏览器进程）
Renderer Process（渲染进程）
Plugin Process（插件进程）
GPU Process（图形处理进程）

1.Browser Process

信息部门（浏览器进程）有3个员工：
负责收集信息的UI线程，负责查找数据的网络线程，以及负责存储文件的存储线程

UI thread ： 控制浏览器上的按钮及输入框；
network thread: 处理网络请求，从网上获取数据；
storage thread（存储线程）: 控制文件等的访问；

1. 处理输入：
   UI thread 需要判断用户输入的是 URL 还是 query；

2. 开始导航：
   当用户点击回车键，UI thread 通知 network thread 获取网页内容，并控制 tab 上的 spinner 展现，表示正在加载中。
   network thread 会执行 DNS 查询，随后为请求建立 TLS 连接
   如果 network thread 接收到了重定向请求头如 301，network thread 会通知 UI thread 服务器要求重定向，之后，另外一个 URL 请求会被触发。

3. 读取响应：
   当请求响应返回的时候，network thread 会依据 Content-Type 及 MIME Type sniffing 判断响应内容的格式
   如果响应内容的格式是 HTML ，下一步将会把这些数据传递给 renderer process，如果是 zip 文件或者其它文件，会把相关数据传输给下载管理器。

4. 查找渲染进程：
   当上述所有检查完成，network thread 确信浏览器可以导航到请求网页，network thread 会通知 UI thread 数据已经准备好，UI thread 会查找到一个 renderer process 进行网页的渲染。
   （由于网络请求获取响应需要时间，这里其实还存在着一个加速方案。当 UI thread 发送 URL 请求给 network thread 时，浏览器其实已经知道了将要导航到那个站点。
   UI thread 会并行的预先查找和启动一个渲染进程，如果一切正常，当 network thread 接收到数据时，渲染进程已经准备就绪了，但是如果遇到重定向，准备好的渲染进程也许就不可用了，这时候就需要重启一个新的渲染进程。）

5. 确认导航：
   进过了上述过程，数据以及渲染进程都可用了， Browser Process 会给 renderer process 发送 IPC 消息来确认导航，一旦 Browser Process 收到 renderer process 的渲染确认消息，导航过程结束，页面加载过程开始。

6. 额外的步骤：
   一旦导航被确认，renderer process 会使用相关的资源渲染页面，下文中我们将重点介绍渲染流程。当 renderer process 渲染结束（渲染结束意味着该页面内的所有的页面，包括所有 iframe 都触发了 onload 时），会发送 IPC 信号到 Browser process， UI thread 会停止展示 tab 中的 spinner。
   当然上面的流程只是网页首帧渲染完成，在此之后，客户端依旧可下载额外的资源渲染出新的视图。

2.Renderer Process

拍摄剪辑部门（渲染进程）有4个员工：
负责导演的主线程，负责编剧的工作线程，负责剪辑合成的合成器线程，以及负责把视频分割成每一集的光栅线程

1.主线程 Main thread
2.工作线程 Worker thread
3.排版（合成）线程 Compositor thread
4.光栅线程 Raster thread

1.构建 DOM
2.加载次级的资源
3.JS 的下载与执行（可能会阻塞渲染，如果有问到页面白屏，就是因为这个）
4.样式计算
5.获取布局（生成布局树，布局树和 DOM 树类似，但是其中只包含页面可见的元素，如果一个元素设置了 display:none ，这个元素不会出现在布局树上，伪元素虽然在 DOM 树上不可见，但是在布局树上是可见的。）
6.绘制各元素（创建绘制记录）
7. 合成帧：主线程会遍历布局树来创建层树（layer tree），然后通知给合成器线程，合成器线程会栅格化每一层
8.创建合成帧，随后会通过 IPC 消息传递给浏览器进程，最后再发送给GPU 用以展示在屏幕上

浏览器对事件的处理？
事件发生时，浏览器进程会发送事件类型及相应的坐标给渲染进程，渲染进程随后找到事件对象并执行所有绑定在其上的相关事件处理函数。