一

要了解事件迴圈Event Loop，首先我們必須牢記三點

1、javascript是一門單執行緒語言

   不管是什麼新框架新語法糖實現的所謂非同步，其實都是用同步的方法去模擬的

   在最新的HTML5中提出了Web-Worker，但javascript是單執行緒這一核心仍未改變。

   所以一切javascript版的"多執行緒"都是用單執行緒模擬出來的

2、Event Loop

   瀏覽器或Node的一種解決javaScript單執行緒執行時不會阻塞的一種機制，

   也就是我們經常使用“非同步”的原理。

3、DOM渲染是在GUI執行緒進行的

    他和JS的巨集任務和微任務是互斥的，就是二者必須有個先後執行的順序

所以我們可以理解為有如下圖所示的一個無限迴圈（Event Loop），有無數的任務等著去執行

有了這無數的任務，我們怎麼來處理這些任務呢？他們必然是有優先順序的，要在不同的佇列去執行

二、

三個佇列：微任務佇列，巨集任務佇列，渲染佇列

事件迴圈就會從不同的佇列中取對應的任務

1、渲染佇列（Render Queue）

每個幀渲染可以分為幾個階段，每個階段可分為子階段，我們大致可以如下圖所示理解這個渲染

位置大小-->樣式-->佈局-->繪製-->合成

2、微任務佇列（Microtask Queue）

顧名思義這個裡面存放的都是些微任務，什麼是微任務（MicroTask）？

Promises 或者 MutationObserver（觀察的是DOM） callbacks等

微任務是特別的，主要特點是，一旦呼叫堆疊變空，它們就會被執行，

3、巨集任務佇列（Macrotask Queue）

顧名思義這個裡面存放的都是巨集任務，什麼是巨集任務（MacroTask也叫Task）？

Web API、Script程式碼塊、UI樣式的計算等

巨集任務的特點就是耗時比較久，優先順序低，排隊等著執行

4、呼叫堆疊（Call Stack）

呼叫堆疊是一個列表，顯示當前正在呼叫哪些函式，以及當前函式完成執行後將在何處進行轉換。

故我們可以用下圖簡單示意