Chrome 瀏覽器多進程架構 3個 必會知識點

🙋 本文全長 20 分鐘 , 市場價值￥ xxx9.9 元, 建議在時間充裕下進行詳細閱讀。

🈯️ 讀本章節內容中,帶着如下三個問題進行閱讀,更加有助於理解

Problem1 : 打開一個頁面須要啓動進程的配比是什麼？<br/>
Problem2 : 爲什麼瀏覽器要使用多進程架構設計？<br/>
Problem3 : 多進程架構爲什麼仍會因爲單頁面卡死致使全部頁面崩潰？<br/>

若是想要設計高性能 Web 應用，仍是要優化現有的 Web 應用，<br/>
都須要瞭解瀏覽器中的網絡流程、頁面渲染過程，JavaScript 執行流程，以及 Web 安全理論。

在本文中，全部的分析都是基於 Chrome 瀏覽器的。<br/>
由於 Chrome、微軟的 Edge 以及國內的大部分主流瀏覽器，都是基於 Chromium 二次開發而來；<br/>
再加上 Chrome 是目前世界上使用頻率較高的瀏覽器，因此 Chrome 具備表明性。

🌍 打開一個頁面須要啓動多少進程？

在開始以前，咱們一塊兒看下，Chrome 打開一個頁面須要啓動多少進程？你能夠點擊 Chrome 瀏覽器右上角的「選項」菜單，選擇「更多工具」子菜單，點擊「任務管理器」，這將打開 Chrome 的任務管理器的窗口，以下圖：

那打開一個頁面須要啓動 7 個進程？其實不是的。

圖片裏的擴展程序：Dark Reader 這個是我本機安裝的適用於任何網站的黑暗主題擴展程序，因此也佔用了進程；<br/>
實用程序：Audio Service 是用於處理音頻的，也並不是是必定要使用的。<br/>
Storage Service 即便頁面未啓用 WebStorage, 該進程也會啓動並得到內存空間分配, 不過此時 CPU 佔用爲 0.0

🤔️ 因此打開一個頁面基本要使用到的進程配比究竟是什麼樣的？（ ⌛️ 請容許我先將這個問題掛起）

在解答這個問題以前，咱們須要瞭解一下進程的概念，由於好多人容易把進程和線程的概念混淆，<br/>
因此這裏就將這兩個概念以及它們之間的關係一併講解下。

瞭解進程和線程

在介紹進程和線程以前，須要先講解下什麼是並行處理。<br/>
若是你理解了並行處理的概念，那麼再理解進程和線程之間的關係就會變得輕鬆許多。<br/>

計算機中的並行處理就是同一時刻處理多個任務。<br/>
<br/>
🌰 舉個例子：咱們要計算下面這三個表達式的值，並顯示出結果<br/>

A = 6+6
B = 6/6
C = 6*6

🚴 正常狀況下程序可使用 單線程 來處理，也就是分四步按照順序分別執行這 四個 任務<br/>

任務 1 是計算 A=6+6；
任務 2 是計算 B=6/6；
任務 3 是計算 C=6*6；
任務 4 是顯示最後計算的結果。

🚗 採用多線程，會怎麼樣呢？<br/>
咱們只需分「兩步走」：第一步，使用三個線程同時執行前三個任務；<br/>
第二步，再執行第四個顯示任務

經過對比分析，你會發現用 🚴 單線程執行須要四步，而使用 🚗 多線程只須要兩步。所以，使用並行處理能大大提高性能。

進程和線程的關係

多線程能夠並行處理任務，可是線程是不能單獨存在的，它是由進程來啓動和管理的。那什麼又是進程呢 💡 ？

一個進程就是一個程序的運行實例。（話很少說，上圖)

能夠看到，線程是依附於進程的，而進程中使用多線程並行處理能提高運算效率。

總結來講，進程和線程之間的關係有如下 4 個特色 （🔎 這裏不作詳細介紹，感興趣的能夠自查資料）<br/>

