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

來(lái)源：Loong Panda

概念

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

因?yàn)镴avaScript 是單線程 ，也就是說(shuō) ，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束
，才會(huì)執(zhí)行后一個(gè)任務(wù)。

但是IO設(shè)備（輸入、出設(shè)備）可能會(huì)因?yàn)榫W(wǎng)絡(luò)等因數(shù)導(dǎo)致速度很慢（比如Ajax）繼而CPU沒(méi)有充分利用，所以設(shè)計(jì)者將IO設(shè)備的任務(wù)掛起，先執(zhí)行后面的任務(wù) ，等到IO設(shè)備返回了結(jié)果 ，再回過(guò)頭，把掛起的任務(wù)繼續(xù)執(zhí)行下去。于是 ，就把所有任務(wù)分成兩種，一種是同步任務(wù)（synchronous） ，另一種是異步任務(wù)（asynchronous）。

同步任務(wù)：

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

異步任務(wù)：

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

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

執(zhí)行機(jī)制：

（1）所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧（execution context stack）