進(jìn)程和線程

瀏覽器中的每一個(gè) Tab 頁面就是一個(gè)主進(jìn)程；

進(jìn)程就是程序運(yùn)行的資源上下文實(shí)例，占據(jù)獨(dú)立的內(nèi)存空間；
可以在進(jìn)程中再次開辟內(nèi)存執(zhí)行線程，這些線程共享一定的資源；

瀏覽器中的主進(jìn)程（1/5）

負(fù)責(zé)控制瀏覽器除標(biāo)簽頁外的界面，包括地址欄、書簽、前進(jìn)后退按鈕等，以及負(fù)責(zé)與其他進(jìn)程的協(xié)調(diào)工作，同時(shí)提供存儲(chǔ)功能

瀏覽器中的GPU進(jìn)程（2/5）

負(fù)責(zé)整個(gè)瀏覽器界面的渲染。Chrome剛開始發(fā)布的時(shí)候是沒有GPU進(jìn)程的，而使用GPU的初衷是為了實(shí)現(xiàn)3D CSS效果，只是后面網(wǎng)頁、Chrome的UI界面都用GPU來繪制，這使GPU成為瀏覽器普遍的需求，最后Chrome在多進(jìn)程架構(gòu)上也引入了GPU進(jìn)程

瀏覽器中的網(wǎng)絡(luò)進(jìn)程（3/5）

負(fù)責(zé)發(fā)起和接受網(wǎng)絡(luò)請(qǐng)求，以前是作為模塊運(yùn)行在瀏覽器進(jìn)程一時(shí)在面的，后面才獨(dú)立出來，成為一個(gè)單獨(dú)的進(jìn)程

瀏覽器中的多個(gè)渲染進(jìn)程（4/5）

負(fù)責(zé)控制顯示tab標(biāo)簽頁內(nèi)的所有內(nèi)容，核心任務(wù)是將HTML、CSS、JS轉(zhuǎn)為用戶可以與之交互的網(wǎng)頁，默認(rèn)情況下Chrome會(huì)為每個(gè)Tab標(biāo)簽頁創(chuàng)建一個(gè)渲染進(jìn)程：

1. GUI渲染線程：負(fù)責(zé)渲染瀏覽器界面（DOM Tree \ Css Tree => Render Tree）然后計(jì)算布局并繪制。最后加載異步資源（視頻圖片css等）

1. 當(dāng)修改布局（修改大小、位置、內(nèi)容）時(shí)，會(huì)引起較大成本的回流

2. 非布局修改會(huì)引起重繪
   

2. JS線程：逐行解析和執(zhí)行收到的 Javascript 代碼。維護(hù)一個(gè)異步事件隊(duì)列。當(dāng)執(zhí)行 ??DOM事件??定時(shí)器??網(wǎng)絡(luò)請(qǐng)求 時(shí)將會(huì)推入到異步隊(duì)列，并喚起??事件觸發(fā)線程

異步隊(duì)列包含??宿主發(fā)起的宏任務(wù)（DOM/定時(shí)器/網(wǎng)絡(luò)請(qǐng)求）??JavaScript自身發(fā)起的微任務(wù)（Promise / MutaionObserver DOM更新監(jiān)聽等）；
只有宏/同步線程任務(wù)才會(huì)導(dǎo)致微任務(wù)，一定會(huì)清空導(dǎo)致微任務(wù)后，才會(huì)開始下一個(gè)宏任務(wù)

3. 事件觸發(fā)線程：??不斷得訪問事件隊(duì)列的頭部，并將該函數(shù)推到執(zhí)行棧中并立即執(zhí)行
4. 定時(shí)器觸發(fā)線程
5. 網(wǎng)絡(luò)請(qǐng)求線程

1. GUI渲染線程：負(fù)責(zé)渲染瀏覽器界面（DOM Tree \ Css Tree => Render Tree，計(jì)算布局并繪制），包括界面的小成本重繪（非布局）時(shí)或者較大開銷的回流（布局）、加載異步資源（視頻圖片css等）
2. 唯一JS主線程：逐行解析和執(zhí)行收到的 Javascript 代碼。維護(hù)一個(gè)異步事件隊(duì)列。當(dāng)執(zhí)行 ??DOM事件??定時(shí)器??網(wǎng)絡(luò)請(qǐng)求 時(shí)將會(huì)推入到異步隊(duì)列，并喚起??事件觸發(fā)線程
3. ??事件觸發(fā)線程：不斷得訪問事件隊(duì)列的頭部，并將該函數(shù)推到執(zhí)行棧中并立即執(zhí)行
4. ??定時(shí)器觸發(fā)線程
5. ??網(wǎng)絡(luò)請(qǐng)求線程

瀏覽器中的多個(gè)插件進(jìn)程（5/5）

主要是負(fù)責(zé)插件的運(yùn)行，因?yàn)椴寮赡鼙罎?，所以需要通過插件進(jìn)程來隔離，以保證插件崩潰也不會(huì)對(duì)瀏覽器和頁面造成影響

參考文章

《深入理解瀏覽器中的進(jìn)程與線程》 by 沐華 ?

https://juejin.cn/post/6991849728493256741