瀏覽器的多進程包括：

1.Browser進程：瀏覽器的主進程（負責協(xié)調(diào)、主控），只有一個

2.第三方插件進程：每種類型的插件對應一個進程，僅當使用該插件時才創(chuàng)建

3.GPU進程：最多一個，用于3D繪制等

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

瀏覽器渲染進程包括：

GUI渲染線程

JS引擎線程

事件觸發(fā)線程

定時器觸發(fā)線程

異步http請求線程

GUI渲染線程：負責瀏覽器渲染，重排重繪。

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

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

css是由單獨的下載線程異步下載的，css加載不會阻塞DOM樹解析（異步加載時DOM照常構(gòu)建）
但會阻塞render樹渲染（渲染時需等css加載完畢，因為render樹需要css信息）

JS引擎線程：負責處理Javascript腳本程序。是主線程，一直等待著任務隊列中任務的到來。

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

這樣理解下：

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

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

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

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

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

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

補充：

WebWorker與SharedWorker

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

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

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

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

總結(jié)

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

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