深入瞭解新式網路瀏覽器 (第 1 部分)

Mariko Kosaka

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

在這 4 集的網誌文章中,我們會深入介紹 Chrome 瀏覽器,從高階架構到轉譯管道的細節。如果您想知道瀏覽器如何將程式碼轉換為可正常運作的網站,或是不確定為何建議使用特定技術來改善效能,這系列的內容就是您的最佳選擇。

在本系列的第 1 部分中,我們將探討核心運算術語,以及 Chrome 的多程序架構。

電腦的核心是 CPU 和 GPU

為了瞭解瀏覽器的執行環境,我們需要瞭解幾個電腦元件以及其功能。

CPU

CPU
圖 1:4 核心的 CPU 核心是辦公室員工坐在各個辦公桌前處理工作

第一個是C「主要」CC(「CPU」或「CPU」C)。您可以將 CPU 視為電腦的大腦這裡是辦公室員工的 CPU 核心,可逐一處理多項不同的工作。可處理數學和藝術等各種問題,同時瞭解如何回覆客戶來電。在過去,大多數 CPU 都是單一晶片核心就像是同一晶片中的另一個 CPU在現代硬體中,您通常會有多核心核心 為手機和筆電提供更強大的運算能力

GPU

GPU
圖 2:許多有扳手的 GPU 核心表示可以處理有限的工作

「空白」-「GPU」是電腦的另一個部分。與 CPU 不同,GPU 適合同時處理多個核心中的簡單工作。顧名思義,這項功能會先經過開發,能夠處理圖像。因此,在顯示「使用 GPU」或「採用 GPU 技術」的圖像中,算繪快速和流暢的互動都具有關聯性。近年來,隨著 GPU 加速運算的發展,光是 GPU 就有更多運算需求。

在電腦或手機上啟動應用程式時,CPU 和 GPU 是供應用程式運作的機器類型。應用程式通常會使用作業系統提供的機制,在 CPU 和 GPU 上執行。

硬體、OS、應用程式
圖 3:三層電腦架構。位於底部的「機器硬體」、「中間的作業系統」,以及位於「應用程式」上方。

執行程序與執行緒

處理程序和執行緒
圖 4:以定界框的形式處理,在程序中將抽象魚游泳的執行緒

在探討瀏覽器架構之前,請先瞭解另一個概念是 Process 和 Thread。程序可描述為應用程式的執行程式。執行緒是程序內部的執行緒,並會執行其程序的任何部分。

啟動應用程式時,系統會建立程序。程式可能會建立執行緒來協助工作,但這不是強制要求。作業系統可讓程序使用記憶體「研究室」執行,而且所有應用程式狀態都會保存在該私人記憶體空間中。關閉應用程式時,程序也會消失,作業系統會釋出記憶體。

程序和記憶體
圖 5:使用記憶體空間和儲存應用程式資料的程序圖表

處理程序可以要求作業系統啟動另一個程序,以執行不同的工作。此時,系統會將記憶體的不同部分分配給新程序。如果有兩個程序需要交談,可使用In PPCCCC<br class="ph-0">C<br class="ph-0">C</br>.許多應用程式都設計以這種方式運作,因此如果工作站程序沒有回應,則可重新啟動,而不停止執行應用程式不同部分的其他程序。

工作站程序與處理序間通訊 (IPC)
圖 6:透過 IPC 進行通訊的獨立程序圖表

瀏覽器架構

網路瀏覽器是如何使用程序和執行緒建構的?就是有一個程序包含多個不同執行緒,或是多個不同程序,再由幾個執行緒透過處理序間通訊 (IPC) 進行通訊。

瀏覽器架構
圖 7:程序 / 執行緒圖表中的不同瀏覽器架構

請特別注意,這些不同的架構是實作詳細資料。我們並未建立網路瀏覽器的標準規格。不同瀏覽器的做法可能與其他瀏覽器完全不同。

在此網誌系列中,我們使用的是最近採用的 Chrome 架構,如圖 8 所示。

頂端是瀏覽器程序,與處理應用程式不同部分的其他程序協調。針對轉譯器程序,系統會建立多個程序,並指派給各個分頁。在最近之前,Chrome 會盡可能讓每個分頁執行處理程序,現在會嘗試為每個網站提供專屬的程序,包括 iframe (請參閱網站隔離)。

瀏覽器架構
圖 8:Chrome 的多程序架構圖表。「轉譯器程序」底下會顯示多層,代表 Chrome 會為每個分頁執行多個轉譯器程序。

哪個流程控管了哪些內容?

以下表格說明各項 Chrome 處理程序及控制項:

