[[328791]]

無論你是想要設(shè)計(jì)高性能 Web 應(yīng)用，還是要優(yōu)化現(xiàn)有的 Web 應(yīng)用，你都需要了解瀏覽器中的網(wǎng)絡(luò)流程、頁面渲染過程，JavaScript 執(zhí)行流程，以及 Web 安全理論，而這些功能是分散在瀏覽器的各個(gè)功能組件中的，比較多、比較散，要怎樣學(xué)習(xí)才能掌握呢?通過瀏覽器的多進(jìn)程架構(gòu)的學(xué)習(xí)，你就可以把這些分散的知識點(diǎn)串起來，組成一張網(wǎng)，從而讓自己能站在更高的維度去理解 Web 應(yīng)用。

因此，學(xué)習(xí)瀏覽器的多進(jìn)程架構(gòu)是很有必要的。需要說明的是，我所有的分析都是基于 Chrome 瀏覽器的。那么多瀏覽器，為什么偏偏選擇 Chrome 瀏覽器呢?因?yàn)?Chrome、微軟的 Edge 以及國內(nèi)的大部分主流瀏覽器，都是基于 Chromium 二次開發(fā)而來;而 Chrome 是 Google 的官方發(fā)行版，特性和 Chromium 基本一樣，只存在一些產(chǎn)品層面差異;再加上 Chrome 是目前世界上使用率最高的瀏覽器，所以Chrome 最具代表性。

在開始之前，我們一起看下，Chrome 打開一個(gè)頁面需要啟動(dòng)多少進(jìn)程?你可以點(diǎn)擊 Chrome 瀏覽器右上角的“選項(xiàng)”菜單，選擇“更多工具”子菜單，點(diǎn)擊“任務(wù)管理器”，這將打開 Chrome 的任務(wù)管理器的窗口，如下圖：

Chrome 的任務(wù)管理器窗口

和 Windows 任務(wù)管理器一樣，Chrome 任務(wù)管理器也是用來展示運(yùn)行中 Chrome 使用的進(jìn)程信息的。從圖中可以看到，Chrome 啟動(dòng)了 4 個(gè)進(jìn)程，你也許會好奇，只是打開了 1 個(gè)頁面，為什么要啟動(dòng)這么多進(jìn)程呢?

在解答這個(gè)問題之前，我們需要了解一下進(jìn)程的概念，不過由于好多人容易把進(jìn)程和線程的概念混淆，從而影響后續(xù)其他概念的理解，所以這里我就將這兩個(gè)概念以及它們之間的關(guān)系一并為你講解下。

進(jìn)程和線程

不過，在介紹進(jìn)程和線程之前，我需要先講解下什么是并行處理，因?yàn)槿绻憷斫饬瞬⑿刑幚淼母拍?，那么再理解進(jìn)程和線程之間的關(guān)系就會變得輕松許多。

什么是并行處理

計(jì)算機(jī)中的并行處理就是同一時(shí)刻處理多個(gè)任務(wù)，比如我們要計(jì)算下面這三個(gè)表達(dá)式的值，并顯示出結(jié)果。

A = 1+2B = 20/5C = 7*8復(fù)制代碼

在編寫代碼的時(shí)候，我們可以把這個(gè)過程拆分為四個(gè)任務(wù)：

• 任務(wù) 1 是計(jì)算 A=1+2;
• 任務(wù) 2 是計(jì)算 B=20/5;
• 任務(wù) 3 是計(jì)算 C=7*8;
• 任務(wù) 4 是顯示最后計(jì)算的結(jié)果。

正常情況下程序可以使用單線程來處理，也就是分四步按照順序分別執(zhí)行這四個(gè)任務(wù)。

如果采用多線程，會怎么樣呢?我們只需分“兩步走”：第一步，使用三個(gè)線程同時(shí)執(zhí)行前三個(gè)任務(wù);第二步，再執(zhí)行第四個(gè)顯示任務(wù)。

通過對比分析，你會發(fā)現(xiàn)用單線程執(zhí)行需要四步，而使用多線程只需要兩步。因此，使用并行處理能大大提升性能。

線程 VS 進(jìn)程

多線程可以并行處理任務(wù)，但是線程是不能單獨(dú)存在的，它是由進(jìn)程來啟動(dòng)和管理的。那什么又是進(jìn)程呢?

