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

Mariko Kosaka

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

在這 4 個部分網誌文章中,我們將介紹 Chrome 瀏覽器的整體架構, 您須具備算繪管道的細節如果您很好奇瀏覽器如何將程式碼 正常運作的網站,或您不確定為什麼該採用特定技術來改善成效 這系列影片將為您推薦

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

電腦的核心是 CPU 和 GPU

為了瞭解瀏覽器運作的環境,我們需要瞭解一些 電腦零件和其用途

CPU

CPU
圖 1:4 核心的 CPU 核心做為辦公室員工在每台辦公桌前處理任務

第一個是Unit (或 CPU)。CPU 可視為 發揮想像力CPU 核心 (如此處所示) 為辦公室員工,能處理許多不同的工作 逐一介紹能處理數學、藝術等各種事務,還能瞭解如何回覆訊息 吸引消費者來電在過去,大多數 CPU 都採用單一晶片。核心就像機器的另一個 CPU 相同的晶片現代硬體往往會有多個核心,因此能提升運算能力 到手機和筆電上

GPU

GPU
圖 2:許多帶有扳手的 GPU 核心,都建議它們能夠處理有限的工作

圖形顯現 Unit 或 GPU 是電腦的另一個部分。有別於 CPU GPU 適合處理簡單的工作,但會同時支援多個核心。做為名稱 事實上,Pixel 7a 已開始處理圖形這就是為什麼圖像的出現 「使用 GPU」或「支援 GPU」與快速轉譯及流暢的互動有關 近年來,有了 GPU 加速運算功能,相關運算能力也越來越高 也就是單獨 GPU

在電腦或手機上啟動應用程式時,會由 CPU 和 GPU 驅動 應用程式應用程式通常使用 作業系統。

硬體、OS、應用程式
圖 3:三層電腦架構。底座的機器硬體運作中 中間的系統,上層為「應用程式」。

在 Process 和 Thread 中執行程式

處理程序和執行緒
圖 4:將線條當成定界框處理,作為在流程中游泳的抽象魚

深入探討瀏覽器架構前,要深入瞭解另一個概念是 Process 和 Thread。 程序可描述為應用程式的執行程式。就像執行緒一樣 並執行其程序程式的任何部分。

啟動應用程式後,系統會建立程序。程式可能會建立執行緒來協助處理工作 正常運作,但也是選填作業系統提供「研究室」投入大量記憶體 且所有應用程式狀態都會保存在該私人記憶體空間中。當你關閉 處理程序就會消失,作業系統也會釋出記憶體。

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

處理程序可能會要求作業系統啟動另一項程序以執行不同的工作。當此情況 就會為新程序分配記憶體的不同部分如果有兩個程序 交談時,可使用「外部通訊」 (IPC) 達成這個目標。多個應用程式 設計為以這種方式運作,如果工作站程序沒有回應,可以重新啟動 不必停止執行應用程式不同部分的處理程序

工作站程序和處理序間通訊 (IPC)
圖 6:個別程序透過處理序間通訊 (IPC) 通訊

瀏覽器架構

那麼網路瀏覽器是如何利用程序和執行緒建構的呢?可能是一個程序 或在一些執行緒透過處理序間通訊 (IPC) 進行通訊。

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

請特別注意,這些不同的架構就是實作詳細資料。 建構網路瀏覽器時並沒有標準規格,其中一種瀏覽器的做法 卻與另一個應用程式完全不同

為了方便這一系列網誌,我們使用 Chrome 最近的架構 如圖 8 中所述。

最上面是瀏覽器程序,用於與處理不同 應用程式的某些部分針對轉譯器程序,系統會建立多個程序,並指派到 在每個分頁中直到最近,Chrome 會盡可能為每個分頁提供分頁解碼器現在會嘗試 包括 iframe,每個網站都有各自的處理程序 (請參閱網站隔離)。

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

哪種程序可控管?

下表說明各項 Chrome 程序及其控制項:

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

