js Event Loop 事件循環(huán)

來源：Loong Panda

概念

Event Loop即事件循環(huán)，是解決javaScript單線程運行阻塞的一種機制
。 主要是為了協(xié)調單線程下  ，事件
、用戶交互、腳本、UI 渲染和網絡處理等行為 ，防止主線程的不阻塞。

因為JavaScript 是單線程，也就是說
，所有任務需要排隊
，前一個任務結束 ，才會執(zhí)行后一個任務 。

但是IO設備（輸入
、出設備）可能會因為網絡等因數導致速度很慢（比如Ajax）繼而CPU沒有充分利用，所以設計者將IO設備的任務掛起 ，先執(zhí)行后面的任務，等到IO設備返回了結果  ，再回過頭 ，把掛起的任務繼續(xù)執(zhí)行下去 。于是，就把所有任務分成兩種，一種是同步任務（synchronous）
，另一種是異步任務（asynchronous）。

同步任務：

只有前一個任務執(zhí)行完畢，才能執(zhí)行后一個任務；直接在主線程上排隊執(zhí)行且最先執(zhí)行，形成一個執(zhí)行棧

異步任務 ：

不進入主線程、而是進入"任務隊列"（task queue）的任務 ，只有"任務隊列"通知主線程 ，某個異步任務可以執(zhí)行了，該任務才會進入主線程執(zhí)行 。

一、microtask(微任務)1、Promise.then2
、MutationObserver（Mutation Observer API 用來監(jiān)視 DOM 變動）3、Object.observe()（已廢棄）4、nextTick(Node.js 環(huán)境)二、macrotask(宏任務)1、script(整體代碼) 注: 這個很容易忽略掉,就是指script根環(huán)境,而且它永遠是第一個執(zhí)行的宏任務(包含了同步的任務).2、setTimeout3
、setInterval4、setImmediate5	、IO6
、UI rendering(DOM event)

執(zhí)行機制 ：

（1）所有同步任務都在主線程上執(zhí)行 ，形成一個執(zhí)行棧（execution context stack） 。
（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
（3）一旦"執(zhí)行棧"中的所有同步任務執(zhí)行完畢 ，系統(tǒng)就會讀取"任務隊列"，執(zhí)行一個宏任務， 執(zhí)行過程中如果遇到微任務，就將它添加到微任務的任務隊列中 宏任務執(zhí)行完畢后 ，再依次執(zhí)行執(zhí)行當前微任務隊列中的所有微任務，當前宏任務執(zhí)行完畢，開始檢查渲染，然后GUI線程接管渲染 渲染完畢后，JS線程繼續(xù)接管
 ，開始下一個宏任務（從事件隊列中獲?。?br>（4）主線程不斷重復上面的第三步  。

任務隊列

"任務隊列"是一個先進先出的數據結構 ，也是一個事件的隊列（也可以理解成消息的隊列） ，IO設備完成一項任務
，就在"任務隊列"中添加一個事件，表示相關的異步任務可以進入"執(zhí)行棧"了
。主線程讀取"任務隊列"，就是讀取里面有哪些事件。

"任務隊列"中的事件 ，除了IO設備的事件以外 ，還包括一些用戶產生的事件（比如鼠標點擊、頁面滾動等等）。只要指定過回調函數 ，這些事件發(fā)生時就會進入"任務隊列"