Chrome 是程式設計師的標配了，而從全球的市場份額來看，它在全球市場的份額已經超過 60%。
在 Chrome 10 週年之際，官方釋出了一個系列文章，用圖解的方式，很清晰的講解了現代瀏覽器的執行原理，Chrome 之所以這麼好用，這麼快，是有原因的。
這個系列，一共 4 篇文章，第一篇主要講解的是 Chrome 的多程式架構，配圖很有意思，也很好理解，算是科普的文章。有興趣可以看下去，如果反響好的話，後面 3 篇我會持續翻譯，覺得好就點個贊或者留言分享吧！
CPU、GPU、記憶體和多程式架構
我們將通過 4 篇部落格，來介紹 Chrome 瀏覽器從高階架構到渲染管道的具體細節。如果你想知道，瀏覽器是如何將你的程式碼轉換為功能性網站；或者你想確定，為什麼可以使用特定技術能提高效能，那麼本系列適合你。
作為本系列的第 1 部分，我們將介紹關鍵技術名詞和 Chrome 的多程式架構。
1. CPU（中央處理器）
CPU(Central Procession Unit) 可以被認為是你計算機的大腦。CPU 核心，就像辦公室工作人員，可以逐個處理交代給他們的許多不同的任務。它可以處理從數學到藝術的所有事情，並把處理結果返回出去。曾經大多數 CPU 都是單核，但在現代硬體中，你通常會操作的是多核 CPU，多核 CPU 為你的手機和計算機提供更強的計算能力。
2. GPU
GPU（Graphics Processing Unit）是計算機的另一部分。與 CPU 不同，GPU 更擅長處理簡單任務，同時可以跨多個核心。顧名思義，它最初是為處理圖形而誕生的。這就是為什麼在圖形處理中，當我們說到 “使用 GPU” 或者 “GPU 支援” 的時候，通常就在說快速渲染和平滑互動。近年來，隨著 GPU 加速發展，僅在 GPU 上就可以實現越來越多的計算任務。
如上圖所示，三層計算機體系結構中，硬體位於底部，作業系統位於中間，應用程式則在最上層。
當你在計算機或手機上啟動應用程式時，CPU 和 GPU 就是為應用程式提供有力的支援。通常，應用程式使用作業系統提供的機制在 CPU 和 GPU 上執行。
Process 和 Thread 上執行的程式
在深入瀏覽器架構之前，要掌握的另一個概念是 Process（程式） 和 Thread（執行緒）。
程式可以理解是應用程式的執行程式，執行緒則是存在於程式內部，並執行其程式程式的部分功能。
程式作為執行緒的邊界，而執行緒就像遊動在程式中的魚。
程式可以通過作業系統，啟動另一個程式來執行不同的任務。此時，系統將為新程式分配不同的記憶體。如果兩個程式間需要通訊，他們可以利用 IPC（Inter Process Communication）的方式進行通訊。許多應用程式都是以這種方式執行的，因此如果某個工作程式（例如一個選項卡）無響應，重啟它，並不會影響相同應用程式的其他程式。
瀏覽器架構
那麼如何使用程式和執行緒構建 Web 瀏覽器？
它可能是一個具有多個執行緒的獨立程式，或者存在多個程式但是隻有部分程式之間會進行 IPC 通訊的結構。
這裡有個非常重要的點需要注意，這些不同的架構是實現細節。關於如何構建 Web 瀏覽器沒有標準規範，不同瀏覽器的架構可能完全不同。
最重要的是瀏覽器程式，如何與負責應用程式不同部分的其他程式協調。對於渲染器程式，將建立多個程式，並將其分配給每個選項卡。直到最近，Chrome 才為每個標籤提供了一個執行程式，現在它嘗試為每個站點提供自己的程式，包括 iframe。
如圖所示，Chrome 的多程式架構，渲染程式會顯示多個圖層，表示 Chrome 為每個選項卡執行多個渲染器程式。
這些程式控制什麼？
下面介紹了每個 Chrome 程式以及其控制的範圍：
- 瀏覽器（Browser）：控制 “Chrome” 應用程式，包括位址列、書籤、後退和前進按鈕等。還需要處理 Web 瀏覽器的許可權管理，例如網路請求和檔案訪問。
- 渲染器（Renderer）：控制選項卡內，網站裡顯示的所有內容。
- 外掛（Plugin）：控制網站使用的外掛，例如：Flash。
- GPU：獨立於其他程式，專用於處理 GPU 任務，它被分成不同的程式，因為 GPU 會處理來自多個程式的請求，並將它們繪製在相同的 Surface 中。
不同的程式，用於處理 Chrome 的不同部分。
還有更多的流程，如：擴充套件程式（Extension Process）和實用程式（Utility Process）。如果你想檢視 Chrome 中正在執行的程式數，請點選右上角的選項，選單圖示→選擇更多工具→工作管理員。
這將開啟一個視窗，其中包含當前正在執行的程式列表以及它們使用的 CPU/Memory 資訊。
Chrome 採用多程式架構的好處
之前，我曾提到 Chrome 使用多個渲染器程式。在最簡單的情況下，你可以想象每個選項卡都有自己的渲染器程式。假設你開啟了 3 個選項卡，每個選項卡都擁有獨立的渲染器程式。如果一個選項卡沒有響應，則可以關閉無響應的選項卡，並繼續使用，同時保持其他選項卡處於活動狀態。如果所有選項卡，都在一個程式上執行，則當一個選項卡無響應時，所有選項卡都不會響應。這就很尷尬了。
將瀏覽器的工作，分成多個程式的另一個好處是安全性和沙盒。由於作業系統提供了限制程式許可權的方法，因此瀏覽器可以從某些功能中，對某些程式進行沙箱處理。例如，Chrome 瀏覽器可以對處理使用者輸入（如渲染器）的程式，限制其檔案訪問的許可權。
每個程式都有自己的私有記憶體空間，因此它們通常包含公有基礎功能（例如 V8 是 Chrome 的 JavaScript 引擎）。這意味著更多的記憶體使用，因為如果它們是同一程式內的執行緒，則無法以它們的方式共享。為了節省記憶體，Chrome 限制了它可以啟動的程式數量。限制會根據裝置的記憶體和 CPU 功率動態調整，但當 Chrome 達到限制時，它會在一個新的程式中開啟這個站點。
Chrome 服務化 — 更省記憶體
同樣的方法也適用於瀏覽器程式。Chrome 正在進行體系結構更改，以便將瀏覽器程式的每個部分，作為一項服務執行，從而可以輕鬆拆分為不同的流程或彙總為同一個流程。
一般的想法是，當 Chrome 在強大的硬體上執行時，它可能會將每個服務拆分為不同的程式，從而提供更高的穩定性，但如果它位於資源約束的裝置上，Chrome 會將服務整合到一個程式中，從而節省記憶體佔用。在此更改之前，在類似 Android 的平臺上，已經使用類似的方法，來整合流程以減少記憶體使用。
站點隔離 — 獨立渲染程式
站點隔離是 Chrome 中最近推出的一項功能，可以為每個跨網站 iframe 執行單獨的渲染器程式。
我們一直在討論，每個選項卡有一個獨立的渲染器程式，它允許跨站點 iframe 在單個渲染器程式中執行，並在不同站點之間共享記憶體空間。在同一個渲染器程式中執行 a.com 和 b.com 似乎沒問題。該同源策略是網路的核心安全模型，它確保一個站點在未經同意的情況下無法訪問其他站點的資料，繞過此策略是安全攻擊的主要目標。程式隔離是分離站點的最有效方法。因為 Meltdonw 和 Spectre 這兩個經典漏洞，我們需要使用程式分離網站，這是非常重要的。預設情況下，自 Chrome 67 啟用桌面隔離功能後，選項卡中的每個跨站點 iframe 都會獲得單獨的渲染器程式。
啟用站點隔離是一項多年的工程積累。站點隔離並不像分配不同的渲染器過程那麼簡單，它從根本上改變了 iframe 彼此通訊的方式。當我們在執行在不同程式上的 iframe 頁面上，開啟 devtools，就意味著 devtools 必須實現這些後臺通訊的功能，並且看起來是無縫的。即使使用簡單的文字查詢（Ctrl+F），來查詢頁面中的單詞，這個操作也是在搜尋不同渲染器程式。正因為如此，瀏覽器工程師將站點隔離這個功能的釋出，當做一個重要里程碑的原因。
小結
在這篇文章中，我們介紹了瀏覽器體系結構的高階檢視，並介紹了多程式體系結構的優點。我們還介紹了 Chrome 中，與多程式架構密切相關的服務化和站點隔離。在下一篇文章中，我們將開始深入研究這些程式和執行緒之間發生的事情，以便顯示一個網站。
原文地址：
https://developers.google.com/web/updates/2018/09/inside-browser-part1
「聯機圓桌」?推薦我的知識星球，一年 50 個優質問題，上桌聯機學習。
推薦閱讀：
寫作是核心競爭力 | Google 工程師解密“猜畫小歌” | 圖解：HTTP 範圍請求 | Android P 適配經驗 | 技術創業選擇清單 | HTTP傳輸編碼 | 什麼正在消耗你？ | HTTP 內容編碼 | 圖解 HTTP 快取 | 聊聊 HTTP 的 Cookie | 輔助模式實戰 | Accessibility 輔助模式 | 小程式 Flex 佈局 | 好的 PR 讓你更靠譜 | 密碼管理之道
