联盟我创造了历史,国产日韩久久久精品影院,色宅男中文字幕亚洲专区

改變你對事件循環錯誤的認知！

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年8月28日 9:28 本文熱度 555

瀏覽器的進程模型

何為進程？

程序運行需要有它自己的內存空間，可以把這塊內存空間簡單的理解為進程。
每個應用至少有一個進程，進程之間相互獨立，即使要通訊，也需要雙方同意

何為線程？

一個進程至少有一個線程，進程開啟后會自動創建一個線程來運行代碼，這個線程叫主線程，主線程結束，則進程結束。
如果程序想同時執行多塊代碼，主線程會啟動更多的線程來執行代碼，所以一個進程可以有多個線程。

瀏覽器有哪些進程和線程？

瀏覽器是一個多進程多線程的應用程序

為了避免相互影響，減少連環崩潰的幾率，他會自動啟動多個進程。

瀏覽器右上角三個點那里的更多工具打開任務管理器：

每打開一個標簽頁就會開啟一個渲染線程，嘗試多打開一個標簽頁，任務管理器會多一個線程。

主要有下面三個：
瀏覽器進程：主要負責界面顯示(是指瀏覽器窗體那些界面的交互，而非標簽頁面內容)，用戶交互、子進程管理等，瀏覽器進程內部會啟動多個線程處理不同的任務。
網絡進程 負責加載網絡資源，網絡進程內部會啟動多個線程處理不同的任務。
渲染進程

渲染進程啟動后，會開啟一個渲染主線程，主線程負責執行 HTML、CSS、JS 代碼
默認情況下，瀏覽器會為每個標簽頁開啟一個新的渲染進程，以保證不同的標簽頁之前不互相影響（以后瀏覽器可能會改變這種方式，為了減少進程的數量，在尋求的方案比如一個站點開辟一個進程）

渲染主線程是如何工作的？

渲染主線程是瀏覽器中最繁忙的的線程，需要它處理的任務包括但不限于：

解析 HTMl
解析 CSS
計算樣式
布局
處理圖層
每秒把頁面畫60次(FPS)
執行全局 JS 代碼
執行事件處理函數
執行計時器的回調函數
......

為何只能有一個渲染主線程？比如正在執行一個js函數去修改頁面，定時器的任務也到達了時間，那么應該執行哪個？同時執行的話，修改了同一個地方如何選擇。

一個渲染進程只能有一個渲染主進程，使用消息隊列來調度任務

在最開始的時候、渲染主線程會進入一個無限循環
每一次循環會檢查消息隊列中是否有任務存在，如果有，就取出第一個任務執行，執行完一個后進入下一次循環，如果沒有，則進入休眠狀態
其它所有線程（包括其它進程的線程，比如點擊事件，計時器的回調函數等）可以隨時向消息隊列添加任務。新任務會加到消息隊列的末尾。在添加新任務時，如果主線程是休眠狀態，則會將其喚醒以繼續拿取任務執行。

若干解釋

何為異步？

代碼執行過程中，會遇到一些無法立即執行的任務，比如：

計時完成后需要執行的任務 -- setTimeout、setInterval
網絡通訊完成后需要執行的任務 -- XHR、Fetch
用戶操作后需要執行的任務 -- addEventListener

面試題：如何理解 JS 的異步？

Js 是一門單線程的語言，這是因為它運行在瀏覽器的渲染主線程中，而渲染主線程只有一個。
渲染主線程承擔著諸多任務，比如渲染頁面、執行 JS 、解析 CSS
如果使用同步的方式，就極有可能會導致主線程的阻塞，從而導致消息隊列的很多其它任務無法執行，頁面無法及時更新，給用戶造成卡死現象。
所以瀏覽器使用異步的方式避免，具體做法是當某些任務發生時，比如計時器、網絡、事件監聽，主線程將任務交給其它線程處理，自身立即結束此任務的執行，轉而執行后續代碼。當其它線程完成此任務時，將事先傳遞的回調函數包裝成任務，加入到消息隊列的末尾排隊，等待主線程的調度執行。
在這種異步模式下，瀏覽器永不阻塞，從而最大限度的保證了單線程的流暢執行。

js 為何會阻礙渲染？

渲染主線程只有一個，js 的執行與渲染都在主線程中，兩者無法同時執行。react 的fiber 就是為了解決此問題

任務有優先級嗎？

任務沒有優先級，消息隊列有優先級，消息隊列會有多種，隨著瀏覽器的復雜度急劇提升，W3C 將不再使用宏隊列的說法

根據 W3C 的最新解釋：

每個任務都有一個任務類型，同一個類型的任務必須在一個隊列，不同類型的任務可以分屬于不同的隊列
瀏覽器必須準備好一個微隊列，微隊列中的任務優先所有其它任務執行

在目前 chrome 的實現中，至少包含了下面隊列，微隊列 > 交互隊列 > 延時隊列

微隊列：用戶存放需要最快執行的任務，優先級最高 (Promise、MutationObserver)
交互隊列：用戶存放用戶操作后產生的事件處理任務，瀏覽器認為用戶的操作必須及時響應，優先級高 (addEventListener)
延時隊列：用戶存放計時器到達后的回調任務，優先級中 (setTimeout、setInterval)

幾道題加深理解

setTimeout(()=>{
    console.log(1) // 交給計時線程，等待添加到延時隊列
}，0)
console.log(2)  // 執行完后執行延時隊列中的任務

結果：輸入 2，1

function delay(duration){
    var start = Date.now();
    while (Date.now() - start < duration){}
}

setTimeout(()=>{
    console.log(1) // 交給計時線程，等待添加到延時隊列
},0)

delay(1000) // 阻塞主線程一秒
 
console.log(2) // 輸出 2，由于阻塞一秒后，計時線程已經把任務計時完成加到延時隊列了，所以輸出 2 后立即輸出 1

結果：等待一秒后，同時輸出 2，1 

setTimeout(()=>{
    console.log(1) // 交給計時線程，等待添加到延時隊列
},0)

Promise.resolve().then(()=>{
    console.log(2)  // 立即添加到微隊列，微隊列優先級高于延時隊列
})

console.log(3)  // 全局任務

結果：輸出 3,2,1

// 只是定義，還未執行哈
function a(){
    console.log(1)
    Promise.resolve().then(()=>{
     console.log(2)  
    })
}

setTimeout(()=>{
    console.log(3)
    Promise.resolve().then(a)
},0)

Promise.resolve().then(()=>{
     console.log(4)  // 立即添加到微隊列，微隊列優先級高于延時隊列
})

console.log(5) // 全局

結果：5，4，3，1，2