1.進程中的任意一線程執行出錯，都會致使整個進程的崩潰。
2.線程之間共享進程中的數據。（線程之間能夠對進程的公共數據進行讀寫操做）
3.當一個進程關閉以後，操做系統會回收進程所佔用的內存。（即便其中任意線程由於操做不當致使內存泄漏,內存也會被正確回收)
4. 進程之間的內容相互隔離。(只能訪問本身佔有的數據，也就避免出現進程 A 寫入數據到進程 B 的狀況)

🪐 單進程瀏覽器時代 VS 多進程瀏覽器時代

🏎️ 單進程瀏覽器時代

了進程和線程以後，咱們再來一塊兒看下單進程瀏覽器的架構。。<br/>
顧名思義，單進程瀏覽器是指瀏覽器的全部功能模塊都是運行在同一個進程裏，這些模塊包含了網絡、插件、JavaScript 運行環境、渲染引擎和頁面等。

如此多的功能模塊運行在一個進程裏，是致使單進程瀏覽器不穩定、不流暢和不安全的一個主要因素。<br/>
分析下出現問題的緣由<br/>

1：不穩定 ❌<br/>
早期瀏覽器須要藉助於插件來實現諸如 Web 視頻等各類強大的功能，可是插件是最容易出問題的模塊，而且還運行在瀏覽器進程之中，因此一個插件的意外崩潰會引發整個瀏覽器的崩潰。

2：不流暢 ❌<br/>
從上圖能夠看出，全部頁面的渲染模塊、JavaScript 執行環境以及插件都是運行在同一個線程中的，這就意味着同一時刻只能有一個模塊能夠執行<br/>

function star() {
  while (true) {
    console.log("什麼是快樂星球？");
  }
}
star();

若是建立一個無限循環的腳本，運行在一個單進程瀏覽器的頁面裏，你感受會發生什麼？<br/>
由於這個腳本是無限循環的，當其執行時它會獨佔整個線程，致使其餘運行在該線程中的模塊就沒有機會被執行，結果就是整個瀏覽器失去響應，變卡頓。

3：不安全 ❌<br/>
這裏能夠從插件方面來解釋該緣由。<br/>
插件可使用 C/C++ 等代碼編寫，經過插件能夠獲取到操做系統的任意資源，當你在頁面運行一個插件時也就意味着這個插件能徹底操做你的電腦。若是是個惡意插件，那麼它就能夠釋放病毒、竊取你的帳號密碼，引起安全性問題。

以上這些就是單進程架構瀏覽器的特色，不穩定，不流暢，並且不安全。你能夠想象一下這樣的場景：當你正在用瀏覽器打開多個頁面時，忽然某個頁面崩潰了或者失去響應，隨之而來的是整個瀏覽器的崩潰或者無響應，而後你發現你給老闆寫的郵件頁面也隨之消失了，這時你的心情會不會和頁面同樣崩潰呢？

🚀 多進程瀏覽器時代

從圖中能夠看出，最新的 Chrome 瀏覽器包括：1 個瀏覽器（Browser）主進程、1 個 GPU 進程、1 個網絡（NetWork）進程、多個渲染進程和多個插件進程。

咱們來逐個分析下這幾個進程的功能。<br/>

1.📒 瀏覽器進程。主要負責界面顯示、用戶交互、子進程管理，同時提供存儲等功能。<br/>

因爲進程是相互隔離的，因此當一個頁面或者插件崩潰時，影響到的僅僅是當前的頁面進程或者插件進程，並不會影響到瀏覽器和其餘頁面，這就完美地解決了頁面或者插件的崩潰會致使整個瀏覽器崩潰，也就是不穩定的問題。

不穩定問題得以解決 ✅

2.📒 渲染進程。核心任務是將 HTML、CSS 和 JavaScript 轉換爲用戶能夠與之交互的網頁，默認狀況下，Chrome 會爲每一個 Tab 標籤建立一個渲染進程。<br/>

JavaScript 也是運行在渲染進程中的，因此即便 JavaScript 阻塞了渲染進程，影響到的也只是當前的渲染頁面，而並不會影響瀏覽器和其餘頁面，由於其餘頁面的腳本是運行在它們本身的渲染進程中的。因此當咱們再在 Chrome 中運行上面那個死循環的腳本時，沒有響應的僅僅是當前的頁面。

