翻譯｜揭示現代瀏覽器原理(1) — Chrome官方

原文：Inside look at modern web browser (part 1)

CPU, GPU, 內存, 以及多進程架構

這個系列共有4篇，咱們將會從Chrome瀏覽器的高層架構談到到渲染管道的細節。若是你曾好奇瀏覽器是怎麼將你的代碼生成網頁，或者你不清楚一些性能優化的實踐是創建在哪些原理上的，那這個系列就是爲你而準備的。

在這一篇，咱們將會談一些關於計算核心的術語和Chrome的多進程架構。

★ 提醒：若是你對CPU/GPU的概念和進程/線程這些概念比較熟悉，能夠跳到瀏覽器架構的部分

CPU和GPU是計算機的核心

爲了更好了解瀏覽器運行的環境，咱們須要先講講計算的部分構成以及它們的做用。

CPU

首先是中央處理器，英文簡稱CPU。能夠理解爲計算機的大腦，由若干個核（即運算單元）組成。能夠把CPU的核想象成一個社畜，當接到不一樣的任務時，他會一個一個地去處理（以下圖）。從數學計算到圖形處理，只要他知道如何處理你的需求，他都會搞定。之前，大多數CPU都是獨立的芯片（即沒有集成內存、GPU等），一個核更像是同塊芯片內的另外一個CPU。現代硬件裏，一般都是多核的CPU，而且集成了除計算之外的能力，讓手機和電腦擁有更強的算力。

注：CPU通常會有多個核，就是市面上宣傳的雙核、四核等概念。

CPU的每一個核像社畜同樣在辦公桌上等着任務進來

GPU

圖形處理單元，英文簡稱GPU，是計算機的另外一個組成部分。不像CPU，GPU則擅長利用多核同時處理單一的任務。經過名字能夠知道，它就是爲了處理圖像而生的。這也就是爲何圖像的渲染速度和交互流暢度，常常與「GPU使用」和「GPU支持」這些內容所關聯。近些年，利用GPU加速，GPU能夠獨自完成愈來愈多的計算工做。

這裏補充一下，引用網上的通俗比喻，CPU是一個博士啥都懂，顯卡是千萬個小學生同時計算一個公式。CPU只能一件件的解算，顯卡能夠千萬（上億）個同時解算。

許多GPU核拿着扳手，意味着它們每一個只能作有限的工做

當你在電腦或手機啓動並運行一個應用程序，這個過程須要CPU和GPU來完成，一般這個過程有操做系統的調度機制去處理。

計算機架構分三層：硬件在底層提供能力，操做系統在中間調度，應用程序在最上層運行

經過進程和線程執行程序

在講瀏覽器架構前，還有一個概念須要掌握，就是進程與線程。進程能夠理解爲一個正在運行的程序。線程則存在進程中，去執行進程中程序的各個部分。

當你啓動一個程序，就建立了一個進程，這個程序會選擇性地建立若干個線程去幹活。在運行程序的過程當中，操做系統會分配給進程「內存塊」，是這個程序私有的內存空間，用來存儲程序的相關狀態。當你退出程序，則進程消失，操做系統會將它以前佔用的內存釋放。

進程是一個盒子，線程則能夠想象成盒子裏暢遊的魚

點擊查看動畫：使用內存空間並存儲應用程序數據的過程

一個進程能夠要求操做系統啓動另外一個進程來運行不一樣的任務。發生這種狀況時，將爲新進程分配不一樣的內存。若是兩個進程間須要交換信息，它們能夠經過進程間通信機制（IPC）來實現。許多應用程序都有多進程設計，每一個模塊功能開一個進程，這樣若是一個進程故障了，還能保證其餘正常運行。

點擊查看動畫：圖解多進程通信

瀏覽器架構

那麼一個網頁瀏覽器是怎麼經過進程和線程構建出來的呢？簡單來講，他能夠是由一個進程和許多不一樣的線程組成，也能夠是許多不一樣的進程和一些經過IPC通信的線程。

基於進程/線程的不一樣瀏覽器架構

須要說明的是，瀏覽器架構是沒有一個標準的，以上都是兩種實現方案，不一樣瀏覽器間的架構可能會有天壤之別。

而在這個系列，咱們將會針對Chrome瀏覽器最近版本的架構，用圖解的方式來說解瀏覽器架構。

瀏覽器有一個主進程，他與負責其餘模塊的進程協做。對於渲染進程，它會被建立屢次並分配給每一個分頁（tab）。目前，Chrome的調度機制是儘量給每一個分頁單首創建一個渲染進程，如今還在嘗試給每一個網站建立單獨的進程，包括iframe。（詳情點擊查看）

