Chrome是程序員的標(biāo)配了，而從全球的市場份額來看，它在全球市場的份額已經(jīng)超過 60%。

在 Chrome 10周年之際，官方發(fā)布了一個系列文章，用圖解的方式，很清晰的講解了現(xiàn)代瀏覽器的運行原理，Chrome之所以這么好用，這么快，是有原因的。本文是系列文章的第一篇，主要講解的是 Chrome 的多進程架構(gòu)，配圖很有意思，也很好理解。

CPU、GPU、內(nèi)存和多進程架構(gòu)

我們將通過4篇博客，來介紹 Chrome 瀏覽器從高級架構(gòu)到渲染管道的具體細節(jié)。如果你想知道，瀏覽器是如何將你的代碼轉(zhuǎn)換為功能性網(wǎng)站；或者你想確定，為什么可以使用特定技術(shù)能提高性能，那么本系列適合你。

作為本系列的第1部分，我們將介紹關(guān)鍵技術(shù)名詞和 Chrome 的多進程架構(gòu)。

1.CPU（中央處理器）

CPU(Central Procession Unit) 可以被認為是你計算機的大腦。CPU 核心，就像辦公室工作人員，可以逐個處理交代給他們的許多不同的任務(wù)。它可以處理從數(shù)學(xué)到藝術(shù)的所有事情，并把處理結(jié)果返回出去。曾經(jīng)大多數(shù) CPU 都是單核，但在現(xiàn)代硬件中，你通常會操作的是多核 CPU，多核 CPU 為你的手機和計算機提供更強的計算能力。

2.GPU

GPU（Graphics Processing Unit）是計算機的另一部分。與 CPU 不同，GPU 更擅長處理簡單任務(wù)，同時可以跨多個核心。

顧名思義，它最初是為處理圖形而誕生的。這就是為什么在圖形處理中，當(dāng)我們說到 “使用 GPU” 或者 “GPU 支持” 的時候，通常就在說快速渲染和平滑交互。近年來，隨著 GPU 加速發(fā)展，僅在 GPU 上就可以實現(xiàn)越來越多的計算任務(wù)。

如上圖所示，三層計算機體系結(jié)構(gòu)中，硬件位于底部，操作系統(tǒng)位于中間，應(yīng)用程序則在最上層。

當(dāng)你在計算機或手機上啟動應(yīng)用程序時，CPU 和 GPU 就是為應(yīng)用程序提供有力的支持。通常，應(yīng)用程序使用操作系統(tǒng)提供的機制在 CPU 和 GPU 上運行。

Process 和 Thread 上執(zhí)行的程序

在深入瀏覽器架構(gòu)之前，要掌握的另一個概念是 Process（進程） 和 Thread（線程）。

進程可以理解是應(yīng)用程序的執(zhí)行程序，線程則是存在于進程內(nèi)部，并執(zhí)行其進程程序的部分功能。

進程作為線程的邊界，而線程就像游動在進程中的魚。

進程可以通過操作系統(tǒng)，啟動另一個進程來執(zhí)行不同的任務(wù)。此時，系統(tǒng)將為新進程分配不同的內(nèi)存。如果兩個進程間需要通信，他們可以利用 IPC（Inter Process Communication）的方式進行通信。

許多應(yīng)用程序都是以這種方式執(zhí)行的，因此如果某個工作進程（例如一個選項卡）無響應(yīng)，重啟它，并不會影響相同應(yīng)用程序的其他進程。

瀏覽器架構(gòu)

那么如何使用進程和線程構(gòu)建 Web 瀏覽器？

它可能是一個具有許多不同線程或許多不同進程的進程，只有少數(shù)線程能夠通過 IPC 進行通信。

這里有個非常重要的點需要注意，這些不同的架構(gòu)是實現(xiàn)細節(jié)。關(guān)于如何構(gòu)建 Web 瀏覽器沒有標(biāo)準(zhǔn)規(guī)范，不同瀏覽器的架構(gòu)可能完全不同。

最重要的是瀏覽器進程，如何與負責(zé)應(yīng)用程序不同部分的其他進程協(xié)調(diào)。對于渲染器進程，將創(chuàng)建多個進程，并將其分配給每個選項卡。直到最近，Chrome 才為每個標(biāo)簽提供了一個執(zhí)行進程，現(xiàn)在它嘗試為每個站點提供自己的進程，包括 iframe。

如圖所示，Chrome 的多進程架構(gòu)，渲染進程會顯示多個圖層，表示 Chrome 為每個選項卡運行多個渲染器進程。

這些進程控制什么？

下面介紹了每個 Chrome 進程以及其控制的范圍：

瀏覽器（Browser）：控制 “Chrome” 應(yīng)用程序，包括地址欄、書簽、后退和前進按鈕等。還需要處理 Web 瀏覽器的權(quán)限管理，例如網(wǎng)絡(luò)請求和文件訪問。

渲染器（Renderer）：控制選項卡內(nèi)，網(wǎng)站里顯示的所有內(nèi)容。

插件（Plugin）：控制網(wǎng)站使用的插件，例如：Flash。

