瀏覽器的多進(jìn)程包括：

1.Browser進(jìn)程：瀏覽器的主進(jìn)程（負(fù)責(zé)協(xié)調(diào)、主控），只有一個(gè)

2.第三方插件進(jìn)程：每種類型的插件對應(yīng)一個(gè)進(jìn)程，僅當(dāng)使用該插件時(shí)才創(chuàng)建

3.GPU進(jìn)程：最多一個(gè)，用于3D繪制等

4.瀏覽器渲染進(jìn)程（瀏覽器內(nèi)核內(nèi)部是多線程的）：默認(rèn)每個(gè)Tab頁面一個(gè)進(jìn)程，互不影響。

瀏覽器渲染進(jìn)程包括：

GUI渲染線程

JS引擎線程

事件觸發(fā)線程

定時(shí)器觸發(fā)線程

異步http請求線程

GUI渲染線程：負(fù)責(zé)瀏覽器渲染，重排重繪。

注意，GUI渲染線程與JS引擎線程是互斥的，當(dāng)JS引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎空閑時(shí)立即被執(zhí)行。

渲染完畢后會(huì)觸發(fā)load事件:
DOMContentLoaded(僅當(dāng)DOM加載完成，不包括樣式表，圖片) -> onload(頁面上所有的DOM，樣式表，腳本，圖片都已加載完成)

css是由單獨(dú)的下載線程異步下載的，css加載不會(huì)阻塞DOM樹解析（異步加載時(shí)DOM照常構(gòu)建）
但會(huì)阻塞render樹渲染（渲染時(shí)需等css加載完畢，因?yàn)閞ender樹需要css信息）

JS引擎線程：負(fù)責(zé)處理Javascript腳本程序。是主線程，一直等待著任務(wù)隊(duì)列中任務(wù)的到來。

js是單線程處理，執(zhí)行時(shí)間過長會(huì)阻塞頁面，所以HTML5中支持了Web Worker。

這樣理解下：

• 創(chuàng)建Worker時(shí)，JS引擎向?yàn)g覽器申請開一個(gè)子線程（子線程是瀏覽器開的，完全受主線程控制，而且不能操作DOM）
• JS引擎線程與worker線程間通過特定的方式通信（postMessage API，需要通過序列化對象來與線程交互特定的數(shù)據(jù)）

JS引擎是單線程的，這一點(diǎn)的本質(zhì)仍然未改變，Worker可以理解是瀏覽器給JS引擎開的外掛，專門用來解決那些大量計(jì)算問題。

事件觸發(fā)線程：歸屬于瀏覽器而不是JS引擎，用來控制事件循環(huán)。維護(hù)一個(gè)任務(wù)隊(duì)列，當(dāng)使用setTimeout或setInterval時(shí)，需要定時(shí)器觸發(fā)線程計(jì)時(shí)，計(jì)時(shí)完成后才將其回調(diào)函數(shù)加入任務(wù)隊(duì)列。

• 當(dāng)JS引擎執(zhí)行代碼塊如setTimeOut時(shí)（也可來自瀏覽器內(nèi)核的其他線程,如鼠標(biāo)點(diǎn)擊、AJAX異步請求等），會(huì)將對應(yīng)任務(wù)添加到事件線程中
• 當(dāng)對應(yīng)的事件符合觸發(fā)條件被觸發(fā)時(shí)，該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JS引擎的處理
• 注意，由于JS的單線程關(guān)系，所以這些待處理隊(duì)列中的事件都得排隊(duì)等待JS引擎處理（當(dāng)JS引擎空閑時(shí)才會(huì)去執(zhí)行）

定時(shí)器觸發(fā)線程：setInterval與setTimeout所在線程

• 瀏覽器定時(shí)計(jì)數(shù)器并不是由JavaScript引擎計(jì)數(shù)的,（因?yàn)镴avaScript引擎是單線程的, 如果處于阻塞線程狀態(tài)就會(huì)影響記計(jì)時(shí)的準(zhǔn)確）
• 因此通過單獨(dú)線程來計(jì)時(shí)并觸發(fā)定時(shí)（計(jì)時(shí)完畢后，添加到事件隊(duì)列中，等待JS引擎空閑后執(zhí)行）

補(bǔ)充：

WebWorker與SharedWorker

• WebWorker只屬于某個(gè)頁面，不會(huì)和其他頁面的Render進(jìn)程（瀏覽器內(nèi)核進(jìn)程）共享所以Chrome在Render進(jìn)程中（每一個(gè)Tab頁就是一個(gè)render進(jìn)程）創(chuàng)建一個(gè)新的線程來運(yùn)行Worker中的JavaScript程序。
• SharedWorker是瀏覽器所有頁面共享的，不能采用與Worker同樣的方式實(shí)現(xiàn)，因?yàn)樗浑`屬于某個(gè)Render進(jìn)程，可以為多個(gè)Render進(jìn)程共享使用。所以Chrome瀏覽器為SharedWorker單獨(dú)創(chuàng)建一個(gè)進(jìn)程來運(yùn)行JavaScript程序，在瀏覽器中每個(gè)相同的JavaScript只存在一個(gè)SharedWorker進(jìn)程，不管它被創(chuàng)建多少次。

?看到這里，應(yīng)該就很容易明白了，本質(zhì)上就是進(jìn)程和線程的區(qū)別。SharedWorker由獨(dú)立的進(jìn)程管理，WebWorker只是屬于render進(jìn)程下的一個(gè)線程

進(jìn)程是具有一定獨(dú)立功能的程序關(guān)于某個(gè)數(shù)據(jù)集合上的一次運(yùn)行活動(dòng),進(jìn)程是系統(tǒng)進(jìn)行資源分配和調(diào)度的一個(gè)獨(dú)立單位

線程是進(jìn)程的一個(gè)實(shí)體,是CPU調(diào)度和分派的基本單位,它是比進(jìn)程更小的能獨(dú)立運(yùn)行的基本單位.線程自己基本上不擁有系統(tǒng)資源,只擁有一點(diǎn)在運(yùn)行中必不可少的資源(如程序計(jì)數(shù)器,一組寄存器和棧),但是它可與同屬一個(gè)進(jìn)程的其他的線程共享進(jìn)程所擁有的全部資源.

總結(jié)

以上是生活随笔為你收集整理的浏览器的多进程与js单线程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。