一個(gè)進(jìn)程就是一個(gè)程序的運(yùn)行實(shí)例。詳細(xì)解釋就是，啟動(dòng)一個(gè)程序的時(shí)候，操作系統(tǒng)會為該程序創(chuàng)建一塊內(nèi)存，用來存放代碼、運(yùn)行中的數(shù)據(jù)和一個(gè)執(zhí)行任務(wù)的主線程，我們把這樣的一個(gè)運(yùn)行環(huán)境叫進(jìn)程。

為了讓你更好地理解上述計(jì)算過程，我畫了下面這張對比圖：

單線程與多線程的進(jìn)程對比圖

從圖中可以看到，線程是依附于進(jìn)程的，而進(jìn)程中使用多線程并行處理能提升運(yùn)算效率。

總結(jié)來說，進(jìn)程和線程之間的關(guān)系有以下 4 個(gè)特點(diǎn)。

1. 進(jìn)程中的任意一線程執(zhí)行出錯(cuò)，都會導(dǎo)致整個(gè)進(jìn)程的崩潰。

我們可以模擬以下場景：

• A = 1+2B = 20/0C = 7*8復(fù)制代碼

我把上述三個(gè)表達(dá)式稍作修改，在計(jì)算 B 的值的時(shí)候，我把表達(dá)式的分母改成 0，當(dāng)線程執(zhí)行到 B = 20/0 時(shí)，由于分母為 0，線程會執(zhí)行出錯(cuò)，這樣就會導(dǎo)致整個(gè)進(jìn)程的崩潰，當(dāng)然另外兩個(gè)線程執(zhí)行的結(jié)果也沒有了。

2. 線程之間共享進(jìn)程中的數(shù)據(jù)。

如下圖所示，線程之間可以對進(jìn)程的公共數(shù)據(jù)進(jìn)行讀寫操作。

線程之間共享進(jìn)程中的數(shù)據(jù)示意圖

從上圖可以看出，線程 1、線程 2、線程 3 分別把執(zhí)行的結(jié)果寫入 A、B、C 中，然后線程 2 繼續(xù)從 A、B、C 中讀取數(shù)據(jù)，用來顯示執(zhí)行結(jié)果。

3. 當(dāng)一個(gè)進(jìn)程關(guān)閉之后，操作系統(tǒng)會回收進(jìn)程所占用的內(nèi)存。

當(dāng)一個(gè)進(jìn)程退出時(shí)，操作系統(tǒng)會回收該進(jìn)程所申請的所有資源;即使其中任意線程因?yàn)椴僮鞑划?dāng)導(dǎo)致內(nèi)存泄漏，當(dāng)進(jìn)程退出時(shí)，這些內(nèi)存也會被正確回收。

比如之前的 IE 瀏覽器，支持很多插件，而這些插件很容易導(dǎo)致內(nèi)存泄漏，這意味著只要瀏覽器開著，內(nèi)存占用就有可能會越來越多，但是當(dāng)關(guān)閉瀏覽器進(jìn)程時(shí)，這些內(nèi)存就都會被系統(tǒng)回收掉。

4. 進(jìn)程之間的內(nèi)容相互隔離。

進(jìn)程隔離是為保護(hù)操作系統(tǒng)中進(jìn)程互不干擾的技術(shù)，每一個(gè)進(jìn)程只能訪問自己占有的數(shù)據(jù)，也就避免出現(xiàn)進(jìn)程 A 寫入數(shù)據(jù)到進(jìn)程 B 的情況。正是因?yàn)檫M(jìn)程之間的數(shù)據(jù)是嚴(yán)格隔離的，所以一個(gè)進(jìn)程如果崩潰了，或者掛起了，是不會影響到其他進(jìn)程的。如果進(jìn)程之間需要進(jìn)行數(shù)據(jù)的通信，這時(shí)候，就需要使用用于進(jìn)程間通信(IPC)的機(jī)制了。

單進(jìn)程瀏覽器時(shí)代