還有更多程序,例如擴充功能程序和公用程式程序。如果您想瞭解 Chrome 正在執行的處理程序數目,請按一下選項選單圖示 輕觸右上角的 ,然後依序選取「更多工具」和 選取「工作管理員」。系統隨即會開啟視窗,列出目前正在執行的程序 以及他們所耗用的 CPU/記憶體量

Chrome 多程序架構的優點

稍早曾提過,Chrome 使用多種轉譯器程序。最簡單的做法是 假設您每個分頁都有各自的轉譯器程序假設您開啟了 3 個分頁,且每個分頁都在執行中 獨立轉譯器程序

如果其中一個分頁沒有回應,您可以關閉無回應的分頁,並繼續保持 也沒有啟動其他分頁如果所有分頁都在單一程序中執行,當一個分頁沒有回應時, 這些分頁沒有回應真令人傷心。

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

將瀏覽器工作劃分為多個程序的另一個好處,就是安全性 採用沙箱機制。由於作業系統可讓您限制權限、瀏覽器 可以從某些功能透過沙箱機制處理特定程序。舉例來說,Chrome 瀏覽器 為處理任意使用者輸入內容的程序 (例如轉譯器程序) 存取任意檔案存取權,

由於程序擁有自己的私人記憶體空間,因此通常包含通用的 (例如 Chrome 的 JavaScript 引擎 V8)這代表記憶體用量會增加 但如果它們是同一程序中執行緒的執行緒,則無法以相同方式共用。 為節省記憶體,Chrome 會限制可啟動的程序數量。 這項限制取決於裝置的記憶體和 CPU 效能,但當 Chrome 啟動時 會在單一程序中開始從同一個網站開啟多個分頁。

節省記憶體 - 在 Chrome 中穩定

相同的方式適用於瀏覽器程序。Chrome 仍在架構中 以服務形式執行瀏覽器程式的每個部分,以便拆分為不同的程序 或匯總為單一群組

普遍的概念是,在功能強大的硬體上執行 Chrome 時,服務可能會分割成 以提升穩定性,但如果在資源限制裝置上,Chrome 將服務整合成單一程序,藉此節省記憶體用量。類似的整合方法 在此之前,Android 等平台採用較少記憶體用量的處理程序。

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

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

網站隔離是最近 Chrome 中加入了一項功能,可針對每個跨網站 iframe 執行獨立的轉譯器程序。 我們一直說過,每個分頁模型可採用一種轉譯器程序,允許跨網站使用 可在單一轉譯器程序中執行的 iframe,並在不同網站之間共用記憶體空間。 在同一個轉譯器程序中執行 a.com 和 b.com 似乎可以接受。 同源政策 是網路的核心安全性模型這能確保其中一個網站無法存取其他網站的資料 未經同意。規避這項政策是安全性攻擊的主要目標。 程序隔離是分隔網站的最有效方式。取代為 Meltdown and Spectre、 變得越來越明顯 我們必須使用程序區隔網站 自 Chrome 67 版起,在電腦上預設啟用網站隔離功能,分頁中每個跨網站 iframe 都能取得獨立的轉譯器程序

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

啟用網站隔離功能一直在工程領域耕耘已久。網站隔離並不像 指派不同的轉譯器程序將完全改變 iframe 與每種 Cookie 的溝通方式 其他。如果在不同程序執行的 iframe 所在的網頁上開啟開發人員工具,則開發人員工具必須 執行幕後作業,以流暢的方式呈現內容。即使執行簡單的 Ctrl+F 鍵來尋找 代表在不同轉譯器程序中執行搜尋瞭解原因 瀏覽器工程師宣布推出「網站隔離」做為重大里程碑!

總結

這篇文章已大致介紹瀏覽器架構,並介紹了 多程序架構我們也介紹了 Chrome 中的「加密與網站隔離」 這和多程序架構具有深遠的關係我們將在下一篇文章中進一步探討 。

你喜歡這則貼文嗎?如果您對日後貼文有任何疑問或建議,歡迎我 我是 Twitter 上 @kosamari 的來電。

下一步:導航的運作方式