GPU：獨立于其他進程，專用于處理 GPU 任務(wù)，它被分成不同的進程，因為 GPU 會處理來自多個進程的請求，并將它們繪制在相同的 Surface 中。

不同的進程，用于處理 Chrome 的不同部分。

還有更多的流程，如：擴展進程（Extension Process）和實用進程（Utility Process）。如果你想查看 Chrome 中正在運行的進程數(shù)，請點擊右上角的選項，菜單圖標(biāo)→選擇更多工具→任務(wù)管理器。

這將打開一個窗口，其中包含當(dāng)前正在運行的進程列表以及它們使用的 CPU/Memory 信息。

Chrome 采用多進程架構(gòu)的好處

之前，我曾提到 Chrome 使用多個渲染器進程。在最簡單的情況下，你可以想象每個選項卡都有自己的渲染器進程。

假設(shè)你打開了 3 個選項卡，每個選項卡都擁有獨立的渲染器進程。如果一個選項卡沒有響應(yīng)，則可以關(guān)閉無響應(yīng)的選項卡，并繼續(xù)使用，同時保持其他選項卡處于活動狀態(tài)。如果所有選項卡，都在一個進程上運行，則當(dāng)一個選項卡無響應(yīng)時，所有選項卡都不會響應(yīng)。這就很尷尬了。

將瀏覽器的工作，分成多個進程的另一個好處是安全性和沙盒。由于操作系統(tǒng)提供了限制進程權(quán)限的方法，因此瀏覽器可以從某些功能中，對某些進程進行沙箱處理。例如，Chrome 瀏覽器可以對處理用戶輸入（如渲染器）的進程，限制其文件訪問的權(quán)限。

每個進程都有自己的私有內(nèi)存空間，因此它們通常包含公有基礎(chǔ)功能（例如 V8 是 Chrome 的 JavaScript 引擎）。這意味著更多的內(nèi)存使用，因為如果它們是同一進程內(nèi)的線程，則無法以它們的方式共享。

為了節(jié)省內(nèi)存，Chrome 限制了它可以啟動的進程數(shù)量。限制會根據(jù)設(shè)備的內(nèi)存和 CPU 功率動態(tài)調(diào)整，但當(dāng) Chrome 達到限制時，它會在一個新的進程中打開這個站點。

Chrome 服務(wù)化 — 更省內(nèi)存

同樣的方法也適用于瀏覽器進程。Chrome 正在進行體系結(jié)構(gòu)更改，以便將瀏覽器程序的每個部分，作為一項服務(wù)運行，從而可以輕松拆分為不同的流程或匯總為同一個流程。

一般的想法是，當(dāng) Chrome 在強大的硬件上運行時，它可能會將每個服務(wù)拆分為不同的進程，從而提供更高的穩(wěn)定性，但如果它位于資源約束的設(shè)備上，Chrome 會將服務(wù)整合到一個進程中，從而節(jié)省內(nèi)存占用。在此更改之前，在類似 Android 的平臺上，已經(jīng)使用類似的方法，來整合流程以減少內(nèi)存使用。

站點隔離 — 獨立渲染進程

站點隔離是 Chrome 中最近推出的一項功能，可以為每個跨網(wǎng)站 iframe 運行單獨的渲染器進程。

我們一直在討論，每個選項卡有一個獨立的渲染器進程，它允許跨站點 iframe 在單個渲染器進程中運行，并在不同站點之間共享內(nèi)存空間。在同一個渲染器進程中運行a.com和b.com似乎沒問題。

該同源策略是網(wǎng)絡(luò)的核心安全模型，它確保一個站點在未經(jīng)同意的情況下無法訪問其他站點的數(shù)據(jù)，繞過此策略是安全攻擊的主要目標(biāo)。

進程隔離是分離站點的最有效方法。因為 Meltdonw 和 Spectre 這兩個經(jīng)典漏洞，我們需要使用進程分離網(wǎng)站，這是非常重要的。默認情況下，自 Chrome 67 啟用桌面隔離功能后，選項卡中的每個跨站點 iframe 都會獲得單獨的渲染器進程。

啟用站點隔離是一項多年的工程積累。站點隔離并不像分配不同的渲染器過程那么簡單，它從根本上改變了 iframe 彼此通信的方式。當(dāng)我們在運行在不同進程上的 iframe 頁面上，打開 devtools，就意味著 devtools 必須實現(xiàn)這些后臺通信的功能，并且看起來是無縫的。即使使用簡單的文字查找（Ctrl+F），來查找頁面中的單詞，這個操作也是在搜索不同渲染器進程。正因為如此，瀏覽器工程師將站點隔離這個功能的發(fā)布，當(dāng)做一個重要里程碑的原因。

小結(jié)

在這篇文章中，我們介紹了瀏覽器體系結(jié)構(gòu)的高級視圖，并介紹了多進程體系結(jié)構(gòu)的優(yōu)點。我們還介紹了 Chrome 中，與多進程架構(gòu)密切相關(guān)的服務(wù)化和站點隔離。在下一篇文章中，我們將開始深入研究這些進程和線程之間發(fā)生的事情，以便顯示一個網(wǎng)站。