不流暢問題得以問題 ✅

出於安全考慮，渲染進程都是運行在沙箱模式下。

能夠把沙箱當作是操做系統給進程上了一把鎖，沙箱裏面的程序能夠運行，可是不能在你的硬盤上寫入任何數據，也不能在敏感位置讀取任何數據，例如你的文檔和桌面。

Chrome 把插件進程和渲染進程鎖在沙箱裏面，這樣即便在渲染進程或者插件進程裏面執行了惡意程序，惡意程序也沒法突破沙箱去獲取系統權限。

安全問題得以解決 ✅

3.📒 GPU 進程。GPU 的使用初衷是爲了實現 3D CSS 的效果，只是隨後網頁、Chrome 的 UI 界面都選擇採用 GPU 來繪製，這使得 GPU 成爲瀏覽器廣泛的需求。最後，Chrome 在其多進程架構上也引入了 GPU 進程。<br/>

4.📒 網絡進程。主要負責頁面的網絡資源加載，以前是做爲一個模塊運行在瀏覽器進程裏面的，後來成爲一個單獨的進程。<br/>

5.📒 插件進程。主要是負責插件的運行，因插件易崩潰，因此須要經過插件進程來隔離，以保證插件進程崩潰不會對瀏覽器和頁面形成影響。<br/>

6.📒 實用進程 AudioService 是用於處理音頻的，也並不是是必定要使用的。

7.📒 實用進程 StorageService 是用於處理本地存貯的,包括 Storage（LocalStorage、SessionStorage)、Cache（CacheStorage、ApplicationCache）。

<br/>

✨ ✨ ✨ ✨ ✨ ✨ ✨✨✨✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨✨✨✨<br/>
✨ 講到這裏，就能夠回答文章開頭提到的前兩個問題了 ✨<br/>
✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨✨✨✨✨✨

<br/>

1. 一個瀏覽器進程 + 1個GPU進程 + 1個網絡進程 + 1個？渲染進程 + 多個插件進程 + StorageService
至少有6個進程啓動: 瀏覽器主進程、GPU進程、NetworkService、當前標籤頁渲染進程、插件進程、StorageService
若是有音視頻場景的話 還需加載 AudioService場景

2. 單進程架構瀏覽器的特色不穩定，不流暢，不安全，都被多進程架構解決處理 (凡事都有兩面性，提高的同時也帶來一些問題，更高的資源佔用、更復雜的體系架構)。

🌕 多進程爲什麼仍會因爲單頁面卡死致使全部頁面崩潰？

問題講解以前，要先講一下打開 Tab 頁時 是「1 個」渲染進程 仍是「多個」渲染進程?<br/>
<br/>
先了解下什麼是同一站點（same-site）。<br/>
具體地講，咱們將「同一站點」定義爲根域名（例如，firstleap.cn）加上協議（例如，https:// 或者 http://），還包含了該根域名下...

https://wukong.firstleap.cn
https://www.firstleap.cn
https:///www.firstleap.cn:8080

🆚 Chrome 的默認策略(process-per-site-instance)是每一個標籤對應一個渲染進程。但若是從一個頁面打開了另外一個新頁面，而新頁面和當前頁面屬於同一站點的話，那麼新頁面會複用父頁面的渲染進程。

🆚 若新頁面和當前頁面不屬於同一站點 , 好比我經過掘金頁面裏的連接打開 InfoQ 的官網（https://www.infoq.cn/ ）， 由於 infoq.cn 和 juejin.cn 不屬於同一站點，因此 infoq.cn 會使用一個新的渲染進程。

總結 :
A: 一般狀況下，打開新的頁面都會使用單獨的渲染進程；
B: 若是從 A 頁面打開 B 頁面，且 A 和 B 都屬於同一站點的話，那麼 B 頁面複用 A 頁面的渲染進程；

所以，當多個頁面屬於同一站點，共享一個渲染進程，當某個頁面崩潰的時候，也將致使同一站點的其餘頁面也崩潰。

參考文獻

https://xie.infoq.cn/article/...