程序和控管內容
瀏覽者 控制應用程式的「Chrome」部分,包括網址列、書籤、返回和前進按鈕。
同時處理網路瀏覽器中隱形的特殊權限,例如網路要求和檔案存取權。
轉譯器 控制網站顯示分頁中的所有內容。
外掛程式 控制網站使用的任何外掛程式,例如 Flash。
GPU 獨立處理 GPU 工作與其他程序隔離。並且分為不同的程序,因為 GPU 會處理多個應用程式的要求,並在同一個介面中繪製這些要求。
Chrome 程序
圖 9:指向瀏覽器 UI 不同部分的不同程序

擴充功能程序和公用程式程序等程序還有更多,如要查看 Chrome 中執行的處理程序數量,請按一下右上角的選項選單圖示 ,然後依序選取「更多工具」和「工作管理員」。這個動作會開啟一個視窗,其中列出目前正在執行的程序,以及這些程序使用的 CPU/記憶體量。

在 Chrome 中多程序架構的優點

我先前提過 Chrome 使用多個轉譯器程序。在最簡單的情況下,您可以想像每個分頁都有各自的轉譯器程序。假設您開啟了 3 個分頁,每個分頁都由獨立的轉譯器程序執行。

如果其中一個分頁沒有回應,您可以關閉沒有回應的分頁,繼續離開其他分頁。如果所有分頁在某個處理程序中執行,當一個分頁無法回應,則所有分頁都沒有回應。真難過。

適用於分頁的多個轉譯器
圖 10:顯示每個分頁執行多個程序的圖表

將瀏覽器工作區分為多個程序的另一個好處,就是安全性和沙箱。由於作業系統提供限製程序權限的方法,因此瀏覽器可將特定功能的特定程序沙箱為沙箱。舉例來說,Chrome 瀏覽器會針對處理任意使用者輸入內容的程序 (例如轉譯器程序),限制任意檔案存取權。

由於程序有專屬的私人記憶體空間,因此通常會包含通用基礎架構的副本 (例如 Chrome 的 JavaScript 引擎 V8)。這代表記憶體用量越多,因為在相同的程序中屬於執行緒時,無法以相同的方式共享這些記憶體。為節省記憶體,Chrome 對可啟動的處理程序數量設有限制。 上限取決於裝置的記憶體和 CPU 效能,但當 Chrome 達到上限時,就會在單一程序中開始從同一個網站執行多個分頁。

節省更多記憶體 - 在 Chrome 中運作

瀏覽器處理程序也是採用相同方法。Chrome 目前正在變更架構,以服務形式執行瀏覽器程式的各個部分,以便分割成不同程序或匯總為單一程序。

一般而言,在強大硬體上執行 Chrome 時,可能會將各項服務分割成不同程序,藉此提高穩定性。但如果在資源限制裝置上,Chrome 會將服務合併為一個程序,藉此節省記憶體用量。在這項異動之前,我們曾透過 Android 等平台,以較低的記憶體用量整合程序,

Chrome 服務
圖 11:圖表顯示將不同服務移至多個程序和單一瀏覽器程序

每個影格的轉譯器程序 - 網站隔離

網站隔離是 Chrome 最近推出的功能,可針對每個跨網站 iframe 執行獨立的轉譯器程序。我們已經說過每個分頁模型有一個轉譯器程序,允許跨網站 iframe 透過單一轉譯器程序執行,並在不同網站之間共用記憶體空間。在同一個轉譯器程序中執行 a.com 和 b.com 應該看起來沒問題。 《相同來源政策》是網路的核心安全性模型,可確保其中一個網站無法在未經同意的情況下存取其他網站的資料。略過這項政策是安全性攻擊的主要目標。 程序隔離是獨立網站最有效的方法。藉由 Meltdown 和 Spectre,我們必須使用程序分隔網站。自 Chrome 67 版起,在電腦上預設啟用網站隔離功能之後,分頁中每個跨網站 iframe 都會成為獨立的轉譯器程序。

網站隔離
圖 12:網站隔離圖表;多個指向網站 iframe 的轉譯器程序

啟用網站隔離是一項多年的工程。網站隔離並不像指派不同的轉譯器程序一樣簡單;它會徹底改變 iframe 彼此通訊的方式。如果網頁上有 iframe 執行於不同程序的 iframe,則開發人員必須實作幕後工作,才能使開發人員工具看起來順暢。即使是在網頁中執行簡單的 Ctrl + F 鍵尋找字詞,也代表搜尋不同的轉譯器程序。您可以看到瀏覽器工程師說明網站隔離是重大里程碑的原因!

總結

本文已概略介紹瀏覽器架構的概略說明,並介紹多程序架構的優點。我們也介紹了 Chrome 的系統化與網站隔離,與多程序架構有密切相關的概念。在下一篇文章中,我們會開始探究這些程序與執行緒之間的機制,以便顯示網站。

您喜歡這篇貼文嗎?如果您對於日後貼文有任何疑問或建議,歡迎透過 Twitter 的 @kosamari 告知您。

下一步:導覽流程