第一文詳解JS中的事件循環(huán)機(jī)制目錄前言1、JavaScript是單線程的2、同步和異步3、事件循環(huán)

前言

我們知道JavaScript是單線程的編程語言，只能同一時(shí)間內(nèi)做一件事，按順序來處理事件，但是在遇到異步事件的時(shí)候，js線程并沒有阻塞，還會(huì)繼續(xù)執(zhí)行，這又是為什么呢？本文來總結(jié)一下js的事件循環(huán)機(jī)制。

1、JavaScript是單線程的

JavaScript是一種單線程的編程語言，只有一個(gè)調(diào)用棧，決定了它在同一時(shí)間只能做一件事。在代碼執(zhí)行的時(shí)候，通過將不同函數(shù)的執(zhí)行上下文壓入執(zhí)行棧中來保證代碼的有序執(zhí)行。在執(zhí)行同步代碼的時(shí)候，如果遇到了異步事件，js引擎并不會(huì)一直等待其返回結(jié)果，而是會(huì)將這個(gè)事件掛起，繼續(xù)執(zhí)行執(zhí)行棧中的其他任務(wù)。因此JS又是一個(gè)非阻塞、異步、并發(fā)式的編程語言。

2、同步和異步

同步和異步的關(guān)系就類似于我們?cè)诓蛷d排隊(duì)吃飯的時(shí)候，每個(gè)人必須挨個(gè)的排隊(duì)來進(jìn)行買飯這個(gè)操作，而在這個(gè)過程中十分無聊，這時(shí)候我們可以邊排著隊(duì)邊玩下手機(jī)，不需多久就排到了我們買飯。這個(gè)排隊(duì)過程就是JS中的一個(gè)同步操作，玩手機(jī)就像一個(gè)異步操作。同步和異步的差別就在于排隊(duì)買飯和玩手機(jī)這兩個(gè)任務(wù)的執(zhí)行順序的不同。

同步：指的是在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)。可以理解為在執(zhí)行完一個(gè)函數(shù)或方法之后，一直等待系統(tǒng)返回值或消息，這時(shí)程序是處于阻塞的，只有接收到返回的值或消息后才往下執(zhí)行其他的命令。

異步：指的是不進(jìn)入主線程，某個(gè)異步任務(wù)可以執(zhí)行了，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行。執(zhí)行完函數(shù)或方法后，不必阻塞性地等待返回值或消息，只需要向系統(tǒng)委托一個(gè)異步過程，那么當(dāng)系統(tǒng)接收到返回值或消息時(shí)，系統(tǒng)會(huì)自動(dòng)觸發(fā)委托的異步過程，從而完成一個(gè)完整的流程。

console.log(1);

setTimeout(()={

console.log(2);

},0);

setTimeout(()={

console.log(3);

},0);

setTimeout(()={

console.log(4);

},0);

console.log(5);

上面的代碼會(huì)打印1》5》2》3》4，為什么會(huì)產(chǎn)生這樣的結(jié)果，我們來看下事件循環(huán)。

3、事件循環(huán)

事件循環(huán)過程可以簡單描述為：

a、函數(shù)入棧，當(dāng)Stack中執(zhí)行到異步任務(wù)的時(shí)候，就將他丟給WebAPIs,接著執(zhí)行同步任務(wù),直到Stack為空;

b、在此期間WebAPIs完成這個(gè)事件，把回調(diào)函數(shù)放入CallbackQueue(任務(wù)隊(duì)列)中等待;

c、當(dāng)執(zhí)行棧為空時(shí)，EventLoop把CallbackQueue中的一個(gè)任務(wù)放入Stack中,回到第1步。

