现代浏览器内部机制 Part 1 | 多进程架构

原文: Inside look at modern web browser (part 1)
做者: Mariko Kosaka
翻译: kyrieliu

在这个有 4 篇文章的系列中，咱们会把 Chrome 浏览器扒个精光 —— 上到浏览器的总体架构，下至页面的渲染规则。若是你对浏览器把代码变成一个具有功能的网站这件事情感到好奇，或者不肯定为何特定的技术会对页面的性能有所改进，那么强烈建议你看完这一系列。

在这篇文章中（Part 1），我将介绍一些核心的计算机术语和 Chrome 的多进程架构。

友情提示：若是你对 CPU/GPU 的概念很熟悉的话，能够直接去看浏览器架构的部分。

CPU 和 GPU

为了更好的了解浏览器的运行环境，咱们首先须要知道几个计算机的构成部分以及它们分别是作什么的。

CPU

首先要知道的概念是中央处理器（Central Processing Unit），也就是咱们常说的 CPU。

CPU 能够看做是整个计算机的大脑。在上面这张图中，一个 CPU 核被比喻成了一个工位上的社畜，当有不一样的任务传递进来时，它能够一个一个的去处理这些任务。当 CPU 知道如何响应人们的需求时，它几乎能够处理各式各样的任务，好比数学，或是艺术。在早些年，CPU 都是由单芯片所构成。每一个核就像是在芯片中又存在着另外一个 CPU。现代的电子设备基本上都是多核驱动的，这让人们的手机和电脑都具有了更强的计算能力。

GPU

咱们须要了解的另外一部分，就是图形处理器（Graphics Processing Unit），也就是 GPU。

和 CPU 不一样的是，GPU 擅长同时处理跨多核的简单任务。正如它的名字，在设计之初是用来处理图形的。这也正是为何当图形任务的处理和 GPU 关联起来的时候，一般带来的都是更快速的渲染和更流畅的交互。近年来，随着 GPU 的不断加速和升级，愈来愈多的计算均可能直接被放在 GPU 上进行了。

当你在手机或电脑上启动一个应用时，CPU 和 GPU 就是为那个应用提供“能量”的两个小兄弟。一般，应用程序经过操做系统提供的“机制”在 CPU 和 GPU 上运行。

在进程和线程上执行程序

在讲解浏览器架构以前，咱们还须要了解进程和线程。

进程能够描述为一个应用程序的执行程序。线程则是进程内部用来执行某个部分的程序。

当你启动一个应用时，一个进程就被建立了。程序可能会建立一些线程帮助它完成某些工做，但这不是必须的。操做系统会划分出一部份内存给这个进程，当前应用程序的全部状态都将保存在这个私有的内存空间中。当你关闭应用时，进程也就自动蒸发掉了，操做系统会将先前被占用的内存空间释放掉。

进程可让操做系统再另起一个进程去处理不一样的任务。当这种状况发生时，新的进程又将占据一块内存空间。当两个进程须要通讯时，它们能够用一个叫作进程间通信（Inter Process Communication）的办法解决。许多应用程序都被设计成以这种方式进行工做，因此当其中一个进程挂掉时，它能够在其余进程仍然运行的时候直接重启。

浏览器架构

终于要进入这个话题了。因此浏览器是如何经过进程和线程创建起来的呢？有时会是一个进程和多个不一样的线程，或是多个进程和少数线程。

这里要注意的一点是，这些不一样的体系架构是实现上的细节，至今没有任何一个规范去限制浏览器应该被作成什么样子，不一样的浏览器之间的架构可能彻底不一样。

在这个系列中，咱们以 Chrome 的最新架构为准。

首先是浏览器的自身进程，它负责与其余进程协做，主要负责浏览器应用的不一样部分，如网络、内存等（这句很差翻，贴上原文：At the top is the browser process coordinating with other processes that take care of different parts of the application）。至于渲染进程，浏览器会为每一个窗口分配一个渲染进程。在最近的一次更新中，若是够用的话，Chrome 干脆给每一个窗口分配了一个进程；而如今，Chrome 在致力于给每一个站点一个独立的进程，包括 iframe。

每一个进程都负责些啥？

进程	负责些啥？
浏览器进程	负责 chrome 的浏览器功能，包括导航栏、书签、后退、前进按钮。固然也负责一些虽然看不到但也很重要的部分，好比网络请求和文件访问。
渲染进程	窗口内的网站将如何呈现
插件进程	控制着网站可能用到的全部插件，好比 flash
GPU 进程	处理 GPU 任务，与其余进程隔离。它被划分为不一样的进程由于 GPU 会处理来自多个应用程序的请求并将其绘制在同一个平面上。