在了解了進(jìn)程和線程之后，我們再來一起看下單進(jìn)程瀏覽器的架構(gòu)。顧名思義，單進(jìn)程瀏覽器是指瀏覽器的所有功能模塊都是運(yùn)行在同一個(gè)進(jìn)程里，這些模塊包含了網(wǎng)絡(luò)、插件、JavaScript 運(yùn)行環(huán)境、渲染引擎和頁面等。其實(shí)早在 2007 年之前，市面上瀏覽器都是單進(jìn)程的。單進(jìn)程瀏覽器的架構(gòu)如下圖所示：

單進(jìn)程瀏覽器架構(gòu)示意圖

如此多的功能模塊運(yùn)行在一個(gè)進(jìn)程里，是導(dǎo)致單進(jìn)程瀏覽器不穩(wěn)定、不流暢和不安全的一個(gè)主要因素。下面我就來一一分析下出現(xiàn)這些問題的原因。

問題 1：不穩(wěn)定

早期瀏覽器需要借助于插件來實(shí)現(xiàn)諸如 Web 視頻、Web 游戲等各種強(qiáng)大的功能，但是插件是最容易出問題的模塊，并且還運(yùn)行在瀏覽器進(jìn)程之中，所以一個(gè)插件的意外崩潰會引起整個(gè)瀏覽器的崩潰。

除了插件之外，渲染引擎模塊也是不穩(wěn)定的，通常一些復(fù)雜的 JavaScript 代碼就有可能引起渲染引擎模塊的崩潰。和插件一樣，渲染引擎的崩潰也會導(dǎo)致整個(gè)瀏覽器的崩潰。

問題 2：不流暢

從上面的“單進(jìn)程瀏覽器架構(gòu)示意圖”可以看出，所有頁面的渲染模塊、JavaScript 執(zhí)行環(huán)境以及插件都是運(yùn)行在同一個(gè)線程中的，這就意味著同一時(shí)刻只能有一個(gè)模塊可以執(zhí)行。

比如，下面這個(gè)無限循環(huán)的腳本：

function freeze() { while (1) {     console.log("freeze");  }}freeze();復(fù)制代碼 

如果讓這個(gè)腳本運(yùn)行在一個(gè)單進(jìn)程瀏覽器的頁面里，你感覺會發(fā)生什么?

因?yàn)檫@個(gè)腳本是無限循環(huán)的，所以當(dāng)其執(zhí)行時(shí)，它會獨(dú)占整個(gè)線程，這樣導(dǎo)致其他運(yùn)行在該線程中的模塊就沒有機(jī)會被執(zhí)行。因?yàn)闉g覽器中所有的頁面都運(yùn)行在該線程中，所以這些頁面都沒有機(jī)會去執(zhí)行任務(wù)，這樣就會導(dǎo)致整個(gè)瀏覽器失去響應(yīng)，變卡頓。這塊內(nèi)容要繼續(xù)往深的地方講就到頁面的事件循環(huán)系統(tǒng)了，具體相關(guān)內(nèi)容我會在后面的模塊中為你深入講解。

除了上述腳本或者插件會讓單進(jìn)程瀏覽器變卡頓外，頁面的內(nèi)存泄漏也是單進(jìn)程變慢的一個(gè)重要原因。通常瀏覽器的內(nèi)核都是非常復(fù)雜的，運(yùn)行一個(gè)復(fù)雜點(diǎn)的頁面再關(guān)閉頁面，會存在內(nèi)存不能完全回收的情況，這樣導(dǎo)致的問題是使用時(shí)間越長，內(nèi)存占用越高，瀏覽器會變得越慢。

問題 3：不安全

這里依然可以從插件和頁面腳本兩個(gè)方面來解釋該原因。

插件可以使用 C/C++ 等代碼編寫，通過插件可以獲取到操作系統(tǒng)的任意資源，當(dāng)你在頁面運(yùn)行一個(gè)插件時(shí)也就意味著這個(gè)插件能完全操作你的電腦。如果是個(gè)惡意插件，那么它就可以釋放病毒、竊取你的賬號密碼，引發(fā)安全性問題。

至于頁面腳本，它可以通過瀏覽器的漏洞來獲取系統(tǒng)權(quán)限，這些腳本獲取系統(tǒng)權(quán)限之后也可以對你的電腦做一些惡意的事情，同樣也會引發(fā)安全問題。

