深入了解现代网络浏览器（第 1 部分）

白瓷梅子汤
371 阅读6分钟

「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」

CPU 、GPU 、内存和多进程架构

计算机的核心是 CPU 和 GPU

中央处理器

首先是中央处理单元或CPU。CPU 可以被认为是计算机的大脑。一个 CPU 内核，可以看成一个办公室工作人员，可以在他们进来时一个一个地处理许多不同的任务。比如说清扫垃圾，回复客户的电话，开会等等一些事情。过去，大多数 CPU 都是单芯片。内核就像另一个 CPU 生活在同一个芯片中。在现代硬件中，通常会有多个内核，从而让手机和笔记本电脑拥有更多计算能力。

image.png

图形处理器

图形处理单元或GPU是计算机的另一部分。与 CPU 不同，GPU 擅长处理简单的任务，但可以同时跨多个内核。顾名思义，它最初是为处理图形而开发的。这就是为什么在图形中“使用 GPU”或“GPU 支持”与快速渲染和流畅交互相关联。近年来，随着 GPU 加速计算的发展，越来越多的计算在 GPU 上成为可能。

image.png

当计算机或手机上启动应用程序时，CPU 和 GPU 是应用程序的动力。应用程序使用操作系统提供的机制在 CPU 和 GPU 上运行。

在进程和线程上执行程序

在深入研究浏览器架构之前要掌握的另一个概念是进程和线程。进程可以描述为应用程序的执行程序。线程是存在于进程内部并执行其进程程序的任何部分的线程。

image.png

当启动应用程序时，会创建一个进程。该程序可能会创建线程来帮助它工作。操作系统为进程提供了一块可使用的内存“平板”，所有应用程序状态都保存在该私有内存空间中。当关闭应用程序时，该进程也会消失，并且操作系统会释放内存。

一个进程可以要求操作系统启动另一个进程来运行不同的任务。发生这种情况时，会为新进程分配不同的内存部分。如果两个进程需要通信，它们可以通过使用进程间通信 (  IPC )来实现。许多应用程序都是以这种方式工作的，因此如果一个工作进程没有响应，它可以在不停止运行应用程序不同部分的其他进程的情况下重新启动。

通过 chrome://tracing 记录在一个⻚面渲染过程中，各个线程之间的通信：

image.png

CRFRenderMain 表示的是渲染主线程，主要进行一些计算的操作。Compositior 表示合成器线程，主要进行合成操作。Compositior Tile Workder 表示栅格化线程，现代浏览器往往有 2-4 个栅格化线程，浏览器会根据资源情况合理分配栅格化线程资源。

图与内容引用自：从chromium源码来窥探浏览器的渲染

浏览器架构

如何使用进程和线程构建 Web 浏览器呢？它可能是一个具有许多不同线程的进程，也可能是许多不同的进程，其中有几个线程通过 IPC 进行通信。

image.png

image.png

对于渲染器进程，Chrome 为每个选项卡提供了一个进程。

每个 Chrome 进程及其控制的内容：

  • 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。

  • 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。

  • GPU 进程。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。

  • 网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。

  • 插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

image.png

查看 Chrome 中正在运行的进程数量

image.png

image.png

Chrome 中多进程架构的好处

Chrome 使用多个渲染器进程。在最简单的情况下，可以想象每个选项卡都有自己的渲染器进程。假设打开了 3 个选项卡，每个选项卡都由一个独立的渲染器进程运行。如果一个选项卡变得无响应，那么可以关闭无响应的选项卡，同时保持其他选项卡处于活动状态。如果所有选项卡都在一个进程上运行，则当一个选项卡无响应时，所有选项卡均无响应。

image.png

将浏览器的工作分成多个进程的另一个好处是安全性和沙盒。由于操作系统提供了一种限制进程权限的方法，因此浏览器可以对某些进程的某些功能进行沙箱处理。

进程有自己的私有内存空间，它们通常包含通用基础设施的副本（例如 V8，它是 Chrome 的 JavaScript 引擎）。这意味着更多的内存使用，因为它们不能像在同一进程中的线程那样共享。为了节省内存，Chrome 限制了它可以启动的进程数。限制取决于设备有多少内存和 CPU 能力，但是当 Chrome 达到限制时，它会开始在一个进程中运行来自同一站点的多个选项卡。

节省更多内存 - Chrome 中的服务化

Chrome 正在经历架构更改，将浏览器程序的每个部分作为服务运行，从而轻松拆分为不同的进程或聚合为一个。

一般的想法是，当 Chrome 在强大的硬件上运行时，它可能会将每个服务拆分为不同的进程以提供更高的稳定性，但如果它在资源受限的设备上，Chrome 会将服务整合到一个进程中以节省内存占用。

每帧渲染器进程 - 站点隔离

站点隔离是 Chrome 中最近引入的一项功能，它为每个跨站点 iframe 运行单独的渲染器进程。每个选项卡是一个渲染器进程，它允许跨站点 iframe 在单个渲染器进程中运行，并在不同站点之间共享内存空间。

image.png

同源策略是网络的核心安全模型；它确保一个站点在未经同意的情况下无法访问其他站点的数据。绕过此策略是安全攻击的主要目标。进程隔离是分隔站点的最有效方法。自 Chrome 67 起，默认情况下在桌面上启用站点隔离，标签中的每个跨站点 iframe 都会获得一个单独的渲染器进程。

avatar
文章
阅读
粉丝