[譯]從內部瞭解現代瀏覽器(1)

原文，Mariko Kosaka

[譯]從內部瞭解現代瀏覽器(1)

[譯]從內部瞭解現代瀏覽器(2)

[譯]從內部瞭解現代瀏覽器(3)

CPU，GPU，記憶體和多執行緒架構

在本系列的四篇文章中，我們會從內部瞭解Chrome架構中渲染流的細節；如果你想知道瀏覽器是怎麼把你的程式碼變成一個功能站點的話，或者你不清楚為什麼建議使用特定的技術來改善效能，這個系列就是為你準備的；

作為本系列的第一篇， 我們來看一看一些重要的計算機術語和Chrome的多程式架構；

計算機的核心CPU和GPU

為了理解瀏覽器的執行環境， 我們需要理解一些重要的計算機硬體和它們的作用；

CPU

第一個就是計算機核心處理單元-CPU(Central Processing Unit)，CPU可以被認為是你計算機的大腦。一個CPU核心， 可以看做是一個辦公室文員，可以一個接著一個處理不同的任務；它可以處理從數學到藝術的所有事情，知道如何回覆客戶的電話。在過去，大多數CPU只是一個晶片；核心就像是在同一塊晶片上的另一個CPU；在現代硬體中，通常有不止一個核心，為你的手機和電腦提供更多的計算能力;

圖1：每個核心都可以處理多種任務

GPU

圖形處理單元-GPU(Graphics Processing Unit)是另一個計算機的重要部件；與CPU不同，GPU擅長處理簡單的任務，但是同時在多個核心之間；正如它的名字，它最初是用來處理圖形的；這就是為什麼在圖形中using GPU和GPU-backed，與快速呈現和平滑互動相關；在近些年，隨著GPU加速計算的技術，越來越多的計算在GPU上成為了可能；

圖2：每個單元只能處理有限的任務

當你在手機或者電腦上啟動應用程式的時候，CPU和GPU會為其執行提供能力，應用程式通過作業系統提供的機制在CPU和GPU上執行；

圖3：硬體 - 作業系統 - 應用程式

程式執行在程式和執行緒中

在深入瀏覽器架構之前要掌握的另一個概念是程式和執行緒。一個程式可以被描述為一個應用程式的執行過程；執行緒存在於程式內部，並可以處理程式的任意部分（執行緒共享程式的上下文）；

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

圖4：程式和執行緒

圖5：程式使用記憶體空間和儲存應用資料

一個程式可以要求作業系統啟動另一個程式來執行不同的任務；當這種情況發生時，記憶體的不同部分將被分配給新程式；如果兩個程式間需要對話，它們可以通過使用內部程式通訊(IPC)來實現；許多應用程式都是以這種方式工作的，因此如果工作程式沒有響應，可以重新啟動它而不停止執行應用程式其他部分的程式；

圖6：通過IPC進行通訊的程式

瀏覽器架構

那麼瀏覽器是如何使用程式和執行緒構建的呢？是的，它可能具有許多不同執行緒或許多不同程式，只有少數程式通過IPC進行通訊。

圖7：瀏覽器架構中的程式/執行緒

這裡需要注意的是這些不同的架構是實現細節，並沒有關於如何實現一個瀏覽器的標準，一種瀏覽器的方式可能和另一個瀏覽器完全不同；

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

最重要的是瀏覽器程式，它負責協調處理應用中其他部分的程式；對於渲染器程式，會建立多個程式分配給每個選項卡；直到最近，Chrome仍嘗試為每個選項卡提供一個程式；而現在，Chrome試圖為每個站點提供自己的程式，包括iframe(詳見站點隔離)；

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

每個程式控制什麼?

下面的表格描述了每個Chrome的程式和它們負責的部分；

	程式和它們控制的部分
瀏覽器	管理Chrome應用的各個部分，比如位址列，書籤，後退和前進按鈕；還負責Chrome中不可見的，受保護的部分，比如網路請求和檔案管理等；
渲染	管理任何顯示先選項卡中的內容；
外掛	管理站點使用的任何外掛，比如flash；
GPU	獨立於其他程式處理GPU任務。 它被分為不同的程式，因為GPU處理來自多個應用程式的請求並將它們繪製在同一表面中。

圖9：指向瀏覽器UI介面的不同部分的不同程式

還有更多的程式，如擴充套件程式和工具程式。 如果您想檢視Chrome中正在執行的程式數，請點選右上角的選項選單圖示，選擇更多工具，然後選擇工作管理員。 在開啟的彈框中，包含當前正在執行的程式列表以及它們使用的CPU/記憶體量。

Chrome多程式架構的優點

我在上面提到Chrome使用多個渲染器程式。 在最簡單的情況下，您可以認為每個選項卡都有自己的渲染器程式。 假設您開啟了3個選項卡，每個選項卡都由獨立的渲染器程式執行。 如果一個選項卡沒有響應，則可以關閉這個無響應的選項卡，同時保持其他選項卡處於活動狀態。 如果所有選項卡都在一個程式上執行，則當一個選項卡無響應時，所有選項卡都不會響應。 這就糟糕了。

圖10：在每一個選項卡上執行一個程式

瀏覽器執行在多個程式上的另一個好處是安全性和沙盒。 由於作業系統提供了限制程式許可權的方法，因此瀏覽器可以在某些功能中對某些程式進行沙盒處理。 例如，Chrome瀏覽器會限制程式的任何檔案訪問，如在渲染器程式中限制使用者輸入；

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

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

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

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

圖11：Chrome的服務化將不同的服務轉移到多個程式和一個瀏覽器程式中

每個框架單獨的渲染器程式 - 站點隔離

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

圖12：多個渲染器程式指向站點內的iframe

啟用站點隔離是一項進行多年的工程。 站點隔離並不像分配不同的渲染器程式那麼簡單; 它從根本上改變了iframe彼此交流的方式。 在具有在不同程式上執行的iframe的頁面上開啟devtools意味著devtools必須實現幕後工作以使其看起來無縫連線。 即使執行簡單的Ctrl + F來查詢頁面中的單詞也意味著搜尋不同的渲染器程式。 您可以看到瀏覽器工程師將Site Isolation的釋出作為一個重要里程碑的原因！

總結

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