Chrome多進程架構：圖中渲染進程（Render Process）有多層，表示Chrome建立了多個渲染進程爲每一個分頁服務

進程的分工是怎樣的呢？

詳見下表：

進程的分工
瀏覽器主進程	控制着一些交互上的功能，如地址欄、書籤、前進後退按鈕。固然也包括瀏覽器底層的控制，如網絡請求和文件操做權限
渲染	控制分頁內，網頁展現的一切
插件	控制瀏覽器所使用的插件，如flash
GPU	脫離其餘進程，單獨完成圖像處理任務。它還會被分解成多個進程，用於處理不一樣應用的需求，並將其繪製在同一個面板上

不一樣的進程指向不一樣的模塊

還有更多進程沒有提到，如擴展程序進程和瀏覽器工具進程。若是你想看看有哪些進程運行在你的Chrome上，點擊右上角菜單按鈕 -> 更多工具 -> 任務管理器。就會打開一個窗口展現給你看，如今有哪些進程在運行，分別消耗了多少CPU和內存資源。

Chrome多進程架構的優點

前面，我提到Chrome使用多渲染進程。你想象一下，在大多數狀況下，Chrome爲每一個分頁（tab）單首創建一個渲染進程。好比有三個分頁，若是其中一個卡住了，那麼你能夠關掉它，繼續使用其餘分頁。若是全部分頁共用一個進程，那很不幸，掛一個全遭殃。

點擊查看動畫：分頁擁有單獨渲染進程

多進程架構另外一個優點是安全性和沙盒。由於操做系統提供了限制進程權限的方法，因此瀏覽器能夠將某些進程隔離起來。例如，像渲染進程這種須要處理用戶輸入的進程，Chrome會限制它對任意文件的訪問權限。

由於這些進程都有本身專門的內存空間，他們一般會拷貝一份通用的基礎工具庫進去（好比Chrome的JavsScript解析引擎V8）。這意味着，若是不是同一進程裏的線程則不能共享這些基礎工具庫，形成了內存浪費。爲了減小這種浪費，Chrome對進程的數量會有所限制，具體取決於你設備的CPU和內存。當Chrome開的進程數達到了設定的極限，它會開始將同一個網站的分頁（tab）運行在同一個進程中，再也不爲每一個分頁單獨開進程。

節約更多內存 - Chrome的服務化

Chrome正在進行架構更改，將這個成熟的方案運用在瀏覽器的進程管理中，以將瀏覽器程序的每一個部分做爲一項服務運行，從而能夠輕鬆拆分爲不一樣的進程或聚合爲一個進程。

大概就是當Chrome跑在高性能的機子上，它會將功能服務拆分進不一樣的進程，從而得到更高的穩定性。相反，若是跑在一些「小霸王」上，則將服務聚合到一個進程上以減小內存佔用。在Chrome的此次調整以前，Android平臺已經運用這套方案將進程合併來下降內存佔用。

點擊查看動畫：服務在多進程和單進程間切換

分站渲染進程 - 站點隔離

站點隔離是最近被引進Chrome的特性，爲每一個站點（即網站）開一個單獨的渲染進程。以前談到每一個分頁（tab）單獨開一個渲染進程，容許不一樣站點在其中運行，並共享內存空間。a.com和b.com運行在同一個渲染進程，由於有同源策略的存在，它是web的核心安全模型，它保證了兩個站點間在沒有對方容許的狀況下，不能夠傳輸數據。但這樣仍是有隱患，網站安全攻擊經常會以繞過此安全策略爲首要目標，因此解決這種隱患最有效的方案就是站點隔離。再加上出現溶毀和幽靈漏洞，就更須要將站經過不一樣進程分開。從桌面版Chrome 67開始，分頁內跨站點的iframe都默認會爲其單獨開一個渲染線程。

分頁內不一樣站點的iframe都被分配了單獨的渲染進程（Render Process）

使站點互相獨立是多年工程攻堅的成果，這並不只僅是分配渲染進程這麼簡單。它改變了iframe間通訊的底層實現，在運行有若干個iframe的頁面，每一個iframe有本身的進程，當你按F12打開chrome開發者工具時，Chrome後臺須要作許多工做才能使開發者工具的啓動無縫銜接。哪怕只是簡單地用 Ctrl+F 檢索全文，也須要經過搜索不一樣進程中的內容來獲得準確結果。這也是爲何瀏覽器工程師談起站點隔離時，會說這是個重要的里程碑。

總結一下

這篇文章，咱們縱覽了瀏覽器的架構和了解了多進程架構的優點。也看到了Chrome的服務化和站點隔離跟多進程架構的緊密聯繫。在下一篇，進程與線程時如何合做去展現一個網頁的。

若有翻譯錯誤，歡迎指正