[譯]從內部瞭解現代瀏覽器(1)

原文，Mariko Kosaka

[譯]從內部瞭解現代瀏覽器(1)

[譯]從內部瞭解現代瀏覽器(2)

[譯]從內部瞭解現代瀏覽器(3)

CPU，GPU，內存和多線程架構

在本系列的四篇文章中，咱們會從內部瞭解Chrome架構中渲染流的細節；若是你想知道瀏覽器是怎麼把你的代碼變成一個功能站點的話，或者你不清楚爲何建議使用特定的技術來改善性能，這個系列就是爲你準備的；

做爲本系列的第一篇， 咱們來看一看一些重要的計算機術語和Chrome的多進程架構；

計算機的核心CPU和GPU

爲了理解瀏覽器的運行環境， 咱們須要理解一些重要的計算機硬件和它們的做用；

CPU

第一個就是計算機核心處理單元-CPU(Central Processing Unit)，CPU能夠被認爲是你計算機的大腦。一個CPU內核， 能夠看作是一個辦公室文員，能夠一個接着一個處理不一樣的任務；它能夠處理從數學到藝術的全部事情，知道如何回覆客戶的電話。在過去，大多數CPU只是一個芯片；核心就像是在同一塊芯片上的另外一個CPU；在現代硬件中，一般有不止一個核心，爲你的手機和電腦提供更多的計算能力;

圖1：每一個核心均可以處理多種任務

GPU

圖形處理單元-GPU(Graphics Processing Unit)是另外一個計算機的重要部件；與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的核心安全模型， 它確保一個站點在未經贊成的狀況下沒法訪問其餘站點的數據。 繞過此策略是安全攻擊的主要目標。 進程隔離是分離站點的最有效方法。 隨着Meltdown/Spectre(漏洞)的出現，顯而易見，咱們更加須要使用進程來隔離站點。 默認狀況下，自Chrome 67啓用隔離功能後，選項卡中的每一個跨站點iframe都會得到單獨的渲染器進程。

圖12：多個渲染器進程指向站點內的iframe

啓用站點隔離是一項進行多年的工程。 站點隔離並不像分配不一樣的渲染器進程那麼簡單; 它從根本上改變了iframe彼此交流的方式。 在具備在不一樣進程上運行的iframe的頁面上打開devtools意味着devtools必須實現幕後工做以使其看起來無縫鏈接。 即便運行簡單的Ctrl + F來查找頁面中的單詞也意味着搜索不一樣的渲染器進程。 您能夠看到瀏覽器工程師將Site Isolation的發佈做爲一個重要里程碑的緣由！

總結

在這篇文章中，咱們介紹了瀏覽器體系架構的高級視圖，並介紹了多進程體系架構的優勢。咱們還介紹了Chrome中與多進程架構密切相關的服務化和站點隔離。在下一篇文章中，咱們將開始深刻研究這些進程和線程之間發生的事情，以及如何顯示一個網站。