深入浏览器引擎 I：从多进程架构到渲染引擎
深入浏览器引擎 I：从多进程架构到渲染引擎
浏览器的多进程架构
浏览器本身是由多个进程共同组成的系统，浏览器的多进程架构分为以下几个主要部分：
- 渲染器进程：负责将网页内容绘制到屏幕上，这是前端开发者最常接触的部分。
- GPU进程：专注于图形渲染任务，提升动画和视觉效果的性能。
- 浏览器进程：作为总指挥，协调其他进程并管理用户界面。
- 插件：控制网站使用的所有插件，例如 Flash。
这种多进程设计的好处在于提高安全性与稳定性。即使某个进程崩溃，也不会影响整个浏览器的运行。例如，当你打开多个标签页时，每个标签页都有独立的渲染器进程，避免了因单一页面错误导致整个浏览器崩溃的问题。
不仅仅是标签页，标签页中可能会通过<iframe>嵌入文档，我们将标签页和Frame都统称为浏览上下文（Browsing Context）。每个浏览上下文至少有一个渲染器进程，但是在内存不足的情况下，为每个浏览上下文都创建一个渲染器进程是非常奢侈的，因此此时一个渲染器进程可以会负责多个浏览上下文，通过沙箱机制隔离来确保安全。
渲染引擎
Blink引擎
在前端开发领域，开发者与浏览器的交互主要集中在渲染进程上。以基于 Chromium 的浏览器为例，渲染进程扮演着至关重要的角色，而这一过程的核心组件则是 Blink 引擎。Blink 引擎的主要职责涵盖了诸多方面，包括但不限于：
- 请求资源：请求网络资源。
- 执行JS：其内部的V8引擎承担执行JS的任务。
- 实现Web平台规范：例如实现HTML解析器，将HTML转换成DOM。
- 实现渲染管线：其内部主线程、合成线程共同承担渲染管线中样式计算、布局、预绘制等工作。
从本质上讲，Blink是一款为Web平台提供服务的渲染引擎，它被广泛地应用于Chromium、Opera、WebView等项目中。Blink由一个主线程、多个工作线程以及一组内部线程组成。其中，主线程负责执行JavaScript代码、完成垃圾回收以及部分UI渲染任务。而工作线程则包括Service Worker、Worklet和Web Worker这三类线程。
Gecko
另一款主流的渲染引擎是 Mozilla 开发的 Gecko 渲染引擎，它被用于 Firefox 浏览器中。和 Blink 一样，它的主要职责也是执行 JS、请求网络资源、实现渲染等，但是在渲染方式上。Gecko 和 Blink 有着比较大的区别，具体可以查看[[深入浏览器引擎 III：Chromium分层合成 vs Firefox WebRender的GPU革命]]
主线程
主线程可以看作是整个系统的大脑，所有的关键决策都由它来完成。在浏览器中，主线程承担了许多重要任务，其中包括事件循环、脚本执行以及用户交互处理等。
以事件循环为例，主线程会不断检查是否有待处理的任务，并按顺序逐一执行。例如，当用户点击按钮时，主线程会接收到这个事件，然后调用相应的JavaScript函数来响应操作。然而，如果主线程被长时间占用（比如执行复杂的计算或阻塞的代码），就会导致页面卡顿甚至失去响应。
为了说明这一点，我们可以想象一辆公交车正在运送乘客。如果司机（主线程）因为某些原因停下来处理其他事情，车上的乘客（任务队列）就会被迫等待，从而影响整体效率。因此，在前端开发中，我们应该尽量减少主线程的负担，避免不必要的阻塞。
Blink与主线程的协作机制
Blink和主线程之间的协作就像一场接力赛，每一棒都需要精确配合才能保证效率。在实际场景中，Blink引擎负责处理网页内容的生成与更新，而主线程则负责管理和调度这些任务。
例如，当用户滚动页面时，Blink会计算新的可视区域并生成对应的布局信息，随后将这些数据传递给主线程进行进一步处理。主线程则根据优先级安排任务执行顺序，确保用户操作得到及时响应。为了避免阻塞，浏览器还引入了任务调度机制，允许低优先级任务在后台运行，同时让高优先级任务优先完成。
此外，还有一些常见的优化策略可以帮助改善两者之间的协作。例如：
- 使用Web Workers将耗时任务移出主线程；
- 利用requestAnimationFrame优化动画渲染；
- 避免频繁的DOM操作，减少重排与重绘开销。
通过这些方法，我们可以显著提升网页性能，为用户提供更加流畅的体验。