現代瀏覽器內部機制 Part 1 | 多進程架構

原文: Inside look at modern web browser (part 1)
做者: Mariko Kosaka
翻譯: kyrieliu

在這個有 4 篇文章的系列中，咱們會把 Chrome 瀏覽器扒個精光 —— 上到瀏覽器的總體架構，下至頁面的渲染規則。若是你對瀏覽器把代碼變成一個具有功能的網站這件事情感到好奇，或者不肯定爲何特定的技術會對頁面的性能有所改進，那麼強烈建議你看完這一系列。

在這篇文章中（Part 1），我將介紹一些核心的計算機術語和 Chrome 的多進程架構。

友情提示：若是你對 CPU/GPU 的概念很熟悉的話，能夠直接去看瀏覽器架構的部分。

CPU 和 GPU

爲了更好的瞭解瀏覽器的運行環境，咱們首先須要知道幾個計算機的構成部分以及它們分別是作什麼的。

CPU

首先要知道的概念是中央處理器（Central Processing Unit），也就是咱們常說的 CPU。

CPU 能夠看做是整個計算機的大腦。在上面這張圖中，一個 CPU 核被比喻成了一個工位上的社畜，當有不一樣的任務傳遞進來時，它能夠一個一個的去處理這些任務。當 CPU 知道如何響應人們的需求時，它幾乎能夠處理各式各樣的任務，好比數學，或是藝術。在早些年，CPU 都是由單芯片所構成。每一個核就像是在芯片中又存在着另外一個 CPU。現代的電子設備基本上都是多核驅動的，這讓人們的手機和電腦都具有了更強的計算能力。

GPU

咱們須要瞭解的另外一部分，就是圖形處理器（Graphics Processing Unit），也就是 GPU。

和 CPU 不一樣的是，GPU 擅長同時處理跨多核的簡單任務。正如它的名字，在設計之初是用來處理圖形的。這也正是爲何當圖形任務的處理和 GPU 關聯起來的時候，一般帶來的都是更快速的渲染和更流暢的交互。近年來，隨着 GPU 的不斷加速和升級，愈來愈多的計算均可能直接被放在 GPU 上進行了。

當你在手機或電腦上啓動一個應用時，CPU 和 GPU 就是爲那個應用提供「能量」的兩個小兄弟。一般，應用程序經過操做系統提供的「機制」在 CPU 和 GPU 上運行。

在進程和線程上執行程序

在講解瀏覽器架構以前，咱們還須要瞭解進程和線程。

進程能夠描述爲一個應用程序的執行程序。線程則是進程內部用來執行某個部分的程序。

當你啓動一個應用時，一個進程就被建立了。程序可能會建立一些線程幫助它完成某些工做，但這不是必須的。操做系統會劃分出一部份內存給這個進程，當前應用程序的全部狀態都將保存在這個私有的內存空間中。當你關閉應用時，進程也就自動蒸發掉了，操做系統會將先前被佔用的內存空間釋放掉。

進程可讓操做系統再另起一個進程去處理不一樣的任務。當這種狀況發生時，新的進程又將佔據一塊內存空間。當兩個進程須要通訊時，它們能夠用一個叫作進程間通信（Inter Process Communication）的辦法解決。許多應用程序都被設計成以這種方式進行工做，因此當其中一個進程掛掉時，它能夠在其餘進程仍然運行的時候直接重啓。

瀏覽器架構

終於要進入這個話題了。因此瀏覽器是如何經過進程和線程創建起來的呢？有時會是一個進程和多個不一樣的線程，或是多個進程和少數線程。

這裏要注意的一點是，這些不一樣的體系架構是實現上的細節，至今沒有任何一個規範去限制瀏覽器應該被作成什麼樣子，不一樣的瀏覽器之間的架構可能徹底不一樣。

在這個系列中，咱們以 Chrome 的最新架構爲準。

首先是瀏覽器的自身進程，它負責與其餘進程協做，主要負責瀏覽器應用的不一樣部分，如網絡、內存等（這句很差翻，貼上原文：At the top is the browser process coordinating with other processes that take care of different parts of the application）。至於渲染進程，瀏覽器會爲每一個窗口分配一個渲染進程。在最近的一次更新中，若是夠用的話，Chrome 乾脆給每一個窗口分配了一個進程；而如今，Chrome 在致力於給每一個站點一個獨立的進程，包括 iframe。

每一個進程都負責些啥？

進程	負責些啥？
瀏覽器進程	負責 chrome 的瀏覽器功能，包括導航欄、書籤、後退、前進按鈕。固然也負責一些雖然看不到但也很重要的部分，好比網絡請求和文件訪問。
渲染進程	窗口內的網站將如何呈現
插件進程	控制着網站可能用到的全部插件，好比 flash
GPU 進程	處理 GPU 任務，與其餘進程隔離。它被劃分爲不一樣的進程由於 GPU 會處理來自多個應用程序的請求並將其繪製在同一個平面上。

