[譯] Google 圖解：Chrome 快是有原因的，科普瀏覽器架構

Chrome 谷歌 · 發表 2018-09-20 11:12:38

摘要：文 | Mariko Kosaka 譯 | 承香墨影 Chrome 是程式員的標配了，而從全球的市場份額來看，它在全球市場的份額已經超過 60%。在 Chrome 10 週年之際，官方釋出了一個系列文章，用圖解的方式，很清晰的講解了現代瀏覽器的執行原...

文 | Mariko Kosaka

譯 | 承香墨影

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 中，與多程序架構密切相關的服務化和站點隔離。在下一篇文章中，我們將開始深入研究這些程序和執行緒之間發生的事情，以便顯示一個網站。

看完本文，你理解 Chrome 為什麼這麼快了嗎？為什麼配置越好的裝置可以做到越流暢？歡迎在留言區討論。

本文是本系列的第 1 篇，如果喜歡可以點贊、留言、轉發以示支援，後續再有新文章釋出，我會持續翻譯。

原文地址：

https://developers.google.com/web/updates/2018/09/inside-browser-part1

「聯機圓桌」:point_left:推薦我的知識星球，一年 50 個優質問題，上桌聯機學習。

公眾號後臺回覆成長『成長』，將會得到我準備的學習資料，也能回覆『加群』，一起學習進步；你還能回覆『提問』，向我發起提問。