浏览器模型

一、浏览器的多进程模型

浏览器，是一种多进程的架构设计，在浏览器中打开一个网页相当于新起了一个进程，当然，浏览器也有它自己的优化机制，比方说有五个空白页，这五个空白页会合并成同一个进程。

主要包含一下四种进程：

1.Browser进程（主进程）

浏览器的主进程（负责协调、主控），只有一个。

该进程是浏览器的核心进程，它控制浏览器的主窗口和各个子进程的创建和销毁。同时，它负责管理用户界面、存储缓存和历史记录等功能。是运行浏览器的主进程。负责管理所有其他进程，并协调他们之间的交互和通信。浏览器窗口和标签页的创建和关闭也由此进程执行。

负责管理各个标签页的创建和销毁。
负责浏览器的页面显示和功能（控制chrome的地址栏，书签栏，返回和前进按钮）。
负责资源的管理与下载，例如网络请求和文件访问

2.第三方插件进程

负责每个第三方插件的使用，每个第三方插件使用时候都会创建一个对应的进程，该进程主要负责运行浏览器中的插件, 在使用插件，如Adobe Flash、Java等，浏览器需要独立的插件进程来运行插件。这保证了插件崩溃或者运行时出现问题时不会影响到主要的浏览器进程或其他标签页。

3.GPU进程

仅此一个，该进程主要负责处理网页中的图像和视频，它是使用浏览器的硬件加速技术实现的。GPU进程主要负责处理和管理GPU相关的操作和资源，同时确保GPU的安全和稳定性, 负责3D作图和使用GPU加速的网页效果的运行。现代浏览器因为许多3D、CSS3等等视觉效果的运用，需要使用强大的图像和GPU加速技术，因此需要单独的进程来处理这些任务。

4.浏览器渲染进程（浏览器内核）

浏览器内核，该进程主要负责网页的呈现和交互功能，每个标签页都有一个独立的渲染进程来负责其呈现。这种方式可以增强浏览器的稳定性，防止一个网页的崩溃引起整个浏览器的崩溃。当用户打开一个新的标签页或者输入一个URL时，浏览器会分配一个新的渲染进程来处理该页面的显示。

5.多进程的优势

避免单个页面崩溃造成整个浏览器的卡顿（由于每一个 Tab页都是独立的进程）
避免第三方插件崩溃影响整个浏览器（由于第三方插件是独立的进程）
多进程充分利用多核优势（现在的 CPU 性能都很高）

二、浏览器内核（渲染进程）

浏览器的Renderer进程（渲染进程），页面的渲染，js的执行，事件的循环都在这一进程内进行，该进程下面拥有着多个线程，靠着这些现成共同完成渲染任务。主要由以下五种线程组成：

1.GUI渲染线程

负责渲染浏览器界面（解析 HTML ，CSS，构建 DOM树 CSSOM树和 Render树，布局和绘制等）。

GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行，当界面需要重绘或由于某种操作引发的重排时，该线程就会执行。
GUI 渲染线程与 JS 引擎线程是互斥的，这也是造成 JS堵塞的原因所在。
- 由于 JavaScript 是可操纵 DOM 的，如果在修改这些元素属性同时渲染界面（即 JS 引擎线程和 GUI 渲染线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。
- 因此为了防止渲染出现不可预期的结果，浏览器设置 GUI 渲染线程与 JavaScript 引擎为互斥的关系，当 JavaScript 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到引擎线程空闲时立即被执行。

2.JS引擎线程

也称为 JS 内核，负责处理 JavaScript 脚本程序。

JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页中无论什么时候都只有一个JS线程在运行JS程序

再次注意，GUI 渲染线程与 JS 引擎线程是互斥的，所以，如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3.事件触发线程

负责处理JavaScript代码中的事件，如鼠标点击、滚轮滑动等。当事件被触发时，会将事件添加到队列中，等待事件循环线程来处理。

首先这属于浏览器而不是JS引擎，主要用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）

当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中。

当对应的事件符合触发条件被触发时，该线程会把是事件添加到待处理队列（宏任务）的队尾，等待JS引擎的处理。

同样地，由于 JS 是单线程的，所以需要等到 JS 引擎空闲了之后，才会对待处理队列进行处理。

4.定时触发器线程

负责处理JavaScript中的定时器，定时器能使JavaScript代码在指定的时间间隔内执行。传说中的 setInterval 与 setTimeout 所在线程。

因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确。

因此通过单独线程来计时并触发定时，计时完毕后，添加到事件队列（宏任务）中，等待JS引擎空闲后执行。

5.异步http请求线程

负责处理JavaScript代码中的异步HTTP请求，以避免阻塞JavaScript引擎线程的执行。

XMLHttpRequest 在连接后是通过浏览器新开的一个线程请求。

当检测到状态更新时，如果没有设置回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列（微任务）中，等待 JS 引擎执行。

alt text

三、浏览器进程和渲染进程的通信

看到这里，首先，应该对浏览器内的进程和线程都有一定理解了，那么接下来，再谈谈浏览器的Browser进程（控制进程）是如何和内核通信的，这点也理解后，就可以将这部分的知识串联起来，从头到尾有一个完整的概念。如果自己打开任务管理器，然后打开一个浏览器，就可以看到：任务管理器中出现了两个进程（一个是主控进程，一个则是打开Tab页的渲染进程）

然后在这前提下，看下整个的过程：(简化了很多)

1.Browser进程收到用户请求，首先需要获取页面内容（譬如通过网络下载资源），随后将该任务通过RendererHost接口传递给Render进程
2.Renderer进程的Renderer接口收到消息，简单解释后，交给渲染线程，然后开始渲染
- 渲染线程接收请求，加载网页并渲染网页，这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染
- 当然可能会有JS线程操作DOM（这样可能会造成回流并重绘）
- 最后Render进程将结果传递给Browser进程
3.Browser进程接收到结果并将结果绘制出来

这里绘一张简单的图：（很简化）