前端知識龐雜方咆，學(xué)了總是忘記，知識不成體系蟀架，很多東西只知其然不知其所以然瓣赂，從chrome進(jìn)程架構(gòu)開始逐步系統(tǒng)建立自己的前端知識網(wǎng)絡(luò)。
瀏覽器中的網(wǎng)絡(luò)路程辜窑，頁面渲染過程，JS執(zhí)行流程以及web安全理論等這些工作瀏覽器是怎么組織這些功能呢寨躁？Chrome穆碎、微軟的 Edge 以及國內(nèi)的大部分主流瀏覽器，都是基于 Chromium 二次開發(fā)而來职恳；而 Chrome 是 Google 的官方發(fā)行版所禀，特性和 Chromium 基本一樣。所以主要看瀏覽器(chrome)的進(jìn)程架構(gòu)
先看下打開一個頁面放钦，瀏覽器要打開幾個進(jìn)程：
可以看到打開一個頁面瀏覽器打開5個進(jìn)程色徘，為什么？
先了解下線程和進(jìn)程：
進(jìn)程：一個進(jìn)程就是一個程序的運行實例操禀，占用資源（CPU褂策， 內(nèi)存）。
線程：一個程序能同時干多件事，這些子任務(wù)就是線程
1.線程不能單獨存在的斤寂，是依托于進(jìn)程管理和啟動的
2.進(jìn)程中任一進(jìn)程出錯耿焊，都會導(dǎo)致進(jìn)程崩潰
3.線程共享進(jìn)程中數(shù)據(jù)
4.進(jìn)程關(guān)閉，操作系統(tǒng)會回收進(jìn)程所占用內(nèi)存（不當(dāng)操作導(dǎo)致的內(nèi)容泄漏部分內(nèi)存也會被回收）
單進(jìn)程瀏覽器時代：
chrome出現(xiàn)之前的老的瀏覽器都是單進(jìn)程的遍搞，所有的功能模塊都運行在一個進(jìn)程里罗侯，包括渲染引擎 js運行環(huán)境 網(wǎng)絡(luò) 插件 頁面等。這就導(dǎo)致單進(jìn)程瀏覽器不穩(wěn)定（插件或JS崩潰溪猿，會導(dǎo)致整個瀏覽器崩潰）钩杰，不安全（插件運行在一個進(jìn)程，很容易利用瀏覽器竊取數(shù)據(jù)）诊县，不流暢（一個線程中讲弄，比如一個頁面js執(zhí)行都在時間過長，就會導(dǎo)致其他所有頁面假死）翎冲。
多進(jìn)程瀏覽器時代：
下面我們來逐個分析下這幾個進(jìn)程的功能：
瀏覽器主進(jìn)程：主要負(fù)責(zé)界面顯示垂睬、用戶交互、子進(jìn)程管理抗悍，同時提供存儲等功能驹饺。
渲染進(jìn)程：核心任務(wù)是將 HTML、CSS 和 JavaScript 轉(zhuǎn)換為用戶可以與之交互的網(wǎng)頁缴渊，排版引擎 Blink 和 JavaScript 引擎 V8 都是運行在該進(jìn)程中赏壹，默認(rèn)情況下，Chrome 會為每個 Tab 標(biāo)簽創(chuàng)建一個渲染進(jìn)程衔沼。出于安全考慮蝌借，渲染進(jìn)程都是運行在沙箱模式下。
GPU 進(jìn)程指蚁。其實菩佑，Chrome 剛開始發(fā)布的時候是沒有 GPU 進(jìn)程的。而 GPU 的使用初衷是為了實現(xiàn) 3D CSS 的效果凝化，只是隨后網(wǎng)頁稍坯、Chrome 的 UI 界面都選擇采用 GPU 來繪制，這使得 GPU 成為瀏覽器普遍的需求搓劫。最后瞧哟，Chrome 在其多進(jìn)程架構(gòu)上也引入了 GPU 進(jìn)程。
網(wǎng)絡(luò)進(jìn)程：主要負(fù)責(zé)頁面的網(wǎng)絡(luò)資源加載枪向，之前是作為一個模塊運行在瀏覽器進(jìn)程里面的勤揩，直至最近才獨立出來，成為一個單獨的進(jìn)程秘蛔。
插件進(jìn)程：主要是負(fù)責(zé)插件的運行陨亡，因插件易崩潰傍衡，所以需要通過插件進(jìn)程來隔離，以保證插件進(jìn)程崩潰不會對瀏覽器和頁面造成影響数苫。
Audio進(jìn)程：主要是負(fù)責(zé)音頻管理聪舒。
可以看到，chrome 把越來越多的服務(wù)從主進(jìn)程中獨立出來虐急，比例GDP負(fù)責(zé)3d動畫的箱残，Audio負(fù)責(zé)音頻等
這樣因為頁面的進(jìn)程相互獨立，某一進(jìn)程崩潰止吁，不會影響其他頁面被辑。解決了單進(jìn)程瀏覽器不穩(wěn)定的問題，各干功能模塊運行在不同的進(jìn)程中敬惦，這樣不會出現(xiàn)阻塞其他的進(jìn)程的導(dǎo)致的不流暢的問題盼理。渲染進(jìn)程運行在沙箱中，更安全俄删。
