[译] 现代浏览器内部揭秘（第一部分）

• 原文地址：Inside look at modern web browser (part 1)
• 原文做者：Mariko Kosaka
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Colafornia
• 校对者：CoderMing sakila1012

CPU、GPU、内存和多进程体系结构

这一博客系列由四部分组成，将从高级体系结构到渲染流程的细节来窥探 Chrome 浏览器的内部。若是你曾对浏览器是如何将代码转化为具备功能的网站，或者你并不肯定为什么建议使用某一技术来提高性能，那么本系列就是为你准备的。

本文做为此系列的第一部分，将介绍核心计算术语与 Chrome 的多进程体系架构。

提示： 若是你已熟悉 CPU/GPU，进程/线程的相关概念，能够直接跳到浏览器架构部分开始阅读。

计算机的核心是 CPU 与 GPU

为了了解浏览器运行的环境，咱们须要了解几个计算机部件以及它们的做用。

CPU

图 1：4 个 CPU 核心做为办公人员，坐在办公桌前处理各自的工做

第一个须要了解的计算机部件是 中央处理器（Central Processing Unit），或简称为 CPU。CPU 能够看做是计算机的大脑。一个 CPU 核心如图中的办公人员，能够逐一解决不少不一样任务。它能够在解决从数学到艺术一切任务的同时还知道如何响应客户要求。过去 CPU 大可能是单芯片的，一个核心就像存在于同芯片的另外一个 CPU。随着现代硬件发展，你常常会有不止一个内核，为你的手机和笔记本电脑提供更多的计算能力。

GPU

图 2：许多带特定扳手的 GPU 内核意味着它们只能处理有限任务

图形处理器（Graphics Processing Unit，简称为 GPU）是计算机的另外一部件。与 CPU 不一样，GPU 擅长同时处理跨内核的简单任务。顾名思义，它最初是为解决图形而开发的。这就是为何在图形环境中“使用 GPU” 或 “GPU 支持”都与快速渲染和顺滑交互有关。近年来随着 GPU 加速计算的普及，仅靠 GPU 一己之力也使得愈来愈多的计算成为可能。

当你在电脑或手机上启动应用时，是 CPU 和 GPU 为应用供能。一般状况下应用是经过操做系统提供的机制在 CPU 和 GPU 上运行。

图 3：三层计算机体系结构。底部是机器硬件，中间是操做系统，顶部是应用程序。

在进程和线程上执行程序

图四：进程做为边界框，线程做为抽象鱼在进程中游动

在深刻学习浏览器架构以前须要了解的另外一个理论是进程与线程。进程能够被描述为是一个应用的执行程序。线程存在于进程并执行程序任意部分。

启动应用时会建立一个进程。程序也许会建立一个或多个线程来帮助它工做，这是可选的。操做系统为进程提供了一个可使用的“一块”内存，全部应用程序状态都保存在该私有内存空间中。关闭应用程序时，相应的进程也会消失，操做系统会释放内存。

图 5 ：进程使用内存空间和存储应用数据的示意图

进程能够请求操做系统启动另外一个进程来执行不一样的任务。此时，内存中的不一样部分会分给新进程。若是两个进程须要对话，他们能够经过进程间通讯（IPC）来进行。许多应用都是这样设计的，因此若是一个工做进程失去响应，该进程就能够在不中止应用程序不一样部分的其余进程运行的状况下从新启动。

图 6：独立进程经过 IPC 通讯示意图

浏览器架构

那么如何经过进程和线程构建 web 浏览器呢？它可能由一个拥有不少线程的进程，或是一些经过 IPC 通讯的不一样线程的进程。

图 7：不一样浏览器架构的进程/线程示意图

这里须要注意的重要一点是，这些不一样的架构是实现细节。关于如何构建 web 浏览器并不存在标准规范。一个浏览器的构建方法可能与另外一个迥然不一样。

在本博客系列中，咱们使用下图所示的 Chrome 近期架构进行阐述。

顶部是浏览器线程，它与处理应用其它模块任务的进程进行协调。对于渲染进程来讲，建立了多个渲染进程并分配给了每一个标签页。直到最近，Chrome 在可能的状况下给每一个标签页分配一个进程。而如今它试图给每一个站点分配一个进程，包括 iframe（参见站点隔离）。

图 8：Chrome 的多进程架构示意图。渲染进程下显示了多个层，代表 Chrome 为每一个标签页运行多个渲染进程。

进程各自控制什么？

下表展现每一个 Chrome 进程与各自控制的内容：

