<div data-slate-editor="true" data-key="994" autocorrect="off" spellcheck="false" data-gramm="false" style="outline: none; white-space: pre-wrap; overflow-wrap: break-word;"><div class="se-44f3bb23 " data-slate-type="paragraph" data-slate-object="block" data-key="995"><span data-slate-object="text" data-key="996"><span data-slate-leaf="true" data-offset-key="996:0" data-first-offset="true"><span data-slate-string="true">无论你是想要设计高性能 Web 应用，还是要优化现有的 Web 应用，你都需要了解浏览器中的网络流程、页面渲染过程，JavaScript 执行流程，以及 Web 安全理论，而这些功能是分散在浏览器的各个功能组件中的，比较多、比较散，要怎样学习才能掌握呢？通过浏览器的多进程架构的学习，你就可以把这些分散的知识点串起来，组成一张网，从而让自己能站在更高的维度去理解 Web 应用。</span></span></span></div><div class="se-91809edd " data-slate-type="paragraph" data-slate-object="block" data-key="997"><span data-slate-object="text" data-key="998"><span data-slate-leaf="true" data-offset-key="998:0" data-first-offset="true"><span data-slate-string="true">因此，</span></span></span><span data-slate-object="text" data-key="999"><span data-slate-leaf="true" data-offset-key="999:0" data-first-offset="true"><span class="se-20bdce14" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">学习浏览器的多进程架构是很有必要的</span></span></span></span><span data-slate-object="text" data-key="1000"><span data-slate-leaf="true" data-offset-key="1000:0" data-first-offset="true"><span data-slate-string="true">。需要说明的是，</span></span></span><span data-slate-object="text" data-key="1001"><span data-slate-leaf="true" data-offset-key="1001:0" data-first-offset="true"><span class="se-b022699e" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">在本专栏中，我所有的分析都是基于 Chrome 浏览器的</span></span></span></span><span data-slate-object="text" data-key="1002"><span data-slate-leaf="true" data-offset-key="1002:0" data-first-offset="true"><span data-slate-string="true">。那么多浏览器，为什么偏偏选择 Chrome 浏览器呢？因为 Chrome、微软的 Edge 以及国内的大部分主流浏览器，都是基于 Chromium 二次开发而来；而 Chrome 是 Google 的官方发行版，特性和 Chromium 基本一样，只存在一些产品层面差异；再加上 Chrome 是目前世界上使用率最高的浏览器，所以 </span></span></span><span data-slate-object="text" data-key="1003"><span data-slate-leaf="true" data-offset-key="1003:0" data-first-offset="true"><span class="se-b290c8c7" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">Chrome 最具代表性</span></span></span></span><span data-slate-object="text" data-key="1004"><span data-slate-leaf="true" data-offset-key="1004:0" data-first-offset="true"><span data-slate-string="true">。</span></span></span></div><div class="se-ffaeff95 " data-slate-type="paragraph" data-slate-object="block" data-key="1005"><span data-slate-object="text" data-key="1006"><span data-slate-leaf="true" data-offset-key="1006:0" data-first-offset="true"><span data-slate-string="true">在开始之前，我们一起看下，Chrome 打开一个页面需要启动多少进程？你可以点击 Chrome 浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”，这将打开 Chrome 的任务管理器的窗口，如下图：</span></span></span></div><div class="se-8aefae30" data-slate-type="image" data-slate-object="block" data-key="1007"><img class="se-10fc31f7" src="https://static001.geekbang.org/resource/image/ce/9e/ce7f8cfe212bec0f53360422e3b03a9e.png"></div><div class="se-5796ff5f se-eb60c918" data-slate-type="paragraph" data-slate-object="block" data-key="1008"><span data-slate-object="text" data-key="1009"><span data-slate-leaf="true" data-offset-key="1009:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">Chrome 的任务管理器窗口</span></span></span></span></div><div class="se-f38d5109 " data-slate-type="paragraph" data-slate-object="block" data-key="1010"><span data-slate-object="text" data-key="1011"><span data-slate-leaf="true" data-offset-key="1011:0" data-first-offset="true"><span data-slate-string="true">和 Windows 任务管理器一样，Chrome 任务管理器也是用来展示运行中 Chrome 使用的进程信息的。从图中可以看到，Chrome 启动了 4 个进程，你也许会好奇，只是打开了 1 个页面，为什么要启动这么多进程呢？</span></span></span></div><div class="se-abc31049 " data-slate-type="paragraph" data-slate-object="block" data-key="1012"><span data-slate-object="text" data-key="1013"><span data-slate-leaf="true" data-offset-key="1013:0" data-first-offset="true"><span data-slate-string="true">在解答这个问题之前，我们需要了解一下进程的概念，不过由于好多人容易把进程和线程的概念混淆，从而影响后续其他概念的理解，所以这里我就将这两个概念以及它们之间的关系一并为你讲解下。</span></span></span></div><h2 class="se-059d68b9" data-slate-type="heading" data-slate-object="block" data-key="1014"><span data-slate-object="text" data-key="1015"><span data-slate-leaf="true" data-offset-key="1015:0" data-first-offset="true"><span data-slate-string="true">进程和线程</span></span></span></h2><div class="se-9c999f56 " data-slate-type="paragraph" data-slate-object="block" data-key="1016"><span data-slate-object="text" data-key="1017"><span data-slate-leaf="true" data-offset-key="1017:0" data-first-offset="true"><span data-slate-string="true">不过，在介绍进程和线程之前，我需要先讲解下什么是并行处理，因为如果你理解了并行处理的概念，那么再理解进程和线程之间的关系就会变得轻松许多。</span></span></span></div><h3 class="se-86cef073" data-slate-type="heading" data-slate-object="block" data-key="1018"><span data-slate-object="text" data-key="1019"><span data-slate-leaf="true" data-offset-key="1019:0" data-first-offset="true"><span data-slate-string="true">什么是并行处理</span></span></span></h3><div class="se-02bb5477 " data-slate-type="paragraph" data-slate-object="block" data-key="1020"><span data-slate-object="text" data-key="1021"><span data-slate-leaf="true" data-offset-key="1021:0" data-first-offset="true"><span data-slate-string="true">计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面这三个表达式的值，并显示出结果。</span></span></span></div><div class="se-417c3f68 se-8a5c89ee" data-slate-type="pre" data-slate-object="block" data-key="1022"><div class="se-14b07516 se-9db20174"><span></span></div><div class="se-ab30229d"><div class="se-9721b78e se-40716c53" data-code-line-number="1"></div><div class="se-9721b78e se-40716c53" data-code-line-number="2"></div><div class="se-9721b78e se-40716c53" data-code-line-number="3"></div></div><div class="se-a2ef2e2e ps"><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1023"><span data-slate-object="text" data-key="1024"><span data-slate-leaf="true" data-offset-key="1024:0" data-first-offset="true"><span data-slate-string="true">A = 1+2</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1025"><span data-slate-object="text" data-key="1026"><span data-slate-leaf="true" data-offset-key="1026:0" data-first-offset="true"><span data-slate-string="true">B = 20/5</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1027"><span data-slate-object="text" data-key="1028"><span data-slate-leaf="true" data-offset-key="1028:0" data-first-offset="true"><span data-slate-string="true">C = 7*8</span></span></span></div><div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div></div><div class="se-a1bf57a5 " data-slate-type="paragraph" data-slate-object="block" data-key="1029"><span data-slate-object="text" data-key="1030"><span data-slate-leaf="true" data-offset-key="1030:0" data-first-offset="true"><span data-slate-string="true">在编写代码的时候，我们可以把这个过程拆分为四个任务：</span></span></span></div><div class="se-9929f6d3" data-slate-type="list" data-slate-object="block" data-key="1031"><div class="se-5d10d697 se-7dfbba0a" data-slate-type="list-line" data-slate-object="block" data-key="1032"><span data-slate-object="text" data-key="1033"><span data-slate-leaf="true" data-offset-key="1033:0" data-first-offset="true"><span class="se-aa8f5c09" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">任务 1 </span></span></span></span><span data-slate-object="text" data-key="1034"><span data-slate-leaf="true" data-offset-key="1034:0" data-first-offset="true"><span data-slate-string="true">是计算 A=1+2；</span></span></span></div><div class="se-8237eabf se-996ebb5c" data-slate-type="list-line" data-slate-object="block" data-key="1035"><span data-slate-object="text" data-key="1036"><span data-slate-leaf="true" data-offset-key="1036:0" data-first-offset="true"><span class="se-e4181f16" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">任务 2 </span></span></span></span><span data-slate-object="text" data-key="1037"><span data-slate-leaf="true" data-offset-key="1037:0" data-first-offset="true"><span data-slate-string="true">是计算 B=20/5；</span></span></span></div><div class="se-8d7f7144 se-c8b20094" data-slate-type="list-line" data-slate-object="block" data-key="1038"><span data-slate-object="text" data-key="1039"><span data-slate-leaf="true" data-offset-key="1039:0" data-first-offset="true"><span class="se-ccb16004" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">任务 3 </span></span></span></span><span data-slate-object="text" data-key="1040"><span data-slate-leaf="true" data-offset-key="1040:0" data-first-offset="true"><span data-slate-string="true">是计算 C=7*8；</span></span></span></div><div class="se-0cfbddd2 se-96a68f98" data-slate-type="list-line" data-slate-object="block" data-key="1041"><span data-slate-object="text" data-key="1042"><span data-slate-leaf="true" data-offset-key="1042:0" data-first-offset="true"><span class="se-ad65d5f5" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">任务 4 </span></span></span></span><span data-slate-object="text" data-key="1043"><span data-slate-leaf="true" data-offset-key="1043:0" data-first-offset="true"><span data-slate-string="true">是显示最后计算的结果。</span></span></span></div></div><div class="se-20dc0d73 " data-slate-type="paragraph" data-slate-object="block" data-key="1044"><span data-slate-object="text" data-key="1045"><span data-slate-leaf="true" data-offset-key="1045:0" data-first-offset="true"><span data-slate-string="true">正常情况下程序可以使用</span></span></span><span data-slate-object="text" data-key="1046"><span data-slate-leaf="true" data-offset-key="1046:0" data-first-offset="true"><span class="se-0aea461c" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">单线程</span></span></span></span><span data-slate-object="text" data-key="1047"><span data-slate-leaf="true" data-offset-key="1047:0" data-first-offset="true"><span data-slate-string="true">来处理，也就是分四步按照顺序分别执行这四个任务。</span></span></span></div><div class="se-200d8e88 " data-slate-type="paragraph" data-slate-object="block" data-key="1048"><span data-slate-object="text" data-key="1049"><span data-slate-leaf="true" data-offset-key="1049:0" data-first-offset="true"><span data-slate-string="true">如果采用</span></span></span><span data-slate-object="text" data-key="1050"><span data-slate-leaf="true" data-offset-key="1050:0" data-first-offset="true"><span class="se-5f83bd13" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">多线程</span></span></span></span><span data-slate-object="text" data-key="1051"><span data-slate-leaf="true" data-offset-key="1051:0" data-first-offset="true"><span data-slate-string="true">，会怎么样呢？我们只需分“两步走”：第一步，使用三个线程同时执行前三个任务；第二步，再执行第四个显示任务。</span></span></span></div><div class="se-8659a8ec " data-slate-type="paragraph" data-slate-object="block" data-key="1052"><span data-slate-object="text" data-key="1053"><span data-slate-leaf="true" data-offset-key="1053:0" data-first-offset="true"><span data-slate-string="true">通过对比分析，你会发现用单线程执行需要四步，而使用多线程只需要两步。因此，</span></span></span><span data-slate-object="text" data-key="1054"><span data-slate-leaf="true" data-offset-key="1054:0" data-first-offset="true"><span class="se-97a5111d" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">使用并行处理能大大提升性能</span></span></span></span><span data-slate-object="text" data-key="1055"><span data-slate-leaf="true" data-offset-key="1055:0" data-first-offset="true"><span data-slate-string="true">。</span></span></span></div><h3 class="se-0162b044" data-slate-type="heading" data-slate-object="block" data-key="1056"><span data-slate-object="text" data-key="1057"><span data-slate-leaf="true" data-offset-key="1057:0" data-first-offset="true"><span data-slate-string="true">线程 VS 进程</span></span></span></h3><div class="se-94bbdb91 " data-slate-type="paragraph" data-slate-object="block" data-key="1058"><span data-slate-object="text" data-key="1059"><span data-slate-leaf="true" data-offset-key="1059:0" data-first-offset="true"><span data-slate-string="true">多线程可以并行处理任务，但是</span></span></span><span data-slate-object="text" data-key="1060"><span data-slate-leaf="true" data-offset-key="1060:0" data-first-offset="true"><span class="se-7b3208e4" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">线程是不能单独存在的，它是由进程来启动和管理的</span></span></span></span><span data-slate-object="text" data-key="1061"><span data-slate-leaf="true" data-offset-key="1061:0" data-first-offset="true"><span data-slate-string="true">。那什么又是进程呢？</span></span></span></div><div class="se-80f00bea " data-slate-type="paragraph" data-slate-object="block" data-key="1062"><span data-slate-object="text" data-key="1063"><span data-slate-leaf="true" data-offset-key="1063:0" data-first-offset="true"><span class="se-b7efd8de" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">一个进程就是一个程序的运行实例</span></span></span></span><span data-slate-object="text" data-key="1064"><span data-slate-leaf="true" data-offset-key="1064:0" data-first-offset="true"><span data-slate-string="true">。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫</span></span></span><span data-slate-object="text" data-key="1065"><span data-slate-leaf="true" data-offset-key="1065:0" data-first-offset="true"><span class="se-0432c163" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">进程</span></span></span></span><span data-slate-object="text" data-key="1066"><span data-slate-leaf="true" data-offset-key="1066:0" data-first-offset="true"><span data-slate-string="true">。</span></span></span></div><div class="se-9e0f4727 " data-slate-type="paragraph" data-slate-object="block" data-key="1067"><span data-slate-object="text" data-key="1068"><span data-slate-leaf="true" data-offset-key="1068:0" data-first-offset="true"><span data-slate-string="true">为了让你更好地理解上述计算过程，我画了下面这张对比图：</span></span></span></div><div class="se-2d4072a9" data-slate-type="image" data-slate-object="block" data-key="1069"><img class="se-515fd57f" src="https://static001.geekbang.org/resource/image/33/da/3380f0a16c323deda5d3a300804b95da.png"></div><div class="se-a4fcf11f se-94e3ccfe" data-slate-type="paragraph" data-slate-object="block" data-key="1070"><span data-slate-object="text" data-key="1071"><span data-slate-leaf="true" data-offset-key="1071:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">单线程与多线程的进程对比图</span></span></span></span></div><div class="se-00232b38 " data-slate-type="paragraph" data-slate-object="block" data-key="1072"><span data-slate-object="text" data-key="1073"><span data-slate-leaf="true" data-offset-key="1073:0" data-first-offset="true"><span data-slate-string="true">从图中可以看到，</span></span></span><span data-slate-object="text" data-key="1074"><span data-slate-leaf="true" data-offset-key="1074:0" data-first-offset="true"><span class="se-4ca47cdf" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率</span></span></span></span><span data-slate-object="text" data-key="1075"><span data-slate-leaf="true" data-offset-key="1075:0" data-first-offset="true"><span data-slate-string="true">。</span></span></span></div><div class="se-55977e50 " data-slate-type="paragraph" data-slate-object="block" data-key="1076"><span data-slate-object="text" data-key="1077"><span data-slate-leaf="true" data-offset-key="1077:0" data-first-offset="true"><span data-slate-string="true">总结来说，进程和线程之间的关系有以下 4 个特点。</span></span></span></div><div class="se-6b944d7a " data-slate-type="paragraph" data-slate-object="block" data-key="1078"><span data-slate-object="text" data-key="1079"><span data-slate-leaf="true" data-offset-key="1079:0" data-first-offset="true"><span class="se-70ab1284" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">1. 进程中的任意一线程执行出错，都会导致整个进程的崩溃。</span></span></span></span></div><div class="se-38a2a2b8 " data-slate-type="paragraph" data-slate-object="block" data-key="1080"><span data-slate-object="text" data-key="1081"><span data-slate-leaf="true" data-offset-key="1081:0" data-first-offset="true"><span data-slate-string="true">我们可以模拟以下场景：</span></span></span></div><div class="se-945cb5d8 se-43a6fb39" data-slate-type="pre" data-slate-object="block" data-key="1082"><div class="se-2a0a41df se-1644ba56"><span></span></div><div class="se-493a6c08"><div class="se-2b151173 se-9b731457" data-code-line-number="1"></div><div class="se-2b151173 se-9b731457" data-code-line-number="2"></div><div class="se-2b151173 se-9b731457" data-code-line-number="3"></div></div><div class="se-a748bdf6 ps"><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1083"><span data-slate-object="text" data-key="1084"><span data-slate-leaf="true" data-offset-key="1084:0" data-first-offset="true"><span data-slate-string="true">A = 1+2</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1085"><span data-slate-object="text" data-key="1086"><span data-slate-leaf="true" data-offset-key="1086:0" data-first-offset="true"><span data-slate-string="true">B = 20/0</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1087"><span data-slate-object="text" data-key="1088"><span data-slate-leaf="true" data-offset-key="1088:0" data-first-offset="true"><span data-slate-string="true">C = 7*8</span></span></span></div><div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div></div><div class="se-6d91d557 " data-slate-type="paragraph" data-slate-object="block" data-key="1089"><span data-slate-object="text" data-key="1090"><span data-slate-leaf="true" data-offset-key="1090:0" data-first-offset="true"><span data-slate-string="true">我把上述三个表达式稍作修改，在计算 B 的值的时候，我把表达式的分母改成 0，当线程执行到 B = 20/0 时，由于分母为 0，线程会执行出错，这样就会导致整个进程的崩溃，当然另外两个线程执行的结果也没有了。</span></span></span></div><div class="se-d96b23ca " data-slate-type="paragraph" data-slate-object="block" data-key="1091"><span data-slate-object="text" data-key="1092"><span data-slate-leaf="true" data-offset-key="1092:0" data-first-offset="true"><span class="se-c498aae0" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">2. 线程之间共享进程中的数据。</span></span></span></span></div><div class="se-9d07812f " data-slate-type="paragraph" data-slate-object="block" data-key="1093"><span data-slate-object="text" data-key="1094"><span data-slate-leaf="true" data-offset-key="1094:0" data-first-offset="true"><span data-slate-string="true">如下图所示，线程之间可以对进程的公共数据进行读写操作。</span></span></span></div><div class="se-ad64dfcb" data-slate-type="image" data-slate-object="block" data-key="1095"><img class="se-98eab9d4" src="https://static001.geekbang.org/resource/image/d0/9e/d0efacd7f299ed99e776cb97da2a799e.png"></div><div class="se-24eca5de se-6ccc066b" data-slate-type="paragraph" data-slate-object="block" data-key="1096"><span data-slate-object="text" data-key="1097"><span data-slate-leaf="true" data-offset-key="1097:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">线程之间共享进程中的数据示意图</span></span></span></span></div><div class="se-cb28c229 " data-slate-type="paragraph" data-slate-object="block" data-key="1098"><span data-slate-object="text" data-key="1099"><span data-slate-leaf="true" data-offset-key="1099:0" data-first-offset="true"><span data-slate-string="true">从上图可以看出，线程 1、线程 2、线程 3 分别把执行的结果写入 A、B、C 中，然后线程 2 继续从 A、B、C 中读取数据，用来显示执行结果。</span></span></span></div><div class="se-6f72c309 " data-slate-type="paragraph" data-slate-object="block" data-key="1100"><span data-slate-object="text" data-key="1101"><span data-slate-leaf="true" data-offset-key="1101:0" data-first-offset="true"><span class="se-7342ba0a" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">3. 当一个进程关闭之后，操作系统会回收进程所占用的内存。</span></span></span></span></div><div class="se-53efbc76 " data-slate-type="paragraph" data-slate-object="block" data-key="1102"><span data-slate-object="text" data-key="1103"><span data-slate-leaf="true" data-offset-key="1103:0" data-first-offset="true"><span data-slate-string="true">当一个进程退出时，操作系统会回收该进程所申请的所有资源；即使其中任意线程因为操作不当导致内存泄漏，当进程退出时，这些内存也会被正确回收。</span></span></span></div><div class="se-c25dbc37 " data-slate-type="paragraph" data-slate-object="block" data-key="1104"><span data-slate-object="text" data-key="1105"><span data-slate-leaf="true" data-offset-key="1105:0" data-first-offset="true"><span data-slate-string="true">比如之前的 IE 浏览器，支持很多插件，而这些插件很容易导致内存泄漏，这意味着只要浏览器开着，内存占用就有可能会越来越多，但是当关闭浏览器进程时，这些内存就都会被系统回收掉。</span></span></span></div><div class="se-651a32c4 " data-slate-type="paragraph" data-slate-object="block" data-key="1106"><span data-slate-object="text" data-key="1107"><span data-slate-leaf="true" data-offset-key="1107:0" data-first-offset="true"><span class="se-04d389b0" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">4. 进程之间的内容相互隔离。</span></span></span></span></div><div class="se-84563300 " data-slate-type="paragraph" data-slate-object="block" data-key="1108"><span data-slate-object="text" data-key="1109"><span data-slate-leaf="true" data-offset-key="1109:0" data-first-offset="true"><span data-slate-string="true">进程隔离是为保护操作系统中进程互不干扰的技术，每一个进程只能访问自己占有的数据，也就避免出现进程 A 写入数据到进程 B 的情况。正是因为进程之间的数据是严格隔离的，所以一个进程如果崩溃了，或者挂起了，是不会影响到其他进程的。如果进程之间需要进行数据的通信，这时候，就需要使用用于进程间通信（IPC）的机制了。</span></span></span></div><h2 class="se-84d3e087" data-slate-type="heading" data-slate-object="block" data-key="1110"><span data-slate-object="text" data-key="1111"><span data-slate-leaf="true" data-offset-key="1111:0" data-first-offset="true"><span data-slate-string="true">单进程浏览器时代</span></span></span></h2><div class="se-595c7519 " data-slate-type="paragraph" data-slate-object="block" data-key="1112"><span data-slate-object="text" data-key="1113"><span data-slate-leaf="true" data-offset-key="1113:0" data-first-offset="true"><span data-slate-string="true">在了解了进程和线程之后，我们再来一起看下单进程浏览器的架构。顾名思义，</span></span></span><span data-slate-object="text" data-key="1114"><span data-slate-leaf="true" data-offset-key="1114:0" data-first-offset="true"><span class="se-301a6854" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里</span></span></span></span><span data-slate-object="text" data-key="1115"><span data-slate-leaf="true" data-offset-key="1115:0" data-first-offset="true"><span data-slate-string="true">，这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。其实早在 2007 年之前，市面上浏览器都是单进程的。单进程浏览器的架构如下图所示：</span></span></span></div><div class="se-c788924f" data-slate-type="image" data-slate-object="block" data-key="1116"><img class="se-7607b253" src="https://static001.geekbang.org/resource/image/6d/ca/6ddad2419b049b0eb2a8036f3dfff1ca.png"></div><div class="se-4d30ce11 se-61ecb405" data-slate-type="paragraph" data-slate-object="block" data-key="1117"><span data-slate-object="text" data-key="1118"><span data-slate-leaf="true" data-offset-key="1118:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">单进程浏览器架构示意图</span></span></span></span></div><div class="se-075be650 " data-slate-type="paragraph" data-slate-object="block" data-key="1119"><span data-slate-object="text" data-key="1120"><span data-slate-leaf="true" data-offset-key="1120:0" data-first-offset="true"><span data-slate-string="true">如此多的功能模块运行在一个进程里，是导致单进程浏览器</span></span></span><span data-slate-object="text" data-key="1121"><span data-slate-leaf="true" data-offset-key="1121:0" data-first-offset="true"><span class="se-3685ba44" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">不稳定</span></span></span></span><span data-slate-object="text" data-key="1122"><span data-slate-leaf="true" data-offset-key="1122:0" data-first-offset="true"><span data-slate-string="true">、</span></span></span><span data-slate-object="text" data-key="1123"><span data-slate-leaf="true" data-offset-key="1123:0" data-first-offset="true"><span class="se-53ef2e33" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">不流畅</span></span></span></span><span data-slate-object="text" data-key="1124"><span data-slate-leaf="true" data-offset-key="1124:0" data-first-offset="true"><span data-slate-string="true">和</span></span></span><span data-slate-object="text" data-key="1125"><span data-slate-leaf="true" data-offset-key="1125:0" data-first-offset="true"><span class="se-009e0f7c" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">不安全</span></span></span></span><span data-slate-object="text" data-key="1126"><span data-slate-leaf="true" data-offset-key="1126:0" data-first-offset="true"><span data-slate-string="true">的一个主要因素。下面我就来一一分析下出现这些问题的原因。</span></span></span></div><h3 class="se-a8bfaff1" data-slate-type="heading" data-slate-object="block" data-key="1127"><span data-slate-object="text" data-key="1128"><span data-slate-leaf="true" data-offset-key="1128:0" data-first-offset="true"><span data-slate-string="true">问题 1：不稳定</span></span></span></h3><div class="se-78c9af6e " data-slate-type="paragraph" data-slate-object="block" data-key="1129"><span data-slate-object="text" data-key="1130"><span data-slate-leaf="true" data-offset-key="1130:0" data-first-offset="true"><span data-slate-string="true">早期浏览器需要借助于</span></span></span><span data-slate-object="text" data-key="1131"><span data-slate-leaf="true" data-offset-key="1131:0" data-first-offset="true"><span class="se-a701b4b6" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">插件</span></span></span></span><span data-slate-object="text" data-key="1132"><span data-slate-leaf="true" data-offset-key="1132:0" data-first-offset="true"><span data-slate-string="true">来实现诸如 Web 视频、Web 游戏等各种强大的功能，但是插件是最容易出问题的模块，并且还运行在浏览器进程之中，所以一个插件的意外崩溃会引起整个浏览器的崩溃。</span></span></span></div><div class="se-93eb8906 " data-slate-type="paragraph" data-slate-object="block" data-key="1133"><span data-slate-object="text" data-key="1134"><span data-slate-leaf="true" data-offset-key="1134:0" data-first-offset="true"><span data-slate-string="true">除了插件之外，</span></span></span><span data-slate-object="text" data-key="1135"><span data-slate-leaf="true" data-offset-key="1135:0" data-first-offset="true"><span class="se-e759c122" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">渲染引擎模块</span></span></span></span><span data-slate-object="text" data-key="1136"><span data-slate-leaf="true" data-offset-key="1136:0" data-first-offset="true"><span data-slate-string="true">也是不稳定的，通常一些复杂的 JavaScript 代码就有可能引起渲染引擎模块的崩溃。和插件一样，渲染引擎的崩溃也会导致整个浏览器的崩溃。</span></span></span></div><h3 class="se-1a3209ed" data-slate-type="heading" data-slate-object="block" data-key="1137"><span data-slate-object="text" data-key="1138"><span data-slate-leaf="true" data-offset-key="1138:0" data-first-offset="true"><span data-slate-string="true">问题 2：不流畅</span></span></span></h3><div class="se-85422c50 " data-slate-type="paragraph" data-slate-object="block" data-key="1139"><span data-slate-object="text" data-key="1140"><span data-slate-leaf="true" data-offset-key="1140:0" data-first-offset="true"><span data-slate-string="true">从上面的“单进程浏览器架构示意图”可以看出，所有页面的渲染模块、JavaScript 执行环境以及插件都是运行在同一个线程中的，这就意味着同一时刻只能有一个模块可以执行。</span></span></span></div><div class="se-06424b49 " data-slate-type="paragraph" data-slate-object="block" data-key="1141"><span data-slate-object="text" data-key="1142"><span data-slate-leaf="true" data-offset-key="1142:0" data-first-offset="true"><span data-slate-string="true">比如，下面这个无限循环的脚本：</span></span></span></div><div class="se-6500a4a3 se-dc59b232" data-slate-type="pre" data-slate-object="block" data-key="1143" data-code-language="javascript"><div class="se-07a28078 se-d53ac898"><span></span></div><div class="se-9a8b59d7"><div class="se-aefc27b2 se-2762f905" data-code-line-number="1"></div><div class="se-aefc27b2 se-2762f905" data-code-line-number="2"></div><div class="se-aefc27b2 se-2762f905" data-code-line-number="3"></div><div class="se-aefc27b2 se-2762f905" data-code-line-number="4"></div><div class="se-aefc27b2 se-2762f905" data-code-line-number="5"></div><div class="se-aefc27b2 se-2762f905" data-code-line-number="6"></div></div><div class="se-c67ef77a ps"><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1144"><span data-slate-object="text" data-key="1145"><span data-slate-leaf="true" data-offset-key="1145:0" data-first-offset="true"><span class=" gkhl-keyword" data-slate-object="annotation" data-annotation-key="gkann_5420088667" data-annotation-type="annotation"><span class=" gkhl-function" data-slate-object="annotation" data-annotation-key="gkann_3490185566" data-annotation-type="annotation"><span data-slate-string="true">function</span></span></span></span><span data-slate-leaf="true" data-offset-key="1145:1"><span class=" gkhl-function" data-slate-object="annotation" data-annotation-key="gkann_3490185566" data-annotation-type="annotation"><span data-slate-string="true"> </span></span></span><span data-slate-leaf="true" data-offset-key="1145:2"><span class=" gkhl-title" data-slate-object="annotation" data-annotation-key="gkann_6487877916" data-annotation-type="annotation"><span class=" gkhl-function" data-slate-object="annotation" data-annotation-key="gkann_3490185566" data-annotation-type="annotation"><span data-slate-string="true">freeze</span></span></span></span><span data-slate-leaf="true" data-offset-key="1145:3"><span class=" gkhl-function" data-slate-object="annotation" data-annotation-key="gkann_3490185566" data-annotation-type="annotation"><span data-slate-string="true">(</span></span></span><span data-slate-leaf="true" data-offset-key="1145:4"><span class=" gkhl-function" data-slate-object="annotation" data-annotation-key="gkann_3490185566" data-annotation-type="annotation"><span data-slate-string="true">) </span></span></span><span data-slate-leaf="true" data-offset-key="1145:5"><span data-slate-string="true">{</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1146"><span data-slate-object="text" data-key="1147"><span data-slate-leaf="true" data-offset-key="1147:0" data-first-offset="true"><span data-slate-string="true"> </span></span><span data-slate-leaf="true" data-offset-key="1147:1"><span class=" gkhl-keyword" data-slate-object="annotation" data-annotation-key="gkann_0743808860" data-annotation-type="annotation"><span data-slate-string="true">while</span></span></span><span data-slate-leaf="true" data-offset-key="1147:2"><span data-slate-string="true"> (</span></span><span data-slate-leaf="true" data-offset-key="1147:3"><span class=" gkhl-number" data-slate-object="annotation" data-annotation-key="gkann_3402178183" data-annotation-type="annotation"><span data-slate-string="true">1</span></span></span><span data-slate-leaf="true" data-offset-key="1147:4"><span data-slate-string="true">) {</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1148"><span data-slate-object="text" data-key="1149"><span data-slate-leaf="true" data-offset-key="1149:0" data-first-offset="true"><span data-slate-string="true"> </span></span><span data-slate-leaf="true" data-offset-key="1149:1"><span class=" gkhl-built_in" data-slate-object="annotation" data-annotation-key="gkann_5697099965" data-annotation-type="annotation"><span data-slate-string="true">console</span></span></span><span data-slate-leaf="true" data-offset-key="1149:2"><span data-slate-string="true">.log(</span></span><span data-slate-leaf="true" data-offset-key="1149:3"><span class=" gkhl-string" data-slate-object="annotation" data-annotation-key="gkann_7094032754" data-annotation-type="annotation"><span data-slate-string="true">"freeze"</span></span></span><span data-slate-leaf="true" data-offset-key="1149:4"><span data-slate-string="true">);</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1150"><span data-slate-object="text" data-key="1151"><span data-slate-leaf="true" data-offset-key="1151:0" data-first-offset="true"><span data-slate-string="true"> }</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1152"><span data-slate-object="text" data-key="1153"><span data-slate-leaf="true" data-offset-key="1153:0" data-first-offset="true"><span data-slate-string="true">}</span></span></span></div><div class="se-f8ebb36a se-9985db07" data-slate-type="code-line" data-slate-object="block" data-key="1154"><span data-slate-object="text" data-key="1155"><span data-slate-leaf="true" data-offset-key="1155:0" data-first-offset="true"><span data-slate-string="true">freeze();</span></span></span></div><div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div></div><div class="se-c2028da2 " data-slate-type="paragraph" data-slate-object="block" data-key="1156"><span data-slate-object="text" data-key="1157"><span data-slate-leaf="true" data-offset-key="1157:0" data-first-offset="true"><span data-slate-string="true">如果让这个脚本运行在一个单进程浏览器的页面里，你感觉会发生什么？</span></span></span></div><div class="se-aa438f49 " data-slate-type="paragraph" data-slate-object="block" data-key="1158"><span data-slate-object="text" data-key="1159"><span data-slate-leaf="true" data-offset-key="1159:0" data-first-offset="true"><span data-slate-string="true">因为这个脚本是无限循环的，所以当其执行时，它会独占整个线程，这样导致其他运行在该线程中的模块就没有机会被执行。因为浏览器中所有的页面都运行在该线程中，所以这些页面都没有机会去执行任务，这样就会导致整个浏览器失去响应，变卡顿。这块内容要继续往深的地方讲就到页面的事件循环系统了，具体相关内容我会在后面的模块中为你深入讲解。</span></span></span></div><div class="se-610ba842 " data-slate-type="paragraph" data-slate-object="block" data-key="1160"><span data-slate-object="text" data-key="1161"><span data-slate-leaf="true" data-offset-key="1161:0" data-first-offset="true"><span data-slate-string="true">除了上述</span></span></span><span data-slate-object="text" data-key="1162"><span data-slate-leaf="true" data-offset-key="1162:0" data-first-offset="true"><span class="se-c67ef8de" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">脚本</span></span></span></span><span data-slate-object="text" data-key="1163"><span data-slate-leaf="true" data-offset-key="1163:0" data-first-offset="true"><span data-slate-string="true">或者</span></span></span><span data-slate-object="text" data-key="1164"><span data-slate-leaf="true" data-offset-key="1164:0" data-first-offset="true"><span class="se-4de8cc56" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">插件</span></span></span></span><span data-slate-object="text" data-key="1165"><span data-slate-leaf="true" data-offset-key="1165:0" data-first-offset="true"><span data-slate-string="true">会让单进程浏览器变卡顿外，</span></span></span><span data-slate-object="text" data-key="1166"><span data-slate-leaf="true" data-offset-key="1166:0" data-first-offset="true"><span class="se-9066ff76" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">页面的内存泄漏</span></span></span></span><span data-slate-object="text" data-key="1167"><span data-slate-leaf="true" data-offset-key="1167:0" data-first-offset="true"><span data-slate-string="true">也是单进程变慢的一个重要原因。通常浏览器的内核都是非常复杂的，运行一个复杂点的页面再关闭页面，会存在内存不能完全回收的情况，这样导致的问题是使用时间越长，内存占用越高，浏览器会变得越慢。</span></span></span></div><h3 class="se-fb4b513c" data-slate-type="heading" data-slate-object="block" data-key="1168"><span data-slate-object="text" data-key="1169"><span data-slate-leaf="true" data-offset-key="1169:0" data-first-offset="true"><span data-slate-string="true">问题 3：不安全</span></span></span></h3><div class="se-919d6ca8 " data-slate-type="paragraph" data-slate-object="block" data-key="1170"><span data-slate-object="text" data-key="1171"><span data-slate-leaf="true" data-offset-key="1171:0" data-first-offset="true"><span data-slate-string="true">这里依然可以从插件和页面脚本两个方面来解释该原因。</span></span></span></div><div class="se-b8f7e36f " data-slate-type="paragraph" data-slate-object="block" data-key="1172"><span data-slate-object="text" data-key="1173"><span data-slate-leaf="true" data-offset-key="1173:0" data-first-offset="true"><span data-slate-string="true">插件可以使用 C/C++ 等代码编写，通过插件可以获取到操作系统的任意资源，当你在页面运行一个插件时也就意味着这个插件能完全操作你的电脑。如果是个恶意插件，那么它就可以释放病毒、窃取你的账号密码，引发安全性问题。</span></span></span></div><div class="se-08c1478a " data-slate-type="paragraph" data-slate-object="block" data-key="1174"><span data-slate-object="text" data-key="1175"><span data-slate-leaf="true" data-offset-key="1175:0" data-first-offset="true"><span data-slate-string="true">至于页面脚本，它可以通过浏览器的漏洞来获取系统权限，这些脚本获取系统权限之后也可以对你的电脑做一些恶意的事情，同样也会引发安全问题。</span></span></span></div><div class="se-213d295b " data-slate-type="paragraph" data-slate-object="block" data-key="1176"><span data-slate-object="text" data-key="1177"><span data-slate-leaf="true" data-offset-key="1177:0" data-first-offset="true"><span data-slate-string="true">以上这些就是当时浏览器的特点，不稳定，不流畅，而且不安全。这是一段不堪回首的过去，也许你没有经历过，不过你可以想象一下这样的场景：当你正在用浏览器打开多个页面时，突然某个页面崩溃了或者失去响应，随之而来的是整个浏览器的崩溃或者无响应，然后你发现你给老板写的邮件页面也随之消失了，这时你的心情会不会和页面一样崩溃呢？</span></span></span></div><h2 class="se-b7c3e23c" data-slate-type="heading" data-slate-object="block" data-key="1178"><span data-slate-object="text" data-key="1179"><span data-slate-leaf="true" data-offset-key="1179:0" data-first-offset="true"><span data-slate-string="true">多进程浏览器时代</span></span></span></h2><div class="se-0e9ed342 " data-slate-type="paragraph" data-slate-object="block" data-key="1180"><span data-slate-object="text" data-key="1181"><span data-slate-leaf="true" data-offset-key="1181:0" data-first-offset="true"><span data-slate-string="true">好在现代浏览器已经解决了这些问题，是如何解决的呢？这就得聊聊我们这个“多进程浏览器时代”了。</span></span></span></div><h3 class="se-028801ac" data-slate-type="heading" data-slate-object="block" data-key="1182"><span data-slate-object="text" data-key="1183"><span data-slate-leaf="true" data-offset-key="1183:0" data-first-offset="true"><span data-slate-string="true">早期多进程架构</span></span></span></h3><div class="se-3a91def6 " data-slate-type="paragraph" data-slate-object="block" data-key="1184"><span data-slate-object="text" data-key="1185"><span data-slate-leaf="true" data-offset-key="1185:0" data-first-offset="true"><span data-slate-string="true">你可以先看看下面这张图，这是 2008 年 Chrome 发布时的进程架构。</span></span></span></div><div class="se-731e653d" data-slate-type="image" data-slate-object="block" data-key="1186"><img class="se-e0a82b4f" src="https://static001.geekbang.org/resource/image/cd/60/cdc9215e6c6377fc965b7fac8c3ec960.png"></div><div class="se-d98aaa82 se-1f302919" data-slate-type="paragraph" data-slate-object="block" data-key="1187"><span data-slate-object="text" data-key="1188"><span data-slate-leaf="true" data-offset-key="1188:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">早期 Chrome 进程架构图</span></span></span></span></div><div class="se-13ea02be " data-slate-type="paragraph" data-slate-object="block" data-key="1189"><span data-slate-object="text" data-key="1190"><span data-slate-leaf="true" data-offset-key="1190:0" data-first-offset="true"><span data-slate-string="true">从图中可以看出，Chrome 的页面是运行在单独的渲染进程中的，同时页面里的插件也是运行在单独的插件进程之中，而进程之间是通过 IPC 机制进行通信（如图中虚线部分）。</span></span></span></div><div class="se-2e69360b " data-slate-type="paragraph" data-slate-object="block" data-key="1191"><span data-slate-object="text" data-key="1192"><span data-slate-leaf="true" data-offset-key="1192:0" data-first-offset="true"><span class="se-c7738bdf" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">我们先看看如何解决不稳定的问题。</span></span></span></span><span data-slate-object="text" data-key="1193"><span data-slate-leaf="true" data-offset-key="1193:0" data-first-offset="true"><span data-slate-string="true">由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃，也就是不稳定的问题。</span></span></span></div><div class="se-81669941 " data-slate-type="paragraph" data-slate-object="block" data-key="1194"><span data-slate-object="text" data-key="1195"><span data-slate-leaf="true" data-offset-key="1195:0" data-first-offset="true"><span class="se-faf18bf3" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">接下来再来看看不流畅的问题是如何解决的。</span></span></span></span><span data-slate-object="text" data-key="1196"><span data-slate-leaf="true" data-offset-key="1196:0" data-first-offset="true"><span data-slate-string="true">同样，JavaScript 也是运行在渲染进程中的，所以即使 JavaScript 阻塞了渲染进程，影响到的也只是当前的渲染页面，而并不会影响浏览器和其他页面，因为其他页面的脚本是运行在它们自己的渲染进程中的。所以当我们再在 Chrome 中运行上面那个死循环的脚本时，没有响应的仅仅是当前的页面。</span></span></span></div><div class="se-89bfa361 " data-slate-type="paragraph" data-slate-object="block" data-key="1197"><span data-slate-object="text" data-key="1198"><span data-slate-leaf="true" data-offset-key="1198:0" data-first-offset="true"><span data-slate-string="true">对于内存泄漏的解决方法那就更简单了，因为当关闭一个页面时，整个渲染进程也会被关闭，之后该进程所占用的内存都会被系统回收，这样就轻松解决了浏览器页面的内存泄漏问题。</span></span></span></div><div class="se-2d537a47 " data-slate-type="paragraph" data-slate-object="block" data-key="1199"><span data-slate-object="text" data-key="1200"><span data-slate-leaf="true" data-offset-key="1200:0" data-first-offset="true"><span class="se-bd8c07c0" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">最后我们再来看看上面的两个安全问题是怎么解决的</span></span></span></span><span data-slate-object="text" data-key="1201"><span data-slate-leaf="true" data-offset-key="1201:0" data-first-offset="true"><span data-slate-string="true">。采用多进程架构的额外好处是可以使用</span></span></span><span data-slate-object="text" data-key="1202"><span data-slate-leaf="true" data-offset-key="1202:0" data-first-offset="true"><span class="se-8e1b46c3" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">安全沙箱</span></span></span></span><span data-slate-object="text" data-key="1203"><span data-slate-leaf="true" data-offset-key="1203:0" data-first-offset="true"><span data-slate-string="true">，你可以把沙箱看成是操作系统给进程上了一把锁，沙箱里面的程序可以运行，但是不能在你的硬盘上写入任何数据，也不能在敏感位置读取任何数据，例如你的文档和桌面。Chrome 把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限。</span></span></span></div><div class="se-8ca29045 " data-slate-type="paragraph" data-slate-object="block" data-key="1204"><span data-slate-object="text" data-key="1205"><span data-slate-leaf="true" data-offset-key="1205:0" data-first-offset="true"><span data-slate-string="true">好了，分析完早期的 Chrome 浏览器后，相信你已经了解了浏览器采用多进程架构的必要性。</span></span></span></div><h3 class="se-71a017b5" data-slate-type="heading" data-slate-object="block" data-key="1206"><span data-slate-object="text" data-key="1207"><span data-slate-leaf="true" data-offset-key="1207:0" data-first-offset="true"><span data-slate-string="true">目前多进程架构</span></span></span></h3><div class="se-0089255d " data-slate-type="paragraph" data-slate-object="block" data-key="1208"><span data-slate-object="text" data-key="1209"><span data-slate-leaf="true" data-offset-key="1209:0" data-first-offset="true"><span data-slate-string="true">不过 Chrome 的发展是滚滚向前的，相较之前，目前的架构又有了很多新的变化。我们先看看最新的 Chrome 进程架构，你可以参考下图：</span></span></span></div><div class="se-821ab1b3" data-slate-type="image" data-slate-object="block" data-key="1210"><img class="se-b9d4d2ae" src="https://static001.geekbang.org/resource/image/b6/fc/b61cab529fa31301bde290813b4587fc.png"></div><div class="se-b74f702e se-03b820ae" data-slate-type="paragraph" data-slate-object="block" data-key="1211"><span data-slate-object="text" data-key="1212"><span data-slate-leaf="true" data-offset-key="1212:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">最新的 Chrome 进程架构图</span></span></span></span></div><div class="se-cad83092 " data-slate-type="paragraph" data-slate-object="block" data-key="1213"><span data-slate-object="text" data-key="1214"><span data-slate-leaf="true" data-offset-key="1214:0" data-first-offset="true"><span data-slate-string="true">从图中可以看出，最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。</span></span></span></div><div class="se-90860c3f " data-slate-type="paragraph" data-slate-object="block" data-key="1215"><span data-slate-object="text" data-key="1216"><span data-slate-leaf="true" data-offset-key="1216:0" data-first-offset="true"><span data-slate-string="true">下面我们来逐个分析下这几个进程的功能。</span></span></span></div><div class="se-d0b476d6" data-slate-type="list" data-slate-object="block" data-key="1217"><div class="se-1bb4be95 se-47c20ca7" data-slate-type="list-line" data-slate-object="block" data-key="1218"><span data-slate-object="text" data-key="1219"><span data-slate-leaf="true" data-offset-key="1219:0" data-first-offset="true"><span class="se-0398e375" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">浏览器进程</span></span></span></span><span data-slate-object="text" data-key="1220"><span data-slate-leaf="true" data-offset-key="1220:0" data-first-offset="true"><span data-slate-string="true">。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。</span></span></span></div><div class="se-b7a9eb34 se-781efca5" data-slate-type="list-line" data-slate-object="block" data-key="1221"><span data-slate-object="text" data-key="1222"><span data-slate-leaf="true" data-offset-key="1222:0" data-first-offset="true"><span class="se-8b7fb61f" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">渲染进程</span></span></span></span><span data-slate-object="text" data-key="1223"><span data-slate-leaf="true" data-offset-key="1223:0" data-first-offset="true"><span data-slate-string="true">。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。</span></span></span></div><div class="se-ca9b81b0 se-9daa3198" data-slate-type="list-line" data-slate-object="block" data-key="1224"><span data-slate-object="text" data-key="1225"><span data-slate-leaf="true" data-offset-key="1225:0" data-first-offset="true"><span class="se-16a719c2" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">GPU 进程</span></span></span></span><span data-slate-object="text" data-key="1226"><span data-slate-leaf="true" data-offset-key="1226:0" data-first-offset="true"><span data-slate-string="true">。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。</span></span></span></div><div class="se-be99e259 se-4b2738d6" data-slate-type="list-line" data-slate-object="block" data-key="1227"><span data-slate-object="text" data-key="1228"><span data-slate-leaf="true" data-offset-key="1228:0" data-first-offset="true"><span class="se-8a0baeda" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">网络进程</span></span></span></span><span data-slate-object="text" data-key="1229"><span data-slate-leaf="true" data-offset-key="1229:0" data-first-offset="true"><span data-slate-string="true">。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。</span></span></span></div><div class="se-647fc309 se-8948f027" data-slate-type="list-line" data-slate-object="block" data-key="1230"><span data-slate-object="text" data-key="1231"><span data-slate-leaf="true" data-offset-key="1231:0" data-first-offset="true"><span class="se-08eb6815" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">插件进程</span></span></span></span><span data-slate-object="text" data-key="1232"><span data-slate-leaf="true" data-offset-key="1232:0" data-first-offset="true"><span data-slate-string="true">。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。</span></span></span></div></div><div class="se-c5de7eda " data-slate-type="paragraph" data-slate-object="block" data-key="1233"><span data-slate-object="text" data-key="1234"><span data-slate-leaf="true" data-offset-key="1234:0" data-first-offset="true"><span data-slate-string="true">讲到这里，现在你应该就可以回答文章开头提到的问题了：仅仅打开了 1 个页面，为什么有 4 个进程？因为打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个；如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。</span></span></span></div><div class="se-832d671c " data-slate-type="paragraph" data-slate-object="block" data-key="1235"><span data-slate-object="text" data-key="1236"><span data-slate-leaf="true" data-offset-key="1236:0" data-first-offset="true"><span data-slate-string="true">不过凡事都有两面性，虽然多进程模型提升了浏览器的稳定性、流畅性和安全性，但同样不可避免地带来了一些问题：</span></span></span></div><div class="se-6cd74ac3" data-slate-type="list" data-slate-object="block" data-key="1237"><div class="se-bbbabc9a se-1fe86dc3" data-slate-type="list-line" data-slate-object="block" data-key="1238"><span data-slate-object="text" data-key="1239"><span data-slate-leaf="true" data-offset-key="1239:0" data-first-offset="true"><span class="se-6d5f99da" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">更高的资源占用</span></span></span></span><span data-slate-object="text" data-key="1240"><span data-slate-leaf="true" data-offset-key="1240:0" data-first-offset="true"><span data-slate-string="true">。因为每个进程都会包含公共基础结构的副本（如 JavaScript 运行环境），这就意味着浏览器会消耗更多的内存资源。</span></span></span></div><div class="se-bed4b41e se-2775c3a4" data-slate-type="list-line" data-slate-object="block" data-key="1241"><span data-slate-object="text" data-key="1242"><span data-slate-leaf="true" data-offset-key="1242:0" data-first-offset="true"><span class="se-ddd69338" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">更复杂的体系架构</span></span></span></span><span data-slate-object="text" data-key="1243"><span data-slate-leaf="true" data-offset-key="1243:0" data-first-offset="true"><span data-slate-string="true">。浏览器各模块之间耦合性高、扩展性差等问题，会导致现在的架构已经很难适应新的需求了。</span></span></span></div></div><div class="se-5f8d28e6 " data-slate-type="paragraph" data-slate-object="block" data-key="1244"><span data-slate-object="text" data-key="1245"><span data-slate-leaf="true" data-offset-key="1245:0" data-first-offset="true"><span data-slate-string="true">对于上面这两个问题，Chrome 团队一直在寻求一种弹性方案，既可以解决资源占用高的问题，也可以解决复杂的体系架构的问题。</span></span></span></div><h3 class="se-e4e655fc" data-slate-type="heading" data-slate-object="block" data-key="1246"><span data-slate-object="text" data-key="1247"><span data-slate-leaf="true" data-offset-key="1247:0" data-first-offset="true"><span data-slate-string="true">未来面向服务的架构</span></span></span></h3><div class="se-e50592c9 " data-slate-type="paragraph" data-slate-object="block" data-key="1248"><span data-slate-object="text" data-key="1249"><span data-slate-leaf="true" data-offset-key="1249:0" data-first-offset="true"><span data-slate-string="true">为了解决这些问题，在 2016 年，Chrome 官方团队使用“</span></span></span><span data-slate-object="text" data-key="1250"><span data-slate-leaf="true" data-offset-key="1250:0" data-first-offset="true"><span class="se-6a9a5e9c" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">面向服务的架构</span></span></span></span><span data-slate-object="text" data-key="1251"><span data-slate-leaf="true" data-offset-key="1251:0" data-first-offset="true"><span data-slate-string="true">”（Services Oriented Architecture，简称 </span></span></span><span data-slate-object="text" data-key="1252"><span data-slate-leaf="true" data-offset-key="1252:0" data-first-offset="true"><span class="se-60aa75d6" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">SOA</span></span></span></span><span data-slate-object="text" data-key="1253"><span data-slate-leaf="true" data-offset-key="1253:0" data-first-offset="true"><span data-slate-string="true">）的思想设计了新的 Chrome 架构。也就是说 Chrome 整体架构会朝向现代操作系统所采用的“面向服务的架构” 方向发展，原来的各种模块会被重构成独立的服务（Service），每个服务（Service）都可以在独立的进程中运行，访问服务（Service）必须使用定义好的接口，通过 IPC 来通信，从而</span></span></span><span data-slate-object="text" data-key="1254"><span data-slate-leaf="true" data-offset-key="1254:0" data-first-offset="true"><span class="se-49c72b13" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">构建一个更内聚、松耦合、易于维护和扩展的系统</span></span></span></span><span data-slate-object="text" data-key="1255"><span data-slate-leaf="true" data-offset-key="1255:0" data-first-offset="true"><span data-slate-string="true">，更好实现 Chrome 简单、稳定、高速、安全的目标。如果你对面向服务的架构感兴趣，你可以去网上搜索下资料，这里就不过多介绍了。</span></span></span></div><div class="se-0cf72842 " data-slate-type="paragraph" data-slate-object="block" data-key="1256"><span data-slate-object="text" data-key="1257"><span data-slate-leaf="true" data-offset-key="1257:0" data-first-offset="true"><span data-slate-string="true">Chrome 最终要把 UI、数据库、文件、设备、网络等模块重构为基础服务，类似操作系统底层服务，下面是 Chrome“面向服务的架构”的进程模型图：</span></span></span></div><div class="se-06eb633c" data-slate-type="image" data-slate-object="block" data-key="1258"><img class="se-760cb053" src="https://static001.geekbang.org/resource/image/32/2a/329658fe821252db47b0964037a1de2a.png"></div><div class="se-a8c5d75d se-b15c6e9e" data-slate-type="paragraph" data-slate-object="block" data-key="1259"><span data-slate-object="text" data-key="1260"><span data-slate-leaf="true" data-offset-key="1260:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">Chrome“面向服务的架构”进程模型图</span></span></span></span></div><div class="se-0365e7c4 " data-slate-type="paragraph" data-slate-object="block" data-key="1261"><span data-slate-object="text" data-key="1262"><span data-slate-leaf="true" data-offset-key="1262:0" data-first-offset="true"><span data-slate-string="true">目前 Chrome 正处在老的架构向服务化架构过渡阶段，这将是一个漫长的迭代过程。</span></span></span></div><div class="se-f61507b8 " data-slate-type="paragraph" data-slate-object="block" data-key="1263"><span data-slate-object="text" data-key="1264"><span data-slate-leaf="true" data-offset-key="1264:0" data-first-offset="true"><span data-slate-string="true">Chrome 正在逐步构建 Chrome 基础服务（Chrome Foundation Service），如果你认为 Chrome 是“便携式操作系统”，那么 Chrome 基础服务便可以被视为该操作系统的“基础”系统服务层。</span></span></span></div><div class="se-82c4ce85 " data-slate-type="paragraph" data-slate-object="block" data-key="1265"><span data-slate-object="text" data-key="1266"><span data-slate-leaf="true" data-offset-key="1266:0" data-first-offset="true"><span data-slate-string="true">同时 Chrome 还提供灵活的弹性架构，在强大性能设备上会以多进程的方式运行基础服务，但是如果在资源受限的设备上（如下图），Chrome 会将很多服务整合到一个进程中，从而节省内存占用。</span></span></span></div><div class="se-324bb652" data-slate-type="image" data-slate-object="block" data-key="1267"><img class="se-328788ce" src="https://static001.geekbang.org/resource/image/a9/76/a9ba86d7b03263fa3997d3733d958176.png"></div><div class="se-0dcd4d9c se-6bfbac03" data-slate-type="paragraph" data-slate-object="block" data-key="1268"><span data-slate-object="text" data-key="1269"><span data-slate-leaf="true" data-offset-key="1269:0" data-first-offset="true"><span class="se-dc7232b6" data-slate-type="secondary" data-slate-object="mark"><span data-slate-string="true">在资源不足的设备上，将服务合并到浏览器进程中</span></span></span></span></div><h2 class="se-aef12e0d" data-slate-type="heading" data-slate-object="block" data-key="1270"><span data-slate-object="text" data-key="1271"><span data-slate-leaf="true" data-offset-key="1271:0" data-first-offset="true"><span data-slate-string="true">总结</span></span></span></h2><div class="se-2e7e20b8 " data-slate-type="paragraph" data-slate-object="block" data-key="1272"><span data-slate-object="text" data-key="1273"><span data-slate-leaf="true" data-offset-key="1273:0" data-first-offset="true"><span data-slate-string="true">好了，今天就到这里，下面我来简要梳理并总结今天的内容。</span></span></span></div><div class="se-507a2b38 " data-slate-type="paragraph" data-slate-object="block" data-key="1274"><span data-slate-object="text" data-key="1275"><span data-slate-leaf="true" data-offset-key="1275:0" data-first-offset="true"><span data-slate-string="true">本文我主要是从 Chrome 进程架构的视角，分析了浏览器的进化史。</span></span></span></div><div class="se-1b0c1ab2 " data-slate-type="paragraph" data-slate-object="block" data-key="1276"><span data-slate-object="text" data-key="1277"><span data-slate-leaf="true" data-offset-key="1277:0" data-first-offset="true"><span data-slate-string="true">最初的浏览器都是单进程的，它们不稳定、不流畅且不安全，之后出现了 Chrome，创造性地引入了多进程架构，并解决了这些遗留问题。随后 Chrome 试图应用到更多业务场景，如移动设备、VR、视频等，为了支持这些场景，Chrome 的架构体系变得越来越复杂，这种架构的复杂性倒逼 Chrome 开发团队必须进行架构的重构，最终 Chrome 团队选择了面向服务架构（SOA）形式，这也是 Chrome 团队现阶段的一个主要任务。</span></span></span></div><div class="se-7f38b9bb " data-slate-type="paragraph" data-slate-object="block" data-key="1278"><span data-slate-object="text" data-key="1279"><span data-slate-leaf="true" data-offset-key="1279:0" data-first-offset="true"><span data-slate-string="true">鉴于目前架构的复杂性，要完整过渡到面向服务架构，估计还需要好几年时间才能完成。不过 Chrome 开发是一个渐进的过程，新的特性会一点点加入进来，这也意味着我们随时能看到 Chrome 新的变化。</span></span></span></div><div class="se-21a9ae77 " data-slate-type="paragraph" data-slate-object="block" data-key="1280"><span data-slate-object="text" data-key="1281"><span data-slate-leaf="true" data-offset-key="1281:0" data-first-offset="true"><span data-slate-string="true">总体说来，</span></span></span><span data-slate-object="text" data-key="1282"><span data-slate-leaf="true" data-offset-key="1282:0" data-first-offset="true"><span class="se-5b3b5329" data-slate-type="bold" data-slate-object="mark"><span data-slate-string="true">Chrome 是以一个非常快速的速度在进化，越来越多的业务和应用都逐渐转至浏览器来开发，身为开发人员，我们不能坐视不管，而应该紧跟其步伐，收获这波技术红利</span></span></span></span><span data-slate-object="text" data-key="1283"><span data-slate-leaf="true" data-offset-key="1283:0" data-first-offset="true"><span data-slate-string="true">。</span></span></span></div><h2 class="se-7248d33a" data-slate-type="heading" data-slate-object="block" data-key="1284"><span data-slate-object="text" data-key="1285"><span data-slate-leaf="true" data-offset-key="1285:0" data-first-offset="true"><span data-slate-string="true">思考时间</span></span></span></h2><div class="se-11489868 " data-slate-type="paragraph" data-slate-object="block" data-key="1286"><span data-slate-object="text" data-key="1287"><span data-slate-leaf="true" data-offset-key="1287:0" data-first-offset="true"><span data-slate-string="true">最后，给你留个思考题：回顾浏览器的进化路线，你认为推动浏览器发展的主要动力是什么？</span></span></span></div><div class="se-e799b61d " data-slate-type="paragraph" data-slate-object="block" data-key="1288"><span data-slate-object="text" data-key="1289"><span data-slate-leaf="true" data-offset-key="1289:0" data-first-offset="true"><span data-slate-string="true">欢迎在留言区与我分享你的想法，也欢迎你在留言区记录你的思考过程。感谢阅读，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友。</span></span></span></div><div class="se-a1624efd" data-slate-type="image" data-slate-object="block" data-key="1290"><img class="se-f114a503" src="https://static001.geekbang.org/resource/image/3f/cb/3f4d5bec2d5c89600b4628581144d8cb.jpg"></div></div>
来源：https://www.cnblogs.com/zzd0916/p/11855920.html