以上這些就是當(dāng)時(shí)瀏覽器的特點(diǎn)，不穩(wěn)定，不流暢，而且不安全。這是一段不堪回首的過去，也許你沒有經(jīng)歷過，不過你可以想象一下這樣的場景：當(dāng)你正在用瀏覽器打開多個(gè)頁面時(shí)，突然某個(gè)頁面崩潰了或者失去響應(yīng)，隨之而來的是整個(gè)瀏覽器的崩潰或者無響應(yīng)，然后你發(fā)現(xiàn)你給老板寫的郵件頁面也隨之消失了，這時(shí)你的心情會不會和頁面一樣崩潰呢?

多進(jìn)程瀏覽器時(shí)代

好在現(xiàn)代瀏覽器已經(jīng)解決了這些問題，是如何解決的呢?這就得聊聊我們這個(gè)“多進(jìn)程瀏覽器時(shí)代”了。

早期多進(jìn)程架構(gòu)

你可以先看看下面這張圖，這是 2008 年 Chrome 發(fā)布時(shí)的進(jìn)程架構(gòu)。

早期 Chrome 進(jìn)程架構(gòu)圖

從圖中可以看出，Chrome 的頁面是運(yùn)行在單獨(dú)的渲染進(jìn)程中的，同時(shí)頁面里的插件也是運(yùn)行在單獨(dú)的插件進(jìn)程之中，而進(jìn)程之間是通過 IPC 機(jī)制進(jìn)行通信(如圖中虛線部分)。

我們先看看如何解決不穩(wěn)定的問題。由于進(jìn)程是相互隔離的，所以當(dāng)一個(gè)頁面或者插件崩潰時(shí)，影響到的僅僅是當(dāng)前的頁面進(jìn)程或者插件進(jìn)程，并不會影響到瀏覽器和其他頁面，這就完美地解決了頁面或者插件的崩潰會導(dǎo)致整個(gè)瀏覽器崩潰，也就是不穩(wěn)定的問題。

接下來再來看看不流暢的問題是如何解決的。同樣，JavaScript 也是運(yùn)行在渲染進(jìn)程中的，所以即使 JavaScript 阻塞了渲染進(jìn)程，影響到的也只是當(dāng)前的渲染頁面，而并不會影響瀏覽器和其他頁面，因?yàn)槠渌撁娴哪_本是運(yùn)行在它們自己的渲染進(jìn)程中的。所以當(dāng)我們再在 Chrome 中運(yùn)行上面那個(gè)死循環(huán)的腳本時(shí)，沒有響應(yīng)的僅僅是當(dāng)前的頁面。

對于內(nèi)存泄漏的解決方法那就更簡單了，因?yàn)楫?dāng)關(guān)閉一個(gè)頁面時(shí)，整個(gè)渲染進(jìn)程也會被關(guān)閉，之后該進(jìn)程所占用的內(nèi)存都會被系統(tǒng)回收，這樣就輕松解決了瀏覽器頁面的內(nèi)存泄漏問題。

最后我們再來看看上面的兩個(gè)安全問題是怎么解決的。采用多進(jìn)程架構(gòu)的額外好處是可以使用安全沙箱，你可以把沙箱看成是操作系統(tǒng)給進(jìn)程上了一把鎖，沙箱里面的程序可以運(yùn)行，但是不能在你的硬盤上寫入任何數(shù)據(jù)，也不能在敏感位置讀取任何數(shù)據(jù)，例如你的文檔和桌面。Chrome 把插件進(jìn)程和渲染進(jìn)程鎖在沙箱里面，這樣即使在渲染進(jìn)程或者插件進(jìn)程里面執(zhí)行了惡意程序，惡意程序也無法突破沙箱去獲取系統(tǒng)權(quán)限。

好了，分析完早期的 Chrome 瀏覽器后，相信你已經(jīng)了解了瀏覽器采用多進(jìn)程架構(gòu)的必要性。

目前多進(jìn)程架構(gòu)

不過 Chrome 的發(fā)展是滾滾向前的，相較之前，目前的架構(gòu)又有了很多新的變化。我們先看看最新的 Chrome 進(jìn)程架構(gòu)，你可以參考下圖：

最新的 Chrome 進(jìn)程架構(gòu)圖

