【譯】現代瀏覽器探祕（part 1）：架構

翻譯：瘋狂的技術宅
原文連接： https://developers.google.com...

本文首發微信公衆號：jingchengyideng
點擊下面連接查看其它章節文章

• 現代瀏覽器探祕(part1)：架構
• 現代瀏覽器探祕(part2)：導航
• 現代瀏覽器探祕(part3)：渲染
• 現代瀏覽器探祕(part4)：事件處理

---

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。 進程能夠描述爲運行狀態中的程序。 線程是存在於進程內部並用來執行其程序任務的某一部分。

圖4：過程劃定了邊界，線程做爲在進程內遊動的「抽象魚」

啓動程序時，將會建立一個進程。 該程序可能會建立線程來幫助它工做，但這是可選的。 操做系統爲進程提供了一「塊」內存，而且全部程序狀態都保存在該專用內存空間中。 當你關閉程序時，該進程也會消失，操做系統會釋放內存。

圖5：進程使用內存空間和存儲數據的示意圖（sf不支持svg動圖上傳，看不到請使用技術手段查看原圖）

進程能夠要求操做系統啓動另外一個進程來執行不一樣的任務。 當這種狀況發生時，將爲新進程分配不一樣的內存。 若是兩個進程須要通訊，他們能夠經過使用進程間通訊（IPC）來實現。 許多程序都是以這種方式工做的，所以若是一個工做進程失去響應，則能夠從新啓動它，而不會中止運行程序的其餘進程。

圖6：經過IPC進行通訊的獨立進程示意圖（sf不支持svg動圖上傳，看不到請使用技術手段查看原圖）

瀏覽器架構

那麼如何使用進程和線程構建Web瀏覽器？ 好吧，它多是一個具備許多不一樣線程的進程，或是許多具備少許線程的經過IPC進行通訊的不一樣進程。

圖7：不一樣瀏覽器體系結構中的進程/線程示意圖

在這裏有很是重要的一點須要注意，這些不一樣的架構是實現細節。關於如何構建Web瀏覽器並無標準規範。 一種瀏覽器可能與另外一種瀏覽器的結構徹底不一樣。

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

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

圖8：Chrome的多進程架構圖。 渲染進程下顯示多個圖層，表示Chrome爲每一個選項卡運行多個渲染器進程。

每一個進程都作些什麼？

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

進程	作些什麼
Browser	控制程序的「chrome」部分，包括地址欄，書籤，後退和前進按鈕。<br/>還處理Web瀏覽器的不可見的，和特權部分，例如網絡請求和文件訪問。
Renderer	負責顯示網站的選項卡內的全部內容。
Plugin	控制網站使用的全部插件，例如flash。
GPU	獨立於其餘進程的GPU處理任務。 它被分紅多個不一樣的進程，由於GPU處理來自多個程序的請求並將它們繪製在同一個面中。

圖9：指向瀏覽器UI不一樣部分的不一樣進程

還有更多的進程，如擴展進程和功能進程。 若是你想查看Chrome中正在運行的進程數，請點擊右上角的選項菜單圖標「more_vert」，選擇「更多工具」，而後選擇「任務管理器」。 這將打開一個窗口，其中包含當前正在運行的進程列表以及它們使用的CPU/內存量。

Chrome中多進程架構的好處

前面我曾提到Chrome使用多個渲染器進程。 在最簡單的狀況下，你能夠想象每一個選項卡都有本身的渲染器進程。 假設你打開了3個選項卡，每一個選項卡都由獨立的渲染器進程運行。 若是一個選項卡沒有響應，就能夠關閉無響應的選項卡並繼續運行，同時保持其餘選項卡處於活動狀態。 若是全部選項卡都在一個進程上運行，那麼當一個選項卡無響應時，全部選項卡都不會響應。 那將會很難受。

圖10：顯示多進程運行每一個選項卡的示意圖（sf不支持svg動圖上傳，看不到請使用技術手段查看原圖）

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

因爲進程有本身的私有內存空間，所以它們一般包含公共基礎結構的副本（例如V8是Chrome的JavaScript引擎）。 這意味着會消耗更多的內存空間，由於若是它們運行在同一進程內的不一樣線程上，則沒法遵循本身的機制進行共享。 爲了節省內存，Chrome限制了它能夠啓動的進程數量，這種限制因設備的內存和CPU功率而異，但當Chrome達到限制時，它會在一個進程中運行從同個一站點打開的多個選項卡。

節省更多內存：Chrome中的服務化

一樣的方法適用於瀏覽器進程。 Chrome正在進行體系結構的變動，以便將瀏覽器程序的每一個部分做爲一項服務運行，從而能夠輕鬆拆分爲不一樣的流程或彙總爲一個流程。

通常的想法是，當Chrome在強大的硬件上運行時，它可能會將每一個服務拆分爲不一樣的進程，從而提供更高的穩定性，但若是它位於資源有限的設備上，則Chrome會將服務整合到一個進程中，從而節省內存佔用。 在進行這種更改以前，在Android平臺上已經使用了相似的方法來整合進程以減小內存使用。

圖11：Chrome的服務化示意圖，將不一樣的服務轉移到多個進程或一個瀏覽器進程中（sf不支持svg動圖上傳，看不到請使用技術手段查看原圖）

幀渲染器進程：站點隔離

網站隔離是Chrome中最近推出的一項功能，可爲每一個跨網站的iframe運行單獨的渲染進程。 咱們一直在討論每一個選項卡一個渲染進程的模型，它容許跨站iframe在單個渲染器進程中運行，並在不一樣站點之間共享內存空間。 在同一個渲染進程中運行a.com和b.com彷佛沒問題。 同源策略是Web的核心安全模型，它確保一個站點在未經贊成的狀況下沒法訪問其餘站點的數據。 繞過此策略是安全攻擊的主要目標。進程隔離是分離站點的最有效方法。 因爲Meltdown和Spectre漏洞，咱們更加須要使用進程來隔離站點。 默認狀況下，自從Chrome 67啓用桌面隔離功能後，選項卡中的每一個跨站點iframe都會獲得單獨的渲染進程。

圖12：站點隔離示意，指向站點內iframe的多個渲染器進程

啓用站點隔離是一項須要不少年的工做。 站點隔離並不像分配不一樣的渲染進程那麼簡單；它從根本上改變了iframe彼此的交流方式。 在運行着不一樣iframe進程的的頁面上打開devtools，意味着devtools必須在背後作大量的工做才能使其看起來無縫。即便經過簡單的 Ctrl + F 來查找頁面中的單詞也意味着須要跨越不一樣的渲染進程進行搜索。 這就是瀏覽器工程師將站點隔離的發佈做爲一個重要里程碑的緣由！

總結

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

---

本文首發微信公衆號：jingchengyideng
點擊下面連接查看其它章節文章

• 現代瀏覽器探祕(part1)：架構
• 現代瀏覽器探祕(part2)：導航
• 現代瀏覽器探祕(part3)：渲染
• 現代瀏覽器探祕(part4)：事件處理