解析浏覽器中的 Event-Loop 機制

前言

Event-Loop 機制想必大家都有所耳聞，今天我就帶大家來了解一下浏覽器中的 Event-Loop 機制。

函數調用棧

函數調用棧是個幹活的地方，它會真刀真槍地給你執行任務。

需要被執行的邏輯，它首先需要被推入函數調用棧，後續才能被執行。

宏任務（macro-task)隊列

宏任務主要包含：script( 整體代碼)、setTimeout、setInterval、I/O、UI 互動事件、setImmediate(Node.js 環境)；

微任務(micro-task)隊列

微任務主要包含：Promise、MutaionObserver、process.nextTick(Node.js 環境)；

Event Loop 過程

一個完整的 Event Loop 過程，可以概括為以下階段：

執行并出隊一個宏任務：

注意如果是初始狀态：調用棧空。微任務隊列空，宏任務隊列裡有且隻有一個 script 腳本（整體代碼）。這時首先執行并出隊的就是 script 腳本；

全局上下文（script 标簽）被推入調用棧，同步代碼執行：

在執行的過程中，可以産生新的宏任務隊列 與 微任務隊列，它們會分别被推入各自的任務隊列裡。

上一步我們出隊的是一個宏任務隊列，這一步我們處理的是 微任務隊列。但需要注意的是：當宏任務隊列出隊時，任務是一個一個執行的；而 微任務隊列 出隊時，任務是一隊一隊執行的。是以，我們處理微任務隊列這一步，會逐個執行隊列中的任務并把它出隊，直到隊列被清空；

執行渲染操作，更新界面；

檢查是否存在 Web worker 任務，如果有，則對其進行處理。

總結

結語