介紹關(guān)鍵技術(shù)名詞和Chrome的多進(jìn)程架構(gòu)

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

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

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

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

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

1.CPU（中央處理器）

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

2.GPU

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

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

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

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

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

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

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

進(jìn)程作為線程的邊界，而線程就像游動在進(jìn)程中的魚。

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

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

瀏覽器架構(gòu)

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

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

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

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

如圖所示，Chrome 的多進(jìn)程架構(gòu)，渲染進(jìn)程會顯示多個(gè)圖層，表示 Chrome 為每個(gè)選項(xiàng)卡運(yùn)行多個(gè)渲染器進(jìn)程。

這些進(jìn)程控制什么？

下面介紹了每個(gè) Chrome 進(jìn)程以及其控制的范圍：

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

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

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

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

不同的進(jìn)程，用于處理 Chrome 的不同部分。

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

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

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

之前，我曾提到 Chrome 使用多個(gè)渲染器進(jìn)程。在最簡單的情況下，你可以想象每個(gè)選項(xiàng)卡都有自己的渲染器進(jìn)程。

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

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

每個(gè)進(jìn)程都有自己的私有內(nèi)存空間，因此它們通常包含公有基礎(chǔ)功能（例如 V8 是 Chrome 的 JavaScript 引擎）。這意味著更多的內(nèi)存使用，因?yàn)槿绻鼈兪峭贿M(jìn)程內(nèi)的線程，則無法以它們的方式共享。

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

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

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

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

站點(diǎn)隔離 — 獨(dú)立渲染進(jìn)程

站點(diǎn)隔離是 Chrome 中最近推出的一項(xiàng)功能，可以為每個(gè)跨網(wǎng)站 iframe 運(yùn)行單獨(dú)的渲染器進(jìn)程。

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

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

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

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

小結(jié)

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