瀏覽器進程線程、Web Workers、Event Loop 圖解

yanest 發(fā)布于2019-08-23 13:49 / 824人閱讀

摘要：博客地址是目錄區(qū)分進程和線程在系統(tǒng)的任務管理器中可以查看當前正在運行的各種進程。瀏覽器是多進程的打開的任務管理器，可以看到當前瀏覽器里的進程。

在網(wǎng)上發(fā)現(xiàn)了一篇很好的博客文章，對瀏覽器進程線程、Web Workers、Event Loop 等都解釋得通俗易懂。在此，我根據(jù)其內容做了幾張思維導圖，對照著文章看可加深理解。如有更好的理解，歡迎探討。

博客地址是： http://www.dailichun.com/2018...

目錄 1、區(qū)分進程和線程

在系統(tǒng)的任務管理器中可以查看當前正在運行的各種進程。

2、瀏覽器是多進程的

打開 chrome 的任務管理器，可以看到當前瀏覽器里的進程。在這里瀏覽器應該也有自己的優(yōu)化機制，有時候打開多個tab頁后，可以在Chrome任務管理器中看到，有些進程被合并了，如下圖：

3、重點是瀏覽器內核（渲染進程）

請牢記，瀏覽器的渲染進程是多線程的

4、Browser進程和瀏覽器內核（Renderer進程）的通信過程（文章原圖）

Browser進程收到用戶請求，首先需要獲取頁面內容（譬如通過網(wǎng)絡下載資源），隨后將該任務通過RendererHost接口傳遞給Render進程

Renderer進程的Renderer接口收到消息，簡單解釋后，交給渲染線程，然后開始渲染

渲染線程接收請求，加載網(wǎng)頁并渲染網(wǎng)頁，這其中可能需要Browser進程獲取資源和需要GPU進程來幫助渲染，當然可能會有JS線程操作DOM（這樣可能會造成回流并重繪）

最后Render進程將結果傳遞給Browser進程

Browser進程接收到結果并將結果繪制出來

5、WebWorker與SharedWorker

本質上就是進程和線程的區(qū)別。SharedWorker由獨立的進程管理，WebWorker只是屬于render進程下的一個線程

6、瀏覽器渲染流程（文章原圖）

解析html建立dom樹

解析css構建render樹（將CSS代碼解析成樹形的數(shù)據(jù)結構，然后結合DOM合并成render樹）

布局render樹（Layout/reflow），負責各元素尺寸、位置的計算

繪制render樹（paint），繪制頁面像素信息

瀏覽器會將各層的信息發(fā)送給GPU，GPU會將各層合成（composite），顯示在屏幕上。

7、Event Loop（結合 ES6 的 microtask 與 macrotask）

簡單版：

復雜版：

檢驗是否理解事件循環(huán)，不依靠控制臺，猜一下下面的結果：

提示： async 會返回 Promise 對象； await 會等待 Promise 對象完成，期間會讓出線程。

async function async1(){
    console.log("async1 start")
    await async2()
    console.log("async1 end")
}
async function async2(){
    console.log("async2")
}
console.log("script start")
setTimeout(function(){
    console.log("setTimeout")
},0)  
async1();
new Promise(function(resolve){
    console.log("promise1")
    resolve();
}).then(function(){
    console.log("promise2")
})
console.log("script end")

再看看修改版的結果會是啥：

async function async1(){
    console.log("async1 start")
    await async2()
    console.log("async1 end")
}
function async2(){ // 去掉了 async 關鍵字
    console.log("async2");
}
console.log("script start")
setTimeout(function(){
    console.log("setTimeout")
},0)  
async1();
new Promise(function(resolve){
    console.log("promise1")
    resolve();
}).then(function(){
    console.log("promise2")
})
console.log("script end")

GPU云服務器云服務器 Event Loop web workers linux進程圖解創(chuàng)建web服務器圖解

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/99603.html

【11】JavaScript 線程機制與事件機制

摘要：線程機制與事件機制一進程與線程進程程序的一次執(zhí)行，它占有一片獨有的內存空間。事件響應模塊負責事件的管理。當事件發(fā)生時管理模塊會將回調函數(shù)及其數(shù)據(jù)添加到回調列隊中。但是子線程完全受主線程控制，且不得操作。向另一個線程發(fā)送消息。 JavaScript線程機制與事件機制一、進程與線程進程（process）程序的一次執(zhí)行，它占有一片獨有的內存空間。可以通過windows任務管理器查...

fobnn 2019-08-23 18:21 評論0 收藏0
深入理解 Event Loop

摘要：即使現(xiàn)在支持，由于沒有多線程的機制，和執(zhí)行線程只能通過來通信，而且由于沒有鎖，無法訪問和對象。的單線程是指一個瀏覽器進程中只有一個的執(zhí)行線程，即同一時刻內只會有一段代碼在執(zhí)行。與單線程如何實現(xiàn)異步設計了一個事件循環(huán)的方式。眾所周知，JavaScript（以下簡稱 JS）是單線程語言，在 html5 中增加了 web workers，web workers 是新開了線程執(zhí)行的，那么 JS 還...

Carbs 2019-05-22 18:24 評論0 收藏0
JavaScript是如何工作的:Web Workers的構建塊+ 5個使用他們的場景

摘要：最后，提供個正確使用的場景。異步編程的一個很好的用例就請求。這意味著異步函數(shù)只能解決一小部分語言單線程中的局限性問題。中有類似的集群子進程概念，他們也是多線程但是和還是有區(qū)別?？捎玫奶匦杂捎诘亩嗑€程特性，工作者只能訪問特性的一個子集。 showImg(https://segmentfault.com/img/bVblS8J?w=400&h=298); 這是專門探索 JavaScript...

ningwang 2019-08-23 14:25 評論0 收藏0
JavaScript線程機制與事件機制

摘要：的單線程，與它的用途有關。為了利用多核的計算能力，提出標準，允許腳本創(chuàng)建多個線程，但是子線程完全受主線程控制，且不得操作。 showImg(https://segmentfault.com/img/remote/1460000016649971?w=1481&h=876); 一、進程與線程 1.進程進程是指程序的一次執(zhí)行,它占有一片獨有的內存空間,可以通過windows任務管理器查看...

godlong_X 2019-08-29 16:58 評論0 收藏0
JavaScript線程機制與事件機制

摘要：的單線程，與它的用途有關。為了利用多核的計算能力，提出標準，允許腳本創(chuàng)建多個線程，但是子線程完全受主線程控制，且不得操作。 showImg(https://segmentfault.com/img/remote/1460000016649971?w=1481&h=876); 一、進程與線程 1.進程進程是指程序的一次執(zhí)行,它占有一片獨有的內存空間,可以通過windows任務管理器查看...

BWrong 2019-08-16 13:25 評論0 收藏0