<a name="3dfc97a4"></a>
DSC_7042.jpg
<a name="jngJV"></a>
一狡门、瀏覽器的多進(jìn)程概括
要想搞明白什么是瀏覽器的多進(jìn)程值纱，首先得知道什么是進(jìn)程今穿。按照維基百科的說法：
進(jìn)程是計(jì)算機(jī)中已運(yùn)行程序的實(shí)體。進(jìn)程是線程的容器怎诫，進(jìn)程本身不運(yùn)行瘾晃。程序本身只是指令的集合，進(jìn)程才是程序（指令）的真正運(yùn)行幻妓。每個(gè)程序可以有多個(gè)進(jìn)程蹦误，每個(gè)進(jìn)程都有自己的資源。
簡單來講，進(jìn)程就是CPU資源分配的最小單位强胰，而線程則是CPU調(diào)度的最小單位舱沧。那什么又是單線程和多線程呢，我們來看一小段代碼：
var a = 1 + 10086
var b = 100 * 2
var c = (20 + 1) * 2
var d = 100/10
var e = a + b + c + d
console.log(e)
譬如上面的代碼偶洋，如果是在單線程的運(yùn)行環(huán)境比如JavaScript熟吏，就會需要將上面的計(jì)算一個(gè)個(gè)的去執(zhí)行完成，然后得出運(yùn)行結(jié)果玄窝，也就需要進(jìn)行六步才能將e打印出來牵寺，但如果是在多線程的運(yùn)行環(huán)境中則只需要使用四個(gè)線程來同時(shí)計(jì)算上面的四個(gè)運(yùn)算，待上面的四個(gè)運(yùn)算全部完成后再把他們相加恩脂，然后再打印出來帽氓。因此使用多線程的并行運(yùn)算可以大大的提高程序的性能以及效率。<br />但雖然多線程可以有效的提高程序的運(yùn)行效率东亦，但它是不能單獨(dú)存在的，它需要進(jìn)程的啟動(dòng)與管理唬渗。簡單來說典阵，進(jìn)程與線程之間會存在以下四種關(guān)系：
- 進(jìn)程中的任意一線程執(zhí)行出錯(cuò)，都會導(dǎo)致整個(gè)進(jìn)程的崩潰镊逝。很常見就是JavaScript出現(xiàn)的執(zhí)行線程出錯(cuò)時(shí)會導(dǎo)致整個(gè)頁面進(jìn)程的崩潰壮啊，而導(dǎo)致頁面白屏。
- 線程之間共享同進(jìn)程中的數(shù)據(jù)撑蒜。
- 當(dāng)一個(gè)進(jìn)程關(guān)閉之后歹啼，操作系統(tǒng)會回收進(jìn)程所占用的內(nèi)存。
- 進(jìn)程之間的內(nèi)容會相互隔離座菠。每個(gè)進(jìn)程都只能訪問自己訪問的數(shù)據(jù)狸眼，這可以有效的避免一個(gè)進(jìn)程的崩潰而影響到其他的進(jìn)程。如果進(jìn)程之間有進(jìn)行數(shù)據(jù)通信的需要浴滴，這時(shí)候就需要進(jìn)程通信（IPC）機(jī)制了拓萌。
<a name="77f3f5a8"></a>
二、瀏覽器進(jìn)程發(fā)展過程
現(xiàn)在我們都知道瀏覽器都是多進(jìn)程的升略，但其實(shí)回顧歷史發(fā)展的歷程微王，瀏覽器也經(jīng)歷了一個(gè)由單進(jìn)程到多進(jìn)程的發(fā)展歷程。現(xiàn)在就讓我們來理一理瀏覽器單線程到多線程的發(fā)展歷程品嚣。
<a name="ed0c7b9a"></a>
2.1 青銅時(shí)代---單進(jìn)程的瀏覽器
2007年之前炕倘，所有的瀏覽器都是單進(jìn)程的，其中的典型代表就是IE6了翰撑。在ID6的時(shí)代罩旋，頁面還是單標(biāo)簽的，一個(gè)頁面一個(gè)窗口，一個(gè)窗口一個(gè)主線程瘸恼。因此顧名思義劣挫，單進(jìn)程的瀏覽器就是指打開一個(gè)瀏覽器，其中包含一個(gè)頁面东帅，而這個(gè)頁面的所有的功能模塊都運(yùn)行在同一個(gè)進(jìn)程里压固，這個(gè)模塊包括但不限于：網(wǎng)絡(luò)、渲染引擎靠闭、JavaScript運(yùn)行環(huán)境帐我、第三方插件等。具體架構(gòu)如下圖所示：<br />[圖片上傳失敗...(image-c661e1-1574774887028)]<br />基于這種情況愧膀，單進(jìn)程的瀏覽器就存在以下一些問題：
<a name="668cf4f5"></a>
1. 不穩(wěn)定
早期的瀏覽器都是通過各式各樣的插件來實(shí)現(xiàn)諸如視頻拦键、游戲等功能的，而插件本身又很不靠譜檩淋，由于插件運(yùn)行在瀏覽器進(jìn)程之中芬为，因此一個(gè)插件的意外崩潰就會導(dǎo)致整個(gè)瀏覽器的奔潰。同樣的蟀悦，渲染引擎也是這個(gè)道理媚朦，往往一個(gè)JavaScript的bu就可能導(dǎo)致整個(gè)頁面崩潰。
<a name="ab54b702"></a>
2. 不流暢
因?yàn)樗许撁娴腏avaScript線程日戈、渲染模塊询张、以及第三方插件都運(yùn)行在同一個(gè)線程之中，因此同一時(shí)刻只有一個(gè)模塊可以執(zhí)行浙炼，這就很有可能出現(xiàn)一個(gè)模塊發(fā)生阻塞的時(shí)候而導(dǎo)致其他模塊無法運(yùn)行的情況份氧。此外當(dāng)時(shí)國產(chǎn)的瀏覽器其實(shí)都是基于IE6來進(jìn)行二次開發(fā)的，因此這些國產(chǎn)瀏覽器雖然基于自身需要弯屈，都采用的多標(biāo)簽頁的形式蜗帜，但這些多標(biāo)簽頁其實(shí)也是跑在同一個(gè)線程里的，這就會導(dǎo)致其中一個(gè)標(biāo)簽頁的卡頓會影響到整個(gè)瀏覽器资厉。
<a name="0bc2f8f1"></a>
3. 不安全
不安全主要是處于兩個(gè)方面的钮糖，一個(gè)是插件一個(gè)是頁面腳本。頁面中運(yùn)行的插件可以讀取電腦的資源酌住，執(zhí)行一些命令店归。而頁面腳本則可以通過瀏覽器漏洞來獲取系統(tǒng)權(quán)限，從而應(yīng)發(fā)一系列安全問題
<a name="42700b73"></a>
2.2 白銀時(shí)代---多進(jìn)程瀏覽器時(shí)代
終于隨著 Chrome 瀏覽器的發(fā)布酪我，瀏覽器架構(gòu)終于來到了多進(jìn)程的時(shí)代消痛。其中 Chrome 瀏覽器的進(jìn)程架構(gòu)如下：<br />[圖片上傳失敗...(image-b1bc99-1574774887028)]<br />其主要作用如下：
- Browser進(jìn)程（瀏覽器進(jìn)程）：這是瀏覽器的主進(jìn)程。有且只有一個(gè)都哭，它主要有以下幾個(gè)作用：
- 負(fù)責(zé)瀏覽器頁面的顯示與頁面交互
- 負(fù)責(zé)個(gè)頁面的管理秩伞。創(chuàng)建和銷毀其他進(jìn)程
- 將 Renderer 進(jìn)程得到的內(nèi)存中的 Bitmap 逞带，繪制到用戶頁面上。
- 網(wǎng)絡(luò)資源的管理纱新，下載等展氓。
- 第三方插件進(jìn)程：主要負(fù)責(zé)插件的運(yùn)行，每種類型的插件都對應(yīng)著一個(gè)進(jìn)程脸爱，只有當(dāng)使用該插件時(shí)才會創(chuàng)建該進(jìn)程遇汞，這樣就做到了隔離插件的效果，保證插件的崩潰不會影響到瀏覽器以及頁面簿废。
- GPU進(jìn)程：最多一個(gè)空入，用于3D繪制。這個(gè)進(jìn)程在最初是沒有的族檬。但為了實(shí)現(xiàn) 3D CSS 的效果歪赢，GPU進(jìn)程成為了瀏覽器的普遍需求，因此Chrome瀏覽器也在其多進(jìn)程的架構(gòu)上引入了GPU進(jìn)程单料。
- 瀏覽器渲染進(jìn)程埋凯，也就是瀏覽器內(nèi)核，Renderer進(jìn)程扫尖，內(nèi)部是多線程的：默認(rèn)每個(gè)Tab頁面都是一個(gè)進(jìn)程白对，互相不影響。主要作用是頁面渲染藏斩，腳本執(zhí)行躏结，事件處理等却盘。
- 網(wǎng)絡(luò)進(jìn)程：主要負(fù)責(zé)頁面的網(wǎng)絡(luò)資源的加載狰域，之前是作為一個(gè)模塊運(yùn)行在瀏覽器進(jìn)程中的，最近幾年才獨(dú)立出來黄橘，作為一個(gè)單獨(dú)的進(jìn)程存在兆览。<br />
然后基于以上的架構(gòu)，我們來看看他們是如何解決單進(jìn)程瀏覽器所存在的問題的：
<a name="44d51f21"></a>
1. 解決不穩(wěn)定
首先瀏覽器渲染進(jìn)程本省就是分離開來的塞关，每個(gè)Tab也面都是一個(gè)單獨(dú)的進(jìn)程抬探，互不影響。其次將第三方插件進(jìn)程也單獨(dú)拎了出來帆赢，這樣就算一個(gè)頁面的插件出現(xiàn)可問題小压，也不會影響到這個(gè)頁面的渲染進(jìn)程，也就不會對瀏覽器造成影響了椰于。
<a name="b402398e"></a>
2. 解決不流暢
在多進(jìn)程的架構(gòu)下怠益，JavaScript 只是運(yùn)行在自己的渲染進(jìn)程中的，因此即使 JavaScript 代碼阻塞了渲染進(jìn)程瘾婿，受到影響的也只是當(dāng)前所渲染的頁面蜻牢。腳本運(yùn)行也是同樣的道理烤咧。而對于常常引發(fā)性能問題的內(nèi)存泄漏，在這種架構(gòu)下抢呆，關(guān)閉一個(gè)頁面煮嫌，會將整個(gè)渲染進(jìn)程給關(guān)閉，這時(shí)候操作系統(tǒng)就會回收這個(gè)進(jìn)程所占用的內(nèi)存抱虐，也就會不會存在內(nèi)存泄漏的問題了昌阿。
<a name="141d86e1"></a>
3. 解決不安全
采用多金策的架構(gòu)的一個(gè)好處就是可以使用安全沙盒，沙盒通常嚴(yán)格控制其中的程序所能訪問的資源梯码，比如宝泵，沙盒可以提供用后即回收的磁盤及內(nèi)存空間。在沙盒中轩娶，網(wǎng)絡(luò)訪問儿奶、對真實(shí)系統(tǒng)的訪問、對輸入設(shè)備的讀取通常被禁止或是嚴(yán)格限制鳄抒。而charome瀏覽器就將插件進(jìn)程以及渲染進(jìn)程所在了沙盒之中闯捎，這樣即使插件進(jìn)程以及渲染進(jìn)程有惡意程序在執(zhí)行，也無法突破沙盒去獲取系統(tǒng)權(quán)限许溅，對我們的電腦造成影響瓤鼻。<br />雖然現(xiàn)在的多進(jìn)程的瀏覽器看起來很美好，解決了原先單進(jìn)程瀏覽器所存在的諸多的問題贤重，但同樣不可避免的存在著一些問題：
- 資源占用更多了
- 更為復(fù)雜的體系結(jié)構(gòu)
<a name="0dc37836"></a>
2.3 黃金時(shí)代---SOA架構(gòu)
為了解決現(xiàn)在瀏覽器所存在的資源占用高茬祷，體系更為復(fù)雜的問題，2016年 Chrome 團(tuán)隊(duì)就開始使用 “面向服務(wù)的架構(gòu)”（SOA)的思想來設(shè)計(jì)新的 Chrome 架構(gòu)并蝗。<br />那什么是SOA呢祭犯，簡單來說SOA就是一種組件模型，他將應(yīng)用程序的不同功能單元通過這些服務(wù)之間所定義好的接口或者契約聯(lián)系起來滚停。接口采用中立的方式來進(jìn)行定義沃粗，獨(dú)立于硬件平臺、操作系統(tǒng)以及編程語言键畴。這使得構(gòu)建各種各樣的系統(tǒng)中的服務(wù)都可以以一種統(tǒng)一和通用的方式來進(jìn)行交互最盅。<br />也就是說， Chrome要做的就是將UI進(jìn)程起惕、設(shè)備涡贱、文件、Audio等等模塊都編程基礎(chǔ)服務(wù)惹想，每個(gè)服務(wù)都可以在獨(dú)立的進(jìn)程中運(yùn)行，而訪問這些服務(wù)也必須使用定義好的接口勺馆，并通過IPC來進(jìn)行通信戏售。從而構(gòu)建一個(gè)更內(nèi)聚侨核、松耦合、更易維護(hù)和擴(kuò)展的系統(tǒng)灌灾。<br />[圖片上傳失敗...(image-8e90af-1574774887028)]
