翻譯文章，原文: Inside look at modern web browser (part 1)[1]
CPU，GPU，內存和多進程架構
本系列文章由4篇組成，我們將在Chrome瀏覽器中深入瞭解高級架構到渲染管道的細節。如果您想知道瀏覽器如何將代碼變成功能正常的網站，或者不確定為什麼建議使用特定技術來提高性能，那麼本系列適合您。
在本系列的第1部分中，我們將介紹核心計算術語和Chrome的多進程體系結構。
計算機的核心是CPU和GPU
為了瞭解瀏覽器正在運行的環境，我們需要了解一些計算機部件及其功能。
CPU
圖1：坐在每個辦公桌上的辦公室工作人員看作四個CPU核心，處理傳入的任務
首先是中央處理器-或CPU。CPU可以視為您計算機的大腦。一個CPU內核，在這裡被描繪為辦公室工作人員，它可以一一處理許多不同的任務。它可以處理從數學到美術的所有工作，同時又知道如何回覆客戶的電話。過去，大多數CPU都是單芯片。內核就像生活在同一芯片中的另一個CPU。在現代硬件中，您通常會獲得多個內核，從而為手機和筆記本電腦提供更多的計算能力。
GPU
圖2：許多帶有扳手的GPU內核表明它們只能處理有限的任務
圖形處理單元-或GPU是計算機的另一部分。與CPU不同，GPU擅長處理簡單任務，但同時跨多個內核。顧名思義，它最初是為處理圖形而開發的。這就是為什麼在圖形上下文中“使用GPU”或“支持GPU”與快速渲染和平滑交互相關聯的原因。近年來，隨著GPU的加速計算，僅GPU上的計算就變得越來越多。
在計算機或電話上啟動應用程序時，由CPU和GPU為他提供動力。通常，應用程序使用操作系統提供的機制在CPU和GPU上運行
圖3：三層計算機體系結構。機器硬件在底部，操作系統在中間，應用程序在頂部。
在進程和線程上執行程序
圖4：進程作為邊界框，線程作為抽象魚在進程內部遊動
在深入瀏覽器體系結構之前要掌握的另一個概念是 進程 和 線程 。進程可以描述為應用程序的執行程序。線程是存在於進程內部並執行其流程程序的任何部分的線程。
當你啟動應用程序時，將創建一個過程。該程序可能會創建一個或多個線程來幫助其工作，但這是可選的。操作系統為進程提供了一個“平滑”的內存，所有應用程序狀態都保留在該專用內存空間中。當您關閉應用程序時，該進程也將消失，並且操作系統會釋放內存。
圖5：使用內存空間並存儲應用程序數據的過程圖
一個進程可以要求操作系統啟動另一個進程來運行不同的任務。發生這種情況時，將為新進程分配內存的不同部分。如果兩個進程需要通話，則可以使用進程間通信（IPC）進行通話。許多應用程序都設計為以這種方式工作，因此，如果工作進程無響應，則可以重新啟動它，而無需停止正在運行應用程序不同部分的其他進程。
圖6：通過IPC進行通信的獨立過程圖
瀏覽器架構
那麼如何使用進程和線程構建Web瀏覽器？嗯，它可以是一個具有許多不同線程的進程，也可以是具有幾個通過IPC進行通信的多個線程的進程
圖7：進程/線程圖中的不同瀏覽器架構
這裡要注意的重要一點是，這些不同的體系結構是實現細節。沒有關於如何構建網絡瀏覽器的標準規範。一種瀏覽器的方法可能與另一種完全不同。
為了這個系列文章，我們將使用下圖中描述的Chrome最新架構。
頂部是瀏覽器進程，它與負責應用程序不同部分的其他進程進行協調。對於渲染器進程，將創建多個進程並將其分配給每個選項卡。直到最近，Chrome才儘可能地給每個標籤頁分配一個進程。現在，它嘗試為每個網站分配自己的進程，包括iframe（請參閱網站隔離[2]）。
圖8：Chrome的多進程架構圖。在“渲染器進程”下顯示了多個圖層，以表示Chrome為每個選項卡運行了多個“渲染器進程”。
每個進程都控制什麼？
下表介紹了每個Chrome進程及其控制的內容：
- Browser(瀏覽器進程）控制應用程序的“ chrome”部分，包括地址欄，書籤，後退和前進按鈕。
還處理Web瀏覽器的隱形，特權部分，例如網絡請求和文件訪問。 - Render(渲染進程) 控制顯示網站的標籤內的所有內容。
- Plugin(插件進程) 控制網站使用的所有插件，例如Flash。
- GPU 與其他進程隔離地處理GPU任務。由於GPU處理來自多個應用程序的請求並將它們繪製在同一表面上，因此將其分為不同的過程。
圖9：指向瀏覽器UI不同部分的不同進程。
還有更多的進程，例如擴展進程和實用程序進程。如果要查看Chrome中正在運行多少個進程，請單擊右上角的選項菜單圖標，選擇更多工具，然後選擇任務管理器。這將打開一個窗口，其中列出了當前正在運行的進程以及它們正在使用多少CPU/內存。
Chrome中多進程架構的好處
之前，我提到Chrome使用多個渲染器進程。在最簡單的情況下，您可以想象每個選項卡都有其自己的渲染器進程。假設您打開了3個標籤，每個標籤都由一個獨立的渲染器進程運行。如果一個選項卡變得無響應，則可以關閉無響應的選項卡並繼續運行，同時保持其他選項卡的活動狀態。如果所有選項卡都在一個進程上運行，則當一個選項卡無響應時，所有選項卡將無響應。
圖10：該圖顯示了運行每個選項卡的多個進程
將瀏覽器的工作分為多個過程的另一個好處是安全性和沙箱處理。由於操作系統提供了一種限制進程特權的方法，瀏覽器可以將某些功能的某些進程沙箱化。例如，Chrome瀏覽器會限制處理任意用戶輸入的進程（如渲染器進程）的任意文件訪問權限。(注：不能隨意讀取本地文件)
由於進程具有自己的私有內存空間，因此它們通常包含通用基礎結構的副本（例如V8，這是Chrome的JavaScript引擎）。這意味著更多的內存使用情況，如果它們是同一進程中的線程，則不能像以前那樣共享它們。為了節省內存，Chrome對可啟動的進程數量進行了限制。該限制取決於設備擁有的內存和CPU能力，但是當Chrome瀏覽器達到極限時，Chrome將對於來自一個網站的多個選項卡運行在一個進程中。（註釋：對於文中說的the same site是否是根據同源策略決定的還是對於域名決定的為相同網站，並沒有說明）
節省更多內存-Chrome中的服務化
將相同的方法應用於瀏覽器進程。Chrome正在進行架構更改，以將瀏覽器程序的每個部分作為一項服務運行，從而可以輕鬆拆分為不同的進程或聚合為一個進程。
一般想法是，當Chrome在強大的硬件上運行時，它將每個服務分成不同的進程以提供更高的穩定性，但如果是在資源受限的設備上，Chrome會將服務整合到一個進程中，從而節省內存空間。在進行此更改之前，已在類似Android的平臺上使用了類似的整合過程以減少內存使用量的方法。
圖11：Chrome的服務化示意圖，將不同的服務轉移到多個進程和一個瀏覽器進程中
每幀渲染器過程-站點隔離（指的是上文說的iframe)
站點隔離[3]是Chrome最近引入的功能，可為每個跨網站iframe運行單獨的渲染器進程。我們一直在討論每個標籤頁模型一個渲染器進程，該進程允許跨站點iframe在單個渲染器進程中運行，並在不同站點之間共享內存空間。在相同的渲染器進程中運行a.com和b.com似乎可以。"同源策略"是Web的核心安全，這樣可以確保一個站點未經同意就無法訪問其他站點的數據。繞過此策略是安全攻擊的主要目標。進程隔離是分離站點的最有效方法。藉助Meltdown和Spectre[4]，我們更加需要使用進程來分離站點。從Chrome 67開始，默認情況下在桌面上啟用“站點隔離”，因此標籤中的每個跨網站iframe都會獲得一個單獨的渲染器進程。
圖12：站點隔離圖；指向網站內iframe的多個渲染器進程
啟用站點隔離是一項多年的工程工作。站點隔離並不像分配不同的渲染器進程那麼簡單；它從根本上改變了iframe彼此交流的方式。在頁面上打開具有在不同進程上運行的iframe的開發者工具意味著開發者工具必須實施幕後工作以使其無縫顯示。即使運行簡單的Ctrl + F在頁面中查找單詞，也意味著跨不同的渲染器進程進行搜索。您會看到瀏覽器工程師將發佈站點隔離作為重要里程碑的原因！
總結
在本文中，我們介紹了瀏覽器架構的高層視圖，並介紹了多進程架構的好處。我們還介紹了與多進程體系結構密切相關的Chrome中的服務化和站點隔離。在下一篇文章中，我們將開始深入研究這些進程和線程之間的情況，以便顯示網站。
References
[1] Inside look at modern web browser (part 1): https://developers.google.com/web/updates/2018/09/inside-browser-part1
[2] 網站隔離: https://developers.google.com/web/updates/2018/09/inside-browser-part1#site-isolation
[3] 站點隔離: https://developers.google.com/web/updates/2018/07/site-isolation
[4] Meltdown和Spectre: https://developers.google.com/web/updates/2018/02/meltdown-spectre
閱讀更多 因特耐特雜貨鋪 的文章