從圖中可以看出，最新的 Chrome 瀏覽器包括：1 個(gè)瀏覽器(Browser)主進(jìn)程、1 個(gè) GPU 進(jìn)程、1 個(gè)網(wǎng)絡(luò)(NetWork)進(jìn)程、多個(gè)渲染進(jìn)程和多個(gè)插件進(jìn)程。

下面我們來逐個(gè)分析下這幾個(gè)進(jìn)程的功能。

• 瀏覽器進(jìn)程。主要負(fù)責(zé)界面顯示、用戶交互、子進(jìn)程管理，同時(shí)提供存儲等功能。
• 渲染進(jìn)程。核心任務(wù)是將 HTML、CSS 和 JavaScript 轉(zhuǎn)換為用戶可以與之交互的網(wǎng)頁，排版引擎 Blink 和 JavaScript 引擎 V8 都是運(yùn)行在該進(jìn)程中，默認(rèn)情況下，Chrome 會為每個(gè) Tab 標(biāo)簽創(chuàng)建一個(gè)渲染進(jìn)程。出于安全考慮，渲染進(jìn)程都是運(yùn)行在沙箱模式下。
• GPU 進(jìn)程。其實(shí)，Chrome 剛開始發(fā)布的時(shí)候是沒有 GPU 進(jìn)程的。而 GPU 的使用初衷是為了實(shí)現(xiàn) 3D CSS 的效果，只是隨后網(wǎng)頁、Chrome 的 UI 界面都選擇采用 GPU 來繪制，這使得 GPU 成為瀏覽器普遍的需求。最后，Chrome 在其多進(jìn)程架構(gòu)上也引入了 GPU 進(jìn)程。
• 網(wǎng)絡(luò)進(jìn)程。主要負(fù)責(zé)頁面的網(wǎng)絡(luò)資源加載，之前是作為一個(gè)模塊運(yùn)行在瀏覽器進(jìn)程里面的，直至最近才獨(dú)立出來，成為一個(gè)單獨(dú)的進(jìn)程。
• 插件進(jìn)程。主要是負(fù)責(zé)插件的運(yùn)行，因插件易崩潰，所以需要通過插件進(jìn)程來隔離，以保證插件進(jìn)程崩潰不會對瀏覽器和頁面造成影響。

講到這里，現(xiàn)在你應(yīng)該就可以回答文章開頭提到的問題了：僅僅打開了 1 個(gè)頁面，為什么有 4 個(gè)進(jìn)程?因?yàn)榇蜷_ 1 個(gè)頁面至少需要 1 個(gè)網(wǎng)絡(luò)進(jìn)程、1 個(gè)瀏覽器進(jìn)程、1 個(gè) GPU 進(jìn)程以及 1 個(gè)渲染進(jìn)程，共 4 個(gè);如果打開的頁面有運(yùn)行插件的話，還需要再加上 1 個(gè)插件進(jìn)程。

不過凡事都有兩面性，雖然多進(jìn)程模型提升了瀏覽器的穩(wěn)定性、流暢性和安全性，但同樣不可避免地帶來了一些問題：

• 更高的資源占用。因?yàn)槊總€(gè)進(jìn)程都會包含公共基礎(chǔ)結(jié)構(gòu)的副本(如 JavaScript 運(yùn)行環(huán)境)，這就意味著瀏覽器會消耗更多的內(nèi)存資源。
• 更復(fù)雜的體系架構(gòu)。瀏覽器各模塊之間耦合性高、擴(kuò)展性差等問題，會導(dǎo)致現(xiàn)在的架構(gòu)已經(jīng)很難適應(yīng)新的需求了。

對于上面這兩個(gè)問題，Chrome 團(tuán)隊(duì)一直在尋求一種彈性方案，既可以解決資源占用高的問題，也可以解決復(fù)雜的體系架構(gòu)的問題。

未來面向服務(wù)的架構(gòu)

