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

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

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

目錄

一、區分進程和線程

在系統的任務管理器中能夠查看當前正在運行的各類進程。

二、瀏覽器是多進程的

打開 chrome 的任務管理器，能夠看到當前瀏覽器裏的進程。在這裏瀏覽器應該也有本身的優化機制，有時候打開多個tab頁後，能夠在Chrome任務管理器中看到，有些進程被合併了，以下圖：

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

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

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

1. Browser進程收到用戶請求，首先須要獲取頁面內容（譬如經過網絡下載資源），隨後將該任務經過RendererHost接口傳遞給Render進程
2. Renderer進程的Renderer接口收到消息，簡單解釋後，交給渲染線程，而後開始渲染
3. 渲染線程接收請求，加載網頁並渲染網頁，這其中可能須要Browser進程獲取資源和須要GPU進程來幫助渲染，固然可能會有JS線程操做DOM（這樣可能會形成迴流並重繪）
4. 最後Render進程將結果傳遞給Browser進程
5. Browser進程接收到結果並將結果繪製出來

五、WebWorker與SharedWorker

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

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

• 解析html創建dom樹
• 解析css構建render樹（將CSS代碼解析成樹形的數據結構，而後結合DOM合併成render樹）
• 佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算
• 繪製render樹（paint），繪製頁面像素信息
• 瀏覽器會將各層的信息發送給GPU，GPU會將各層合成（composite），顯示在屏幕上。

七、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')