进程	控制
浏览器	控制应用中的 “Chrome” 部分，包括地址栏，书签，回退与前进按钮。以及处理 web 浏览器不可见的特权部分，如网络请求与文件访问。
渲染	控制标签页内网站展现。
插件	控制站点使用的任意插件，如 Flash。
GPU	处理独立于其它进程的 GPU 任务。GPU 被分红不一样进程，由于 GPU 处理来自多个不一样应用的请求并绘制在相同表面。

图 9：不一样进程指向浏览器 UI 的不一样部分

还有更多进程如扩展进程与应用进程。若是你想要了解有多少进程运行在你的 Chrome 浏览器中，能够点击右上角的选项菜单图标，选择更多工具，而后选择任务管理器。而后会打开一个窗口，其中列出了当前正在运行的进程以及它们当前的 CPU/内存使用量。

Chrome 多进程架构的优势

前文中提到了 Chrome 使用多个渲染进程。最简单的状况下，你能够想象每一个标签页都有本身的渲染进程。假设你打开了三个标签页，每一个标签页都拥有本身独立的渲染进程。若是某个标签页失去响应，你能够关掉这个标签页，此时其它标签页依然运行着，能够正常使用。若是全部标签页都运行在同一进程上，那么当某个失去响应，全部标签页都会失去响应。这样的体验很糟糕。

图 10：如图所示每一个标签页上运行的渲染进程

把浏览器工做分红多个进程的另外一好处是安全性与沙箱化。因为操做系统提供了限制进程权限的方法，浏览器就能够用沙箱保护某些特定功能的进程。例如，Chrome 浏览器限制处理任意用户输入的进程(如渲染器进程)对任意文件的访问。

因为进程有本身的私有内存空间，因此它们一般包含公共基础设施的拷贝(如 V8，它是 Chrome 的 JavaScript 引擎)。这意味着使用了更多的内存，若是它们是同一进程中的线程，就没法共享这些拷贝。为了节省内存，Chrome 对可加速的内存数量进行了限制。具体限制数值依设备可提供的内存与 CPU 能力而定，可是当 Chrome 运行时达到限制时，会开始在同一站点的不一样标签页上运行同一进程。

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

一样的方法也适用于浏览器进程。Chrome 正在经历架构变革，它转变为将浏览器程序的每一模块做为一个服务来运行，从而能够轻松实现进程的拆解或聚合。

一般观点是当 Chrome 运行在强力硬件上时，它会将每一个服务分解到不一样进程中，从而提高稳定性，可是若是 Chrome 运行在资源有限的设备上时，它会将服务聚合到一个进程中从而节省了内存占用。在这一架构变革实现前，相似的整合进程以减小内存使用的方法已经在 Android 类平台上使用。

图 11： Chrome 的服务化图，将不一样的服务移动到多个进程和单个浏览器进程中

每一个 iframe 的渲染进程 —— 站点隔离

站点隔离 是近期引入到 Chrome 中的一个功能，它为每一个 iframe 运行一个单独的渲染进程。咱们已经讨论了许久每一个标签页的渲染进程，它容许跨站点 iframe 运行在一个单独的渲染进程，在不一样站点中共享内存。运行 a.com 与 b.com 在同一渲染进程中看起来还 ok。

同源策略 是 web 的核心安全模型。同源策略确保站点在未获得其它站点许可的状况下不能获取其数据。安全攻击的一个主要目标就是绕过同源策略。进程隔离是分离站点的最高效的手段。随着 Meltdown and Spectre 的出现，使用进程来分离站点愈发势在必行。Chrome 67 版本后，桌面版 Chrome 都默认开启了站点隔离，每一个标签页的 iframe 都有一个单独的渲染进程。

图 12：站点隔离示意图，多个渲染进程指向站点内的 iframe

启用站点隔离是多年来工程人员努力的结果。站点隔离并不仅是分配不一样的渲染进程这么简单。它从根本上改变了 iframe 的通讯方式。在一个页面上打开开发者工具，让 iframe 在不一样的进程上运行，这意味着开发者工具必须在幕后工做，以使它看起来无缝。即便运行一个简单的 Ctrl + F 来查找页面中的一个单词，也意味着在不一样的渲染器进程中进行搜索。你能够看到为何浏览器工程师把发布站点隔离功能做为一个重要里程碑！

总结

本文从高级视角对浏览器架构与多进程架构的优势进行阐述。咱们也对 Chrome 中与多进程架构密切相关的服务化与站点隔离进行了讲解。下一篇文章中，咱们将开始深刻了解进程与线程中到底发生了什么才能使网站得以呈现。

你喜欢这篇文章吗？对后续文章有任何疑问或建议均可以在评论区或 Twitter 上 @kosamari 与我联系。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。