為了解決這些問題，在 2016 年，Chrome 官方團(tuán)隊(duì)使用“面向服務(wù)的架構(gòu)”(Services Oriented Architecture，簡稱SOA)的思想設(shè)計(jì)了新的 Chrome 架構(gòu)。也就是說 Chrome 整體架構(gòu)會朝向現(xiàn)代操作系統(tǒng)所采用的“面向服務(wù)的架構(gòu)” 方向發(fā)展，原來的各種模塊會被重構(gòu)成獨(dú)立的服務(wù)(Service)，每個(gè)服務(wù)(Service)都可以在獨(dú)立的進(jìn)程中運(yùn)行，訪問服務(wù)(Service)必須使用定義好的接口，通過 IPC 來通信，從而構(gòu)建一個(gè)更內(nèi)聚、松耦合、易于維護(hù)和擴(kuò)展的系統(tǒng)，更好實(shí)現(xiàn) Chrome 簡單、穩(wěn)定、高速、安全的目標(biāo)。如果你對面向服務(wù)的架構(gòu)感興趣，你可以去網(wǎng)上搜索下資料，這里就不過多介紹了。

Chrome 最終要把 UI、數(shù)據(jù)庫、文件、設(shè)備、網(wǎng)絡(luò)等模塊重構(gòu)為基礎(chǔ)服務(wù)，類似操作系統(tǒng)底層服務(wù)，下面是 Chrome“面向服務(wù)的架構(gòu)”的進(jìn)程模型圖：

Chrome“面向服務(wù)的架構(gòu)”進(jìn)程模型圖

目前 Chrome 正處在老的架構(gòu)向服務(wù)化架構(gòu)過渡階段，這將是一個(gè)漫長的迭代過程。

Chrome 正在逐步構(gòu)建 Chrome 基礎(chǔ)服務(wù)(Chrome Foundation Service)，如果你認(rèn)為 Chrome 是“便攜式操作系統(tǒng)”，那么 Chrome 基礎(chǔ)服務(wù)便可以被視為該操作系統(tǒng)的“基礎(chǔ)”系統(tǒng)服務(wù)層。

同時(shí) Chrome 還提供靈活的彈性架構(gòu)，在強(qiáng)大性能設(shè)備上會以多進(jìn)程的方式運(yùn)行基礎(chǔ)服務(wù)，但是如果在資源受限的設(shè)備上(如下圖)，Chrome 會將很多服務(wù)整合到一個(gè)進(jìn)程中，從而節(jié)省內(nèi)存占用。

在資源不足的設(shè)備上，將服務(wù)合并到瀏覽器進(jìn)程中

總結(jié)

好了，今天就到這里，下面我來簡要梳理并總結(jié)今天的內(nèi)容。

本文我主要是從 Chrome 進(jìn)程架構(gòu)的視角，分析了瀏覽器的進(jìn)化史。

最初的瀏覽器都是單進(jìn)程的，它們不穩(wěn)定、不流暢且不安全，之后出現(xiàn)了 Chrome，創(chuàng)造性地引入了多進(jìn)程架構(gòu)，并解決了這些遺留問題。隨后 Chrome 試圖應(yīng)用到更多業(yè)務(wù)場景，如移動(dòng)設(shè)備、VR、視頻等，為了支持這些場景，Chrome 的架構(gòu)體系變得越來越復(fù)雜，這種架構(gòu)的復(fù)雜性倒逼 Chrome 開發(fā)團(tuán)隊(duì)必須進(jìn)行架構(gòu)的重構(gòu)，最終 Chrome 團(tuán)隊(duì)選擇了面向服務(wù)架構(gòu)(SOA)形式，這也是 Chrome 團(tuán)隊(duì)現(xiàn)階段的一個(gè)主要任務(wù)。

鑒于目前架構(gòu)的復(fù)雜性，要完整過渡到面向服務(wù)架構(gòu)，估計(jì)還需要好幾年時(shí)間才能完成。不過 Chrome 開發(fā)是一個(gè)漸進(jìn)的過程，新的特性會一點(diǎn)點(diǎn)加入進(jìn)來，這也意味著我們隨時(shí)能看到 Chrome 新的變化。

總體說來，Chrome 是以一個(gè)非常快速的速度在進(jìn)化，越來越多的業(yè)務(wù)和應(yīng)用都逐漸轉(zhuǎn)至瀏覽器來開發(fā)，身為開發(fā)人員，我們不能坐視不管，而應(yīng)該緊跟其步伐，收獲這波技術(shù)紅利。

思考時(shí)間

最后，給你留個(gè)思考題：回顧瀏覽器的進(jìn)化路線，你認(rèn)為推動(dòng)瀏覽器發(fā)展的主要?jiǎng)恿κ鞘裁?