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

yanest 發布于2019-08-23 13:49 / 816人閱讀

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

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

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

目錄 1、區分進程和線程

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

2、瀏覽器是多進程的

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

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

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

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

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

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

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

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

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

5、WebWorker與SharedWorker

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

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

解析html建立dom樹

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

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

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

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

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

簡單版：

復雜版：

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

提示： 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進程圖解創建web服務器圖解

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

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

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

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

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

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

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

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

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

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

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

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

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