Chrome是程序員的標配了，而從全球的市場份額來看，它在全球市場的份額已經超過 60%。

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

CPU、GPU、內存和多進程架構

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

作為本系列的第1部分，我們將介紹關鍵技術名詞和 Chrome 的多進程架構。

1.CPU（中央處理器）

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

2.GPU

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

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

如上圖所示，三層計算機體系結構中，硬件位于底部，操作系統位于中間，應用程序則在最上層。

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

Process 和 Thread 上執行的程序

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

進程可以理解是應用程序的執行程序，線程則是存在于進程內部，并執行其進程程序的部分功能。

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

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

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

瀏覽器架構

那么如何使用進程和線程構建 Web 瀏覽器？

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

這里有個非常重要的點需要注意，這些不同的架構是實現細節。關于如何構建 Web 瀏覽器沒有標準規范，不同瀏覽器的架構可能完全不同。

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

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

這些進程控制什么？

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

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

渲染器（Renderer）：控制選項卡內，網站里顯示的所有內容。

插件（Plugin）：控制網站使用的插件，例如：Flash。

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

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

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

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

Chrome 采用多進程架構的好處

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

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

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

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

為了節省內存，Chrome 限制了它可以啟動的進程數量。限制會根據設備的內存和 CPU 功率動態調整，但當 Chrome 達到限制時，它會在一個新的進程中打開這個站點。

Chrome 服務化 — 更省內存

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

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

站點隔離 — 獨立渲染進程

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

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

該同源策略是網絡的核心安全模型，它確保一個站點在未經同意的情況下無法訪問其他站點的數據，繞過此策略是安全攻擊的主要目標。

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

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

小結

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