實際上還會有更多的進程，好比擴展進程和工具進程。若是你想看 Chrome 到底會啓動多少個進程，打開右上角的菜單，更多工具，接着選擇「任務管理器」。這將會打開一個新的窗口，裏面是當前正在運行的進程列表，而且會直觀的告訴你目前佔用了多少 CPU 和內存（Chrome 吃內存的傳言真不是蓋的）。

Chrome 多進程架構的好處

以前有提到，Chrome 用的是多進程的渲染方式，最容易想到的場景就是每一個窗口（Tab）都有一個獨立的渲染進程。假設你打開了三個瀏覽器窗口，當其中一個窗口由於某種緣由崩掉的時候，你大能夠直接關閉這個再也不響應的窗口並繼續你在其餘窗口的工做。咱們換一個瀏覽器，全部的窗口都共享同一個進程，當一個窗口掛掉的時候，全部的窗口都直接掛掉了（像不像理財的時候人們老是說：「不要把全部的錢放在同一個錢包裏」？）。

將瀏覽器的工做拆分紅不一樣的進程還有一個好處，就是安全。因爲操做系統提供了一種限制進程「權限」的方法，所以瀏覽器能夠將特定的功能和進程有效的隔離開。好比，Chrome 會限制用來處理用戶輸入的渲染進程去直接訪問文件。

每一個進程都有各自的內存空間，所以它們常會各自擁有一份基礎功能的拷貝。正由於它們之間不像同一進程中的線程那樣可以共享資源，因此就須要更多的內存佔用。爲了節省內存，Chrome 對其自身可調用的進程在數量上作了限制。具體的限制大小在不一樣性能的機器上各不相同，惟一肯定的是，當達到了這個上限後，Chrome 會將同站點的多個窗口交給同一個進程來管理。

Chrome 服務化 —— 節省更多的內存

瀏覽器進程也應用了相同的方案。Chrome 正在進行架構層面的整改，目的是將瀏覽器的各部分功能變成獨立的服務，這樣就能輕鬆的將其拆分爲不一樣的進程，也能更加靈活的互相組合。

總的來講，當 Chrome 在較高性能的設備上運行時，它會將每一個服務分配至不一樣的進程，以此來得到更強的運行時穩定性和健壯性；反之，若是 Chrome 運行在一臺資源受限的設備上時，Chrome 會將服務整合在一個進程中，以此來節省內存的佔用。像這種經過整合進程資源以此來節省內存的手段，已經被用於 Android 上了。

站點隔離（Site Isolation）

站點隔離是 Chrome 在其 67 桌面版上新增的特性，基本原則是不一樣的站點各自運行在本身的沙箱環境中，獨享進程，而且不容許通訊。咱們已經討論過每一個窗口一個進程的模型，在這個模型中，瀏覽器容許跨站點的 iframe 獨立進程共享不一樣站點之間的內存空間。早先在一個渲染進程中（窗口）同時運行 a.com 和 b.com 看起來沒有什麼問題，由於有同源策略，確保一個站點未經贊成就沒法訪問其餘站點的數據。繞過同源策略基本上成爲了全部安全攻擊的指導方針。而進程間的相互隔離是將站點分開的最佳途徑（感興趣的同窗能夠去了解一下 Meltdown 和 Spectre 攻擊）。

通過多年的工程上的努力，現在的站點隔離已經默認爲用戶開啓了。事實上，站點隔離並不只僅是爲站點分配不一樣的渲染進程這麼簡單，它從根本上改變了 iframe 之間的通訊方式。打開運行有不一樣站點 iframe 的開發者工具，意味着瀏覽器必須作不少看不到的幕後工做，才能讓這一切看起來和之前沒有什麼區別，即便是簡簡單單的 ctrl+F 在這個場景下也意味着在不一樣的渲染進程中查詢字符串。網上有不少文章介紹瀏覽器的站點隔離策略，當你看完那些以後就會意識到，爲何站點隔離值得 Chrome 團隊爲其發佈一個獨立版本了。

總結

在這篇文章中，咱們從宏觀的角度瞭解了瀏覽器的架構以及這種多進程架構的好處。咱們也提到了 Chrome 的服務化以及站點隔離，這些和多進程的架構都有着很深的淵源。

在下一篇文章中，咱們會深刻了解在爲用戶呈現一個網站時，這些進程和線程之間會發生什麼。

後記

歡迎關注「凱里的前端專欄」，雖然我更新慢，但保證每一篇都是本身用心分享給你。若是你也喜歡討論前端技術，或者是對本文/本人有任何建議，很是歡迎加凱里微信好友一塊兒探討。固然，圍繞着前端的任何話題均可以來找我聊～ 凱里的微信號是：K-I2ving