实际上还会有更多的进程，好比扩展进程和工具进程。若是你想看 Chrome 到底会启动多少个进程，打开右上角的菜单，更多工具，接着选择“任务管理器”。这将会打开一个新的窗口，里面是当前正在运行的进程列表，而且会直观的告诉你目前占用了多少 CPU 和内存（Chrome 吃内存的传言真不是盖的）。

Chrome 多进程架构的好处

以前有提到，Chrome 用的是多进程的渲染方式，最容易想到的场景就是每一个窗口（Tab）都有一个独立的渲染进程。假设你打开了三个浏览器窗口，当其中一个窗口由于某种缘由崩掉的时候，你大能够直接关闭这个再也不响应的窗口并继续你在其余窗口的工做。咱们换一个浏览器，全部的窗口都共享同一个进程，当一个窗口挂掉的时候，全部的窗口都直接挂掉了（像不像理财的时候人们老是说：“不要把全部的钱放在同一个钱包里”？）。

将浏览器的工做拆分红不一样的进程还有一个好处，就是安全。因为操做系统提供了一种限制进程“权限”的方法，所以浏览器能够将特定的功能和进程有效的隔离开。好比，Chrome 会限制用来处理用户输入的渲染进程去直接访问文件。

每一个进程都有各自的内存空间，所以它们常会各自拥有一份基础功能的拷贝。正由于它们之间不像同一进程中的线程那样可以共享资源，因此就须要更多的内存占用。为了节省内存，Chrome 对其自身可调用的进程在数量上作了限制。具体的限制大小在不一样性能的机器上各不相同，惟一肯定的是，当达到了这个上限后，Chrome 会将同站点的多个窗口交给同一个进程来管理。

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

浏览器进程也应用了相同的方案。Chrome 正在进行架构层面的整改，目的是将浏览器的各部分功能变成独立的服务，这样就能轻松的将其拆分为不一样的进程，也能更加灵活的互相组合。

总的来讲，当 Chrome 在较高性能的设备上运行时，它会将每一个服务分配至不一样的进程，以此来得到更强的运行时稳定性和健壮性；反之，若是 Chrome 运行在一台资源受限的设备上时，Chrome 会将服务整合在一个进程中，以此来节省内存的占用。像这种经过整合进程资源以此来节省内存的手段，已经被用于 Android 上了。

站点隔离（Site Isolation）

站点隔离是 Chrome 在其 67 桌面版上新增的特性，基本原则是不一样的站点各自运行在本身的沙箱环境中，独享进程，而且不容许通讯。咱们已经讨论过每一个窗口一个进程的模型，在这个模型中，浏览器容许跨站点的 iframe 独立进程共享不一样站点之间的内存空间。早先在一个渲染进程中（窗口）同时运行 a.com 和 b.com 看起来没有什么问题，由于有同源策略，确保一个站点未经赞成就没法访问其余站点的数据。绕过同源策略基本上成为了全部安全攻击的指导方针。而进程间的相互隔离是将站点分开的最佳途径（感兴趣的同窗能够去了解一下 Meltdown 和 Spectre 攻击）。

通过多年的工程上的努力，现在的站点隔离已经默认为用户开启了。事实上，站点隔离并不只仅是为站点分配不一样的渲染进程这么简单，它从根本上改变了 iframe 之间的通讯方式。打开运行有不一样站点 iframe 的开发者工具，意味着浏览器必须作不少看不到的幕后工做，才能让这一切看起来和之前没有什么区别，即便是简简单单的 ctrl+F 在这个场景下也意味着在不一样的渲染进程中查询字符串。网上有不少文章介绍浏览器的站点隔离策略，当你看完那些以后就会意识到，为何站点隔离值得 Chrome 团队为其发布一个独立版本了。

总结

在这篇文章中，咱们从宏观的角度了解了浏览器的架构以及这种多进程架构的好处。咱们也提到了 Chrome 的服务化以及站点隔离，这些和多进程的架构都有着很深的渊源。

在下一篇文章中，咱们会深刻了解在为用户呈现一个网站时，这些进程和线程之间会发生什么。

后记

欢迎关注「凯里的前端专栏」，虽然我更新慢，但保证每一篇都是本身用心分享给你。若是你也喜欢讨论前端技术，或者是对本文/本人有任何建议，很是欢迎加凯里微信好友一块儿探讨。固然，围绕着前端的任何话题均可以来找我聊～ 凯里的微信号是：K-I2ving