連結：developers.google.com/web/updates…

翻譯：瘋狂的技術宅

CPU，GPU，記憶體和多程序架構

在這個由4部分組成的系列文章中，我們將介紹Chrome瀏覽器從高階架構到渲染管道的具體細節。 如果你想知道瀏覽器是如何將你的程式碼轉換為功能性網站的，或者你想知道為什麼需要使用某些特定技術來提高效能，那麼本系列非常適合你。

作為本系列的第1部分，我們將介紹核心計算術語和Chrome的多程序架構。

注意：如果你熟悉CPU / GPU和程序/執行緒的概念，則可以跳到本文的瀏覽器體系結構部分。

計算機的核心是CPU和GPU

為了理解瀏覽器執行的環境，我們需要了解一些計算機部件及其功能。

CPU

首先是中央處理單元（Central Processing Unit）—— CPU。 CPU可以被認為是你計算機的大腦。 CPU核心，在這裡作為辦公室工作人員，可以在他們進來時逐個處理許多不同的任務。它可以處理從數學到藝術的所有事情，同時知道如何回覆客戶呼叫。 在過去，大多數CPU都是單晶片。 核心就像生活在同一晶片中的另一個CPU。 在現代硬體中，你通常會獲得多個核心，從而為你的手機和膝上型電腦提供更強的計算能力。

圖1：4個CPU核心作為辦公室工作人員坐在每個辦公桌處理任務

GPU

圖形處理單元（Graphics Processing Unit ）—— GPU是計算機的另一部分。 與CPU不同，GPU擅長處理簡單任務，但同時跨多個核心。 顧名思義，它最初是為處理圖形而開發的。 這就是為什麼在圖形環境中“使用GPU”或“GPU支援”與快速渲染和平滑互動相關聯。 近年來，隨著GPU加速計算，僅在GPU上就可以實現越來越多的計算。

圖2：許多帶有扳手的GPU核心表明它們可以處理有限的任務

當你在計算機或手機上啟動程式時，CPU和GPU用來支援程式的運轉。 通常，程式使用作業系統提供的相關機制在CPU和GPU上執行。

圖3：三層計算機體系結構。 機器硬體位於底部，作業系統位於中間，應用程式位於頂部。

在程序和執行緒上執行程式

在深入瀏覽器架構之前要掌握的另一個概念是Process和Thread。 程序可以描述為執行狀態中的程式。 執行緒是存在於程序內部並用來執行其程式任務的某一部分。

啟動程式時，將會建立一個程序。 該程式可能會建立執行緒來幫助它工作，但這是可選的。 作業系統為程序提供了一“塊”記憶體，並且所有程式狀態都儲存在該專用記憶體空間中。 當你關閉程式時，該程序也會消失，作業系統會釋放記憶體。

圖5：程序使用記憶體空間和儲存資料的示意圖

程序可以要求作業系統啟動另一個程序來執行不同的任務。 當這種情況發生時，將為新程序分配不同的記憶體。 如果兩個程序需要通訊，他們可以通過使用程序間通訊（IPC）來實現。 許多程式都是以這種方式工作的，因此如果一個工作程序失去響應，則可以重新啟動它，而不會停止執行程式的其他程序。

圖6：通過IPC進行通訊的獨立程序示意圖

瀏覽器架構

那麼如何使用程序和執行緒構建Web瀏覽器？ 好吧，它可能是一個具有許多不同執行緒的程序，或是許多具有少量執行緒的通過IPC進行通訊的不同程序。

在這裡有非常重要的一點需要注意，這些不同的架構是實現細節。關於如何構建Web瀏覽器並沒有標準規範。 一種瀏覽器可能與另一種瀏覽器的結構完全不同。

在本系列文章中，我們將使用下圖中描述的Chrome最新架構。

最重要的部分是瀏覽器程序怎樣與程式的其他工作程序進行協調。 對於渲染器程序，將建立多個程序並將其分配給每個選項卡。 直到不久前，Chrome才為每個標籤提供了一個程序；現在它嘗試為每個站點提供自己的程序，其中包括iframe（請參閱：站點隔離部分）。

圖8：Chrome的多程序架構圖。 渲染程序下顯示多個圖層，表示Chrome為每個選項卡執行多個渲染器程序。

每個程序都做些什麼？

