前言本文是作者对MarioKosaka撰写的现代网络浏览器系列文章的内幕翻译。这里的翻译并不是指直译，而是根据个人的理解来表达作者想表达的意思，并且会尽量补充一些相关的内容，帮助大家更好的理解。CPU、GPU、内存和多进程架构在这个由4部分组成的教程系列中，我将从Chrome浏览器的高层架构（high-levelarchitecture）开始，深入到页面渲染管道（renderingpipeline）细节.如果您想知道浏览器如何将您编写的代码变成可用的网站，或者您不知道为什么编写特定的代码可以提高网站的性能，那么您来对地方了，这篇文章适合您准备好了。作为本系列的第一篇文章，我们先了解一些关键的计算机术语和Chrome浏览器的多进程架构。计算机的心脏——CPU和GPU要了解浏览器的运行环境，我们首先需要了解一些计算机部件以及它们的作用。CPU首先我们要说说计算机的大脑——CPU（CentralProcessingUnit）。CPU是计算机中的一个芯片，上面有一个或多个内核。我们可以把一个CPU核心（core）比作一个上班族。他功能强大，通晓天文地理，无所不能。它可以依次处理分配给它的任务。.在很久以前，大多数CPU只有一个核心，但在现在的硬件设备上，CPU通常是多核的，因为多核CPU可以大大提高手机和电脑的计算能力。四个CPU核心在各自的工位上愉快地处理分配给它们的任务
GPU图形处理单元——或者说GPU（GraphicsProcessingUnit）是计算机的另一个重要部分成分。与强大的CPU核心不同，单个GPU核心只能处理一些简单的任务，但总比数量多要好。一个GPU上会有很多很多的核同时工作，也就是说它的并行计算能力很强。图形处理单元（GraphicsProcessingUnit，简称GPU），顾名思义，一开始就是专门处理图形的，所以说到图形使用GPU（using）或者GPU支持（backed），人们就会想到快速的图形渲染或者流畅的用户体验.概念。近年来，随着GPU加速概念的普及，越来越多的计算单独在GPU上进行。
每个GPU核心手里只有一把扳手，可见它的能力很有限，但是却有那么多！当你在手机或电脑上打开一个应用程序时，CPU和GPU实际上是在支持应用程序的运行。一般来说，你的应用需要通过操作系统提供的一些机制运行在CPU和GPU上。计算机的三层结构，底层是硬件机，中间夹着操作系统，顶层是运行的应用程序在上面执行程序进程和线程在深入浏览器的架构之前，我们不得不了解进程（process）和线程（thread）的相关概念。一个进程可以看作是一个正在执行的程序（executingprogram）。线程运行在一个进程中，一个进程中可能有一个或多个线程，这些线程可以执行应用程序代码的任何部分。进程就像一个大鱼缸，线程就是浴缸里游动的鱼当你启动一个应用程序时，操作系统会为这个程序创建一个进程，同时为这个程序创建一个进程。一个进程分配一个私有内存空间，用于存储所有与程序相关的数据和状态。当你关闭这个程序时，这个程序对应的进程也会消失，进程对应的内存空间也会被操作系统释放。进程使用系统分配的内存空间来存放应用程序数据有时为了满足功能需要，创建的进程会要求系统创建其他进程来处理其他任务，但新创建的进程将拥有新的独立内存空间，而不是与原进程共享内存空间。如果这些进程之间需要通信，就得通过IPC机制（InterProcessCommunication）。很多应用都会以这种多进程的方式工作，因为进程之间是相互独立的，互不影响。也就是说，如果其中一个工作进程（workerprocess）挂掉了，其他进程不会受到影响，挂掉的进程可以重新启动。不同进程通过IPC进行通信浏览器架构那么浏览器是如何使用进程和线程来工作的呢？其实大致可以分为两种架构。一种是单进程架构，即只启动一个进程，有多个线程在这个进程中工作。第二种是多进程架构。浏览器会启动多个进程，每个进程有多个线程，不同进程之间通过IPC进行通信。单进程和多进程浏览器架构图上图架构其实包含了浏览器架构的具体实现。现实中并没有一个浏览器是大家都按照标准来实现的，所以不同的浏览器实现起来可能完全不同。为了在本系列文章中更好的讨论，我们主要讨论最新的Chrome浏览器架构，它采用了多进程架构。以下是架构图：Chrome多进程架构图，多渲染进程卡片（renderprocess）用于表示Chrome会为每个标签创建一个渲染进程。Chrome浏览器会有一个浏览器进程（browserprocess），这个进程会配合其他进程来实现浏览器的功能。对于渲染器进程（rendererprocess），Chrome会尝试为页面中的每个选项卡甚至每个iframe分配一个单独的进程。各种过程如何协同工作？以下是各个进程的具体工作内容：ProcessresponsibleworkBrowser负责浏览器的“Chrome”部分，包括导航栏、书签、前进和后退按钮。同时，这个进程也会控制那些我们看不到的部分，包括网络请求的发送和文件的读写。Renderer负责所有与网页在选项卡中显示相关的工作。Plugin控制所有网页使用的插件，比如flash插件。GPU负责独立于其他进程的GPU任务。之所以独立为一个进程，是因为它处理来自不同选项卡的渲染请求，并绘制在同一个界面上。不同进程负责浏览器不同部分的界面内容除了上面列举的进程，Chrome还有很多其他进程在工作，比如扩展进程（ExtensionProcess)和工具进程(utilityprocess)。如果你想看看你的Chrome浏览器有多少进程在运行，可以点击浏览器右上角的更多按钮，选择更多工具和任务管理器：在弹出的窗口中，你会看到正在运行的进程列表，以及每个进程使用的CPU和内存。Chrome多进程架构的好处那么Chrome为什么要采用多进程架构来工作呢？多处理的好处之一是浏览器非常容错。对于大多数简单的场景，Chrome为每个选项卡分配了自己的渲染过程。例如，如果你有三个选项卡，你将有三个独立的渲染进程。当其中一个选项卡崩溃时，您可以随时关闭此选项卡，其他选项卡不会受到影响。但是如果所有的tabs都运行在同一个进程中，就会有关联，一个挂，全部挂。不同的标签页会有不同的渲染进程来负责Chrome的多进程架构的另一个优势是可以提供安全和沙盒（sanboxing）。因为操作系统可以为你提供一种方法来限制每个进程的能力，所以浏览器可以让某些进程不具有某些功能。例如，Chrome限制选项卡呈现进程随机读取和写入系统文件的能力，因为它们可能会处理来自用户的随机输入。但是，多进程架构也有它的缺点，就是进程的内存消耗。由于每个进程都有自己独立的内存空间，它们不能像存在于同一进程中的线程那样共享内存空间。问题是这些重复的内容消耗了更多的内存。因此，为了节省内存，Chrome会限制启动的进程数。当进程数达到一定限度时，Chrome会在一个进程中运行访问同一网站的标签页。节省更多内存——Chrome基于服务器的优化也可以用在浏览器进程（browserprocess）上。Chrome浏览器的架构正在发生一些变化。目的是将与浏览器本身（Chrome）相关的部分拆分成不同的服务。服务后，这些功能可以在不同的进程中运行或合并。作为单独的进程运行。这样做的主要原因是允许Chrome在具有不同功能的硬件上表现不同。当Chrome运行在性能更好的硬件上时，浏览器进程相关的服务会运行在不同的进程中，以提高系统的稳定性。相反，如果硬件性能不好，这些服务会在同一个进程中执行，以减少内存使用。事实上，在这次架构改变之前，Chrome已经开始在Android上采用类似的做法。Chrome在同一个进程运行浏览器相关服务和在不同进程运行的区别单帧渲染进程——站点隔离（SiteIsolation）Isolation）是最近推出的一项功能Chrome浏览器。这个特性会给网站中不同站点的iframe分配一个独立的渲染进程。之前说过Chrome会为每个tab分配一个单独的渲染进程，但是如果一个tab只有一个进程，那么不同站点的iframe都会在这个进程中运行，这也意味着它们会共享内存，这可能会破坏同一个-原产地政策。同源策略是浏览器的核心安全模型。它可以禁止网站未经同意从其他网站获取数据。因此，绕过同源策略是很多安全攻击的主要目的。进程隔离是隔离网站的最佳和最有效的方法。再加上CPU存在Meltdown、Spectre等隐患，网站隔离势在必行。因此，在Chrome67之后，桌面版的Chrome会默认开启网站隔离功能，这样每一个跨站iframe都会有一个独立的渲染进程。网站隔离功能将让跨站iframe拥有独立进程网站隔离技术汇集了我们工程师数年的研发心血。就像给iframe的iframe分配一个独立的渲染进程一样简单，因为它从根本上改变了各个iframe之间的通信方式。站点隔离之后，对于一个有iframe的站点，当用户打开右边的devtool时，Chrome浏览器其实要在后台做很多工作，让开发者感受不到和之前的区别，这实际上是很难实现的。对于一些非常简单的功能，比如在devtool中使用Ctrl+F键在页面中搜索某个关键词，Chrome要遍历多个渲染进程才能完成。所以我们的浏览器工程师感叹，这是网站隔离功能发布后的一个里程碑式的成就。总结在本文中，我们探讨了浏览器的高级架构设计和多进程架构的好处。同时，我们还讨论了与浏览器多进程架构密切相关的服务化、网站隔离等技术。在下一篇文章中，我们将开始深入研究这些进程和线程如何呈现我们的网站页面。继续关注我的技术动向。我是一个咄咄逼人的大葱。关注我，和我一起进步，成为独立的全栈工程师！文章首发于：窥探现代浏览器架构（一）关注我的个人主页公众号，获取我的最新技术推送！
