JavaScript是單線(xiàn)程的語(yǔ)言，單線(xiàn)程是指所有的程序路徑按照一定的順序執(zhí)行，只有前面的程序執(zhí)行了，后面的程序才會(huì)執(zhí)行。

也就是說(shuō)在同一時(shí)間，JavaScript只能做一件事情，為了協(xié)調(diào)瀏覽器產(chǎn)生的各種事件、網(wǎng)絡(luò)處理、前端渲染等行為，js的事件循環(huán)機(jī)制，即EventLoop應(yīng)運(yùn)而生。

JavaScript是單線(xiàn)程的原因

js的設(shè)計(jì)初衷是作為瀏覽器的腳本語(yǔ)言，瀏覽器中涉及到與用戶(hù)互動(dòng)、頻繁操作DOM等動(dòng)作，如果js設(shè)計(jì)為多線(xiàn)程，會(huì)有很復(fù)雜的線(xiàn)程同步問(wèn)題，即使同步問(wèn)題被解決，也會(huì)降低瀏覽器的響應(yīng)效率，得不償失，因此，JavaScript被設(shè)計(jì)為單線(xiàn)程保證瀏覽器動(dòng)作的一致性。

事件循環(huán)（EventLoop）

JavaScript既然被設(shè)計(jì)為單線(xiàn)程，是如何做到異步的呢？這時(shí)就用到了JavaScript的事件循環(huán)機(jī)制。

如下圖所示為JavaScript事件循環(huán)的原理圖。

如圖所示，事件循環(huán)是主線(xiàn)程循環(huán)讀取任務(wù)隊(duì)列中的任務(wù)，直到所有的任務(wù)都被執(zhí)行。在事件循環(huán)中，JavaScript用到了棧、堆以及隊(duì)列等數(shù)據(jù)結(jié)構(gòu)。

• 棧中存放的是執(zhí)行上下文，有函數(shù)被調(diào)用時(shí)，就會(huì)創(chuàng)建上下文存放在執(zhí)行棧中。
• 堆中表示一個(gè)非結(jié)構(gòu)化的內(nèi)存區(qū)域，用來(lái)存放對(duì)象。隊(duì)列是指任務(wù)隊(duì)列，用于存放異步任務(wù)。
• js引擎遇到一個(gè)異步事件之后不會(huì)一直等待事件的返回結(jié)果，而是將事件掛起，繼續(xù)執(zhí)行執(zhí)行棧中的其他任務(wù)。

當(dāng)異步事件返回結(jié)果時(shí)，js將異步事件callback函數(shù)放入隊(duì)列中，被放入隊(duì)列中的異步事件不會(huì)立即回調(diào)，等到當(dāng)前執(zhí)行棧中的任務(wù)都執(zhí)行完成，處于閑置狀態(tài)的主線(xiàn)程按照隊(duì)列順序?qū)⑻幱谑孜皇录腸allback函數(shù)放入執(zhí)行棧中，執(zhí)行該函數(shù)的同步代碼，如果遇到了異步事件，同樣也會(huì)將其回調(diào)函數(shù)放入事件隊(duì)列中......

如此反復(fù)，就形成了一個(gè)無(wú)限循環(huán)，這也是被稱(chēng)為“事件循環(huán)（EventLoop)”的原因。

宏任務(wù)(Micro task)和微任務(wù)（Macro task）

js事件循環(huán)的基本原理已經(jīng)描述清楚，但是異步任務(wù)之間也有所不同。

上面講到，JavaScript在執(zhí)行異步任務(wù)時(shí)，回調(diào)函數(shù)會(huì)被放在js的任務(wù)隊(duì)列中，實(shí)際上，回調(diào)函數(shù)的類(lèi)別不同，執(zhí)行的優(yōu)先級(jí)也不同。

不同的優(yōu)先級(jí)被分為兩類(lèi)，一類(lèi)是宏任務(wù)（Micro task），一類(lèi)是微任務(wù)（Macro task）。

回調(diào)函數(shù)是微任務(wù)時(shí)，會(huì)被放在微任務(wù)隊(duì)列，回調(diào)函數(shù)是宏任務(wù)時(shí)，會(huì)被放在宏任務(wù)隊(duì)列。微任務(wù)的優(yōu)先級(jí)高于宏任務(wù)，當(dāng)主線(xiàn)程的任務(wù)執(zhí)行完成時(shí)，會(huì)首先去執(zhí)行微任務(wù)隊(duì)列中首位的回調(diào)函數(shù)，當(dāng)微任務(wù)隊(duì)列中為空時(shí)，才回去執(zhí)行宏任務(wù)隊(duì)列中的回調(diào)函數(shù)。

常見(jiàn)的微任務(wù)有：promise，常見(jiàn)的宏任務(wù)有setInterval等。

因此，事件循環(huán)的執(zhí)行流程圖如下所示：

? ?