[譯]從內部瞭解現代瀏覽器(1)
在這個系列的四部分中，我們會從內部瞭解Chrome架構中渲染流的細節；如果你想知道瀏覽器是怎麼把你的程式碼變成一個功能站點的話，或者你不清楚為什麼建議使用特定的技術來改善效能，這個系列就是為你準備的；
作為本系列的第一部分， 我們來看一看一些重要的計算機術語和Chrome的多執行緒架構；
計算機的核心CPU和GPU
為了理解瀏覽器的執行環境， 我們需要理解一些重要的計算機硬體和它們的作用；
CPU
第一個就是計算機核心處理單元-CPU( C entral P rocessing U nit)，CPU可以被認為是你計算機的大腦。一個CPU核心， 可以看做是一個辦公室文員，可以一個接著一個處理不同的任務；它可以處理從數學到藝術的所有事情，知道如何回覆客戶的電話。在過去，大多數CPU只是一個晶片；核心就像是在同一塊晶片上的另一個CPU；在現代硬體中，通常有不止一個核心，為你的手機和電腦提供更多的計算能力;
圖1：每個核心都可以處理多種任務
GPU
圖形處理單元-GPU( G raphics P rocessing U nit)是另一個計算機的重要部件；與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的核心安全模型; 它確保一個站點在未經同意的情況下無法訪問其他站點的資料。 繞過此策略是安全攻擊的主要目標。 程序隔離是分離站點的最有效方法。 隨著崩潰和幽靈的出現，顯而易見，我們更加需要使用程序來隔離站點。 預設情況下，自Chrome 67啟用隔離功能後，選項卡中的每個跨站點iframe都會獲得單獨的渲染器程序；
圖12：多個渲染器程序指向站點內的iframe
啟用站點隔離是一項進行多年的工程。 站點隔離並不像分配不同的渲染器程序那麼簡單; 它從根本上改變了iframe彼此交流的方式。 在具有在不同程序上執行的iframe的頁面上開啟devtools意味著devtools必須實現幕後工作以使其看起來無縫連線。 即使執行簡單的Ctrl + F來查詢頁面中的單詞也意味著搜尋不同的渲染器程序。 您可以看到瀏覽器工程師將Site Isolation的釋出作為一個重要里程碑的原因！