下表介紹了每個Chrome程序及其控制的內容：

還有更多的程序，如擴充套件程序和功能程序。 如果你想檢視Chrome中正在執行的程序數，請點選右上角的選項選單圖示“more_vert”，選擇“更多工具”，然後選擇“工作管理員”。 這將開啟一個視窗，其中包含當前正在執行的程序列表以及它們使用的CPU/記憶體量。

Chrome中多程序架構的好處

前面我曾提到Chrome使用多個渲染器程序。 在最簡單的情況下，你可以想象每個選項卡都有自己的渲染器程序。 假設你打開了3個選項卡，每個選項卡都由獨立的渲染器程序執行。 如果一個選項卡沒有響應，就可以關閉無響應的選項卡並繼續執行，同時保持其他選項卡處於活動狀態。 如果所有選項卡都在一個程序上執行，那麼當一個選項卡無響應時，所有選項卡都不會響應。 那將會很難受。

圖10：顯示多程序執行每個選項卡的示意圖

將瀏覽器的工作分成多個程序的另一個好處是安全性和沙盒。由於作業系統提供了限制程序許可權的方法，因此瀏覽器可以從某些功能中對某些程序進行沙箱處理。 例如，Chrome瀏覽器限制任意使用者輸入程序的（如渲染器程序）的任意檔案訪問。

由於程序有自己的私有記憶體空間，因此它們通常包含公共基礎結構的副本（例如V8是Chrome的JavaScript引擎）。 這意味著會消耗更多的記憶體空間，因為如果它們執行在同一程序內的不同執行緒上，則無法遵循自己的機制進行共享。 為了節省記憶體，Chrome限制了它可以啟動的程序數量，這種限制因裝置的記憶體和CPU功率而異，但當Chrome達到限制時，它會在一個程序中執行從同個一站點開啟的多個選項卡。

節省更多記憶體：Chrome中的服務化

同樣的方法適用於瀏覽器程序。 Chrome正在進行體系結構的變更，以便將瀏覽器程式的每個部分作為一項服務執行，從而可以輕鬆拆分為不同的流程或彙總為一個流程。

一般的想法是，當Chrome在強大的硬體上執行時，它可能會將每個服務拆分為不同的程序，從而提供更高的穩定性，但如果它位於資源有限的裝置上，則Chrome會將服務整合到一個程序中，從而節省記憶體佔用。 在進行這種更改之前，在Android平臺上已經使用了類似的方法來整合程序以減少記憶體使用。

圖11：Chrome的服務化示意圖，將不同的服務轉移到多個程序或一個瀏覽器程序中

幀渲染器程序：站點隔離

網站隔離是Chrome中最近推出的一項功能，可為每個跨網站的iframe執行單獨的渲染程序。 我們一直在討論每個選項卡一個渲染程序的模型，它允許跨站iframe在單個渲染器程序中執行，並在不同站點之間共享記憶體空間。 在同一個渲染程序中執行a.com和b.com似乎沒問題。 同源策略是Web的核心安全模型，它確保一個站點在未經同意的情況下無法訪問其他站點的資料。 繞過此策略是安全攻擊的主要目標。程序隔離是分離站點的最有效方法。 由於Meltdown和Spectre漏洞，我們更加需要使用程序來隔離站點。 預設情況下，自從Chrome 67啟用桌面隔離功能後，選項卡中的每個跨站點iframe都會得到單獨的渲染程序。

啟用站點隔離是一項需要很多年的工作。 站點隔離並不像分配不同的渲染程序那麼簡單；它從根本上改變了iframe彼此的交流方式。 在執行著不同iframe程序的的頁面上開啟devtools，意味著devtools必須在背後做大量的工作才能使其看起來無縫。即使通過簡單的 Ctrl + F 來查詢頁面中的單詞也意味著需要跨越不同的渲染程序進行搜尋。 這就是瀏覽器工程師將站點隔離的釋出作為一個重要里程碑的原因！

總結

在這篇文章中，我們介紹了瀏覽器體系結構的高階檢視，並介紹了多程序體系結構的優點。 我們還介紹了Chrome中與多程序架構密切相關的服務化和站點隔離。 在下一篇文章中，我們將開始深入研究在顯示一個網站時，這些程序和執行緒之間究竟發生了什麼事情。