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

在 Chrome 10 周年之際，官方發布了一個系列文章，用圖解的方式，很清晰的講解了現代瀏覽器的運行原理，Chrome 之所以這么好用，這么快，是有原因的。

這個系列，一共 4 篇文章，第一篇主要講解的是 Chrome 的多進程架構，配圖很有意思，也很好理解，算是科普的文章。有興趣可以看下去，如果反響好的話，后面 3 篇我會持續翻譯，覺得好就點個贊或者留言分享吧！

---

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 中，與多進程架構密切相關的服務化和站點隔離。在下一篇文章中，我們將開始深入研究這些進程和線程之間發生的事情，以便顯示一個網站。

---

看完本文，你理解 Chrome 為什么這么快了嗎？為什么配置越好的設備可以做到越流暢？歡迎在留言區討論。

總結

以上是生活随笔為你收集整理的Google图解：Chrome 快是有原因的，科普浏览器架构！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。