瀏覽器中的消息隊列和事件循環

事件循環是如何產生的

在瀏覽器中，JS 的主線程是單線程的，異步的代碼被放到了任務隊列中，JS 主線程不斷地輪詢任務隊列，每次從隊首取出一個任務並進行處理，從而構成了事件環。

任務隊列的類型

任務隊列有兩種，分別是宏任務（macrotask）隊列和微任務（microtask）隊列，用於存放不一樣的任務：

• 宏任務主要有：script（用戶代碼）、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel 等
• 微任務主要有：Promise.then、 MutationObserver 等

事件環的工做流程

• JS 引擎首先從上而下執行用戶 script 代碼（宏任務）
• 若是遇到 setTimeout、promise、click事件等，按照分類放入宏任務隊列或微任務隊列中
• 繼續執行後面的代碼，script 執行完畢後，會清空全部的微任務
• 微任務清空後可能會進行一次 UI 渲染（不是每次都會）
• 而後再去宏任務隊列中取出一個執行，循環往復

圖示