浏览器的多进程与js单线程
瀏覽器的多進(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渲染線程:負(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 人民币金额大写
- 下一篇: 十大常用前端UI组件库