事件循環(huán)（EventLoop）是讓JavaScript做到既是單線程，又絕對(duì)不會(huì)阻塞的核心機(jī)制，也是JavaScript并發(fā)模型（ConcurrencyModel）的基礎(chǔ)，是用來協(xié)調(diào)各種事件、用戶交互、腳本執(zhí)行、UI渲染、網(wǎng)絡(luò)請(qǐng)求等的一種機(jī)制。在執(zhí)行和協(xié)調(diào)各種任務(wù)時(shí)，EventLoop會(huì)維護(hù)自己的事件隊(duì)列。

事件隊(duì)列是一個(gè)存儲(chǔ)著待執(zhí)行任務(wù)的隊(duì)列，其中的任務(wù)嚴(yán)格按照時(shí)間先后順序執(zhí)行，排在隊(duì)頭的任務(wù)將會(huì)率先執(zhí)行，而排在隊(duì)尾的任務(wù)會(huì)最后執(zhí)行。事件隊(duì)列每次僅執(zhí)行一個(gè)任務(wù)，在該任務(wù)執(zhí)行完畢之后，再執(zhí)行下一個(gè)任務(wù),一個(gè)任務(wù)開始后直至結(jié)束，不會(huì)被其他任務(wù)中斷。執(zhí)行棧則是一個(gè)類似于函數(shù)調(diào)用棧的運(yùn)行容器，當(dāng)執(zhí)行棧為空時(shí)，JS引擎便檢查事件隊(duì)列，如果不為空的話，事件隊(duì)列便將第一個(gè)任務(wù)壓入執(zhí)行棧中運(yùn)行。

任務(wù)隊(duì)列：在JavaScript中，異步任務(wù)被分為兩種，一種宏任務(wù)（MacroTask）也叫Task，一種叫微任務(wù)：

宏任務(wù)的例子很多，包括創(chuàng)建主文檔對(duì)象、解析HTML、執(zhí)行主線（或全局）JavaScript代碼，更改當(dāng)前URL以及各種事件，如頁面加載、輸入、網(wǎng)絡(luò)事件和定時(shí)器事件。從瀏覽器的角度來看，宏任務(wù)代表一個(gè)個(gè)離散的、獨(dú)立工作單元。運(yùn)行完任務(wù)后，瀏覽器可以繼續(xù)其他調(diào)度，如重新渲染頁面的UI或執(zhí)行垃圾回收。

而微任務(wù)是更小的任務(wù)。微任務(wù)更新應(yīng)用程序的狀態(tài)，但必須在瀏覽器任務(wù)繼續(xù)執(zhí)行其他任務(wù)之前執(zhí)行，瀏覽器任務(wù)包括重新渲染頁面的UI。微任務(wù)的案例包括promise回調(diào)函數(shù)、DOM發(fā)生變化等。微任務(wù)需要盡可能快地、通過異步方式執(zhí)行，同時(shí)不能產(chǎn)生全新的微任務(wù)。微任務(wù)使得我們能夠在重新渲染UI之前執(zhí)行指定的行為，避免不必要的UI重繪，UI重繪會(huì)使應(yīng)用程序的狀態(tài)不連續(xù)。

當(dāng)當(dāng)前執(zhí)行棧中的事件執(zhí)行完畢后，js引擎首先會(huì)判斷微任務(wù)對(duì)列中是否有任務(wù)可以執(zhí)行，如果有就將微任務(wù)隊(duì)首的事件壓入棧中執(zhí)行。當(dāng)微任務(wù)對(duì)列中的任務(wù)都執(zhí)行完成后再去判斷宏任務(wù)對(duì)列中的任務(wù)。每次宏任務(wù)執(zhí)行完畢，都會(huì)去判斷微任務(wù)隊(duì)列是否產(chǎn)生新任務(wù)，若存在就優(yōu)先執(zhí)行微任務(wù)，否則按序執(zhí)行宏任務(wù)。

事件循環(huán)通常至少需要兩個(gè)任務(wù)隊(duì)列：宏任務(wù)隊(duì)列和微任務(wù)隊(duì)列。兩種隊(duì)列在同一時(shí)刻都只執(zhí)行一個(gè)任務(wù)。

console.log("scriptstart");

