瀏覽器進程的理解與研究

瀏覽器是每一位前端工程師都須要學習的一個模塊。瞭解它，可讓你直到咱們的js是怎麼跑起來的，頁面又是怎麼渲染的，同時我怎麼佈局可讓頁面的性能更好，等等。所以決定靜下新來好好研究一下。

從進程與線程開始

回顧進程與線程

什麼是進程

進程是cpu資源分配的最小單位（是能擁有資源和獨立運行的最小單位）

什麼是線程

線程是cpu調度的最小單位（線程是創建在進程的基礎上的一次程序運行單位，一個進程中能夠有多個線程）

總結

進程能夠當作是一個工廠，工廠與工廠之間相互獨立，也就是說：進程之間相互獨立 線程就是工廠中的工人，一個工廠裏能夠有好幾個工人，他們相互協做，也就說，一個進程下能夠有多個線程，固然也能夠只有一個(工人)線程 工廠的資源也就是系統分配的內存空間

瀏覽器是單進程仍是多進程

這個其實並沒有標準的答案，只是但願同窗們能夠本身發散一下假如是你設計一個瀏覽器你會用單進程仍是多進程。
但實際上瀏覽器能夠是單進程，也能夠是多進程。每一個廠家都有本身的實現方案，因此這並不是一個統一的標準。

單進程多線程應用

如圖所示，咱們能夠建立一個主進程，而後這個進程能夠分配出多個線程，多線程其實有不少好處，憑藉我有限的知識我認爲能夠有這些好處：

1. 在不少場景下會提升效率，由於內存是能夠共享的。
2. 能減小內存的佔用。
3. 減小進程間的IPC通訊，挺高性能。

• 歡迎你們留言增長....

可是實際上他的問題也不少：

1. 穩定性更高，若是進程崩潰就須要所有從新啓動。
2. 安全性不行，有些私密信息很容易被獲取到。

• 歡迎你們留言增長....

多進程應用

如圖所示，咱們能夠建立多個進程，而後這幾個進程就能夠經過互相通訊進行配合以及協調工做。
進程與進程以前是經過IPC進行通訊。
能夠有這些好處：

1. 穩定性更好，一個進程崩潰不會影響到其餘進程。
2. 安全性更好，主進程的數據能夠選擇不讓其餘進程獲取。

• 歡迎你們留言增長....

可是實際上他的問題也不少：

1. 若是隻是單頁面的話就會很是耗內存。

• 歡迎你們留言增長....

固然，Chrome其實自己也是對這些進行了優化，他也知道多進程耗費內存，單進程下多線程效率高等，所以他們在官方文章裏也說了

When Chrome is running on powerful hardware, it may split each service into different processes giving more stability, but if it is on a resource-constraint device, Chrome consolidates services into one process saving memory footprint.

在一些狀況下，好比：UI、 Network等進程可能會被下調爲主進程（Browser Process）下線程。

瀏覽器中咱們常見的進程

Browser process（瀏覽器的主進程）

他主要負責協調與主控，好比咱們一些頂部的交互按鈕，前進、後退、刷新等，建立和銷燬其餘進程，界面的展現...

Plugin process（三方插件的進程）

每個插件有獨立的進程，防止某一個進程要是掛掉了，影響其餘的進程工做。

Network process（三方插件的進程）

主要負責網絡資源的加載等。

GPU process（三方插件的進程）

將GPU任務與其餘進程隔離。由於GPU處理會來自多個進程的請求並將它們繪製在同一表面上。

Render process（渲染進程）

用於渲染頁面，執行腳本，處理事件等等。

Chromium的幾種進程模式

咱們以前也說Chrome在某些狀況下會合並一些進程，成爲單進程下的多線程，可是這是一種模式。那接下來咱們能夠詳細瞭解一下，具體有哪幾種進程模式。

首先咱們科普一些概念：

1. site 指的是相同的 registered domain name

好比 https://z.baidu.com 和 https://b.baidu.com 就能夠理解爲同一個 site
2. site-instance 知足下面兩中狀況而且打開的新頁面和舊頁面屬於上面定義的同一個 site，就屬於同一個 site-instance * 用戶經過<a target="_blank">這種方式點擊打開的新頁面 * JavaScript code 打開的新頁面（好比 window.open)

Process-per-tab(每一個 tab 使用一個進程)

這個很好理解，就是每一個tab單獨一個進程，有點燒內存。

Single process(全部 tab 共用一個進程)

這個反之，全部的tab共用一個進程。

Process-per-site（同一個 site 使用一個進程）

這個你們能夠這麼理解，假如我點開了兩個網頁一個是m.wandougongzhu.com,一個是activity.wandougongzhu.com，那麼這兩個tab就會共用同一個進程，那咱們考慮一下，假如你在m.wandougongzhu.com裏邊寫了一個bug，引發頁面崩潰，那麼實際上activity.wandougongzhu.com也會跟着崩潰，由於他倆屬於一個進程。

Process-per-site-instance（同一個 site-instance 使用一個進程）--> 默認模式

這個你們能夠這麼理解，假如我點開了兩個網頁一個是m.wandougongzhu.com,一個是activity.wandougongzhu.com，那麼這兩個tab就會啓動兩個進程，可是，假如在m.wandougongzhu.com裏邊經過a標籤或者location.href打開了activity.wandougongzhu.com那麼他倆屬於一個進程。

里程碑的iframe

這裏有一個比較有意思的是咱們經常使用的iframe從Chrome 67開始，由於默認啓用Site Isolution機制，就會變成一個單獨的進程，這個改動按照Chrome官方的說法是里程碑式的，由於這個獨立出去進程，和以往不斷疊加進程不一樣，他的改動會牽扯到咱們的調試進程，也就是咱們經常使用的調試工具，等等。