事件循環
JavaScript 語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。爲了協調事件、用戶交互、腳本、UI 渲染和網絡處理等行爲，防止主線程的不阻塞，Event Loop 的方案應用而生。Event Loop 包含兩類：一類是基於 Browsing Context，一種是基於 Worker。二者的運行是獨立的，也就是說，每一個 JavaScript 運行的"線程環境"都有一個獨立的 Event Loop，每一個 Web Worker 也有一個獨立的 Event Loop。
本文所涉及到的事件循環是基於 Browsing Context。
任務隊列
根據規範，事件循環是通過任務隊列的機制來進行協調的。一個 Event Loop 中，可以有一個或者多個任務隊列(task queue)，一個任務隊列便是一系列有序任務(task)的集合；每個任務都有一個任務源(task source)，源自同一個任務源的 task 必須放到同一個任務隊列，從不同源來的則被添加到不同隊列。setTimeout/Promise 等API便是任務源，而進入任務隊列的是他們指定的具體執行任務。
在事件循環中，每進行一次循環操作稱爲 tick，每一次 tick 的任務處理模型是比較複雜的，但關鍵步驟如下：
- 在此次 tick 中選擇最先進入隊列的任務(oldest task)，如果有則執行(一次)
- 檢查是否存在 Microtasks，如果存在則不停地執行，直至清空 Microtasks Queue
- 更新 render
- 主線程重複執行上述步驟
在上訴tick的基礎上需要了解幾點：
- JS分爲同步任務和異步任務
- 同步任務都在主線程上執行，形成一個執行棧
- 主線程之外，事件觸發線程管理着一個任務隊列，只要異步任務有了運行結果，就在任務隊列之中放置一個事件。
- 一旦執行棧中的所有同步任務執行完畢（此時JS引擎空閒），系統就會讀取任務隊列，將可運行的異步任務添加到可執行棧中，開始執行。
宏任務
(macro)task，可以理解是每次執行棧執行的代碼就是一個宏任務（包括每次從事件隊列中獲取一個事件回調並放到執行棧中執行）。
瀏覽器爲了能夠使得JS內部(macro)task與DOM任務能夠有序的執行，會在一個(macro)task執行結束後，在下一個(macro)task 執行開始前，對頁面進行重新渲染，流程如下：
(macro)task->渲染->(macro)task->...宏任務包含：
script(整體代碼)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 環境)微任務
microtask,可以理解是在當前 task 執行結束後立即執行的任務。也就是說，在當前task任務後，下一個task之前，在渲染之前。
所以它的響應速度相比setTimeout（setTimeout是task）會更快，因爲無需等渲染。也就是說，在某一個macrotask執行完後，就會將在它執行期間產生的所有microtask都執行完畢（在渲染前）。
微任務包含：
Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 環境)運行機制
在事件循環中，每進行一次循環操作稱爲 tick，每一次 tick 的任務處理模型是比較複雜的，但關鍵步驟如下：
- 執行一個宏任務（棧中沒有就從事件隊列中獲取）
- 執行過程中如果遇到微任務，就將它添加到微任務的任務隊列中
- 宏任務執行完畢後，立即執行當前微任務隊列中的所有微任務（依次執行）
- 當前宏任務執行完畢，開始檢查渲染，然後GUI線程接管渲染
- 渲染完畢後，JS線程繼續接管，開始下一個宏任務（從事件隊列中獲取）
如圖：