setTimeout(function(){

console.log("setTimeout");

},0);

Promise.resolve()

.then(function(){

console.log("promise1");

.then(function(){

console.log("promise2");

console.log("scriptend");

按照上面的內(nèi)容，分析執(zhí)行步驟：

1、宏任務(wù)：執(zhí)行整體代碼（相當(dāng)于script中的代碼）：

輸出:scriptstart遇到setTimeout，加入宏任務(wù)隊(duì)列，當(dāng)前宏任務(wù)隊(duì)列(setTimeout)遇到promise，加入微任務(wù)，當(dāng)前微任務(wù)隊(duì)列(promise1)輸出：scriptend

2、微任務(wù)：執(zhí)行微任務(wù)隊(duì)列（promise1）

輸出：promise1，then之后產(chǎn)生一個(gè)微任務(wù)，加入微任務(wù)隊(duì)列，當(dāng)前微任務(wù)隊(duì)列（promise2）執(zhí)行then，輸出promise2執(zhí)行渲染操作，更新界面。宏任務(wù)：執(zhí)行setTimeout輸出：setTimeout

注意：newPromise(..)中的代碼，也是同步代碼，會(huì)立即執(zhí)行。只有then之后的代碼，才是異步執(zhí)行的代碼，是一個(gè)微任務(wù)。

console.log("scriptstart");

setTimeout(function(){

console.log("timeout1");

},10);

newPromise((resolve)={

console.log("promise1");

resolve();

setTimeout(()=console.log("timeout2"),10);

}).then(function(){

console.log("then1");

console.log("scriptend");

步驟解析：

當(dāng)前任務(wù)隊(duì)列：微任務(wù):[],宏任務(wù)：[script]

宏任務(wù)：

輸出:scriptstart遇到timeout1，加入宏任務(wù)遇到Promise，輸出promise1，直接resolve，將then加入微任務(wù)，遇到timeout2，加入宏任務(wù)。輸出scriptend宏任務(wù)第一個(gè)執(zhí)行結(jié)束當(dāng)前任務(wù)隊(duì)列：微任務(wù)[then1]，宏任務(wù)[timeou1,timeout2]

微任務(wù)：

執(zhí)行then1，輸出then1微任務(wù)隊(duì)列清空當(dāng)前任務(wù)隊(duì)列：微任務(wù)[]，宏任務(wù)[timeou1,timeout2]

宏任務(wù)：

輸出timeout1輸出timeout2當(dāng)前任務(wù)隊(duì)列：微任務(wù)[]，宏任務(wù)[timeou2]

微任務(wù)：

為空跳過當(dāng)前任務(wù)隊(duì)列：微任務(wù)[]，宏任務(wù)[timeou2]

宏任務(wù)：

輸出timeout2

注意：async和await其實(shí)就是Generator和Promise的語法糖。async函數(shù)和普通函數(shù)沒有什么不同，他只是表示這個(gè)函數(shù)里有異步操作的方法，并返回一個(gè)Promise對(duì)象

asyncfunctionasync1(){

console.log("async1start");

awaitasync2();

console.log("async1end");

//Promise寫法

asyncfunctionasync1(){

console.log("async1start");

Promise.resolve(async2()).then(()=console.log("async1end"));

}

下面例子：

asyncfunctionasync1(){

console.log("async1start");

awaitasync2();

console.log("async1end");

asyncfunctionasync2(){

console.log("async2");

async1();

setTimeout(()={

console.log("timeout");

},0);

newPromise(function(resolve){

console.log("promise1");

resolve();

}).then(function(){

console.log("promise2");

console.log("scriptend");

步驟解析：

當(dāng)前任務(wù)隊(duì)列：宏任務(wù)：[script]，微任務(wù):[]

宏任務(wù)：

輸出：async1start遇到async2，輸出：async2，并將then（async1end）加入微任務(wù)遇到setTimeout，加入宏任務(wù)。遇到Promise，