一、前言

之前我們把react相關(guān)鉤子函數(shù)大致介紹了一遍，這一系列完結(jié)之后我莫名感到空虛，不知道接下來(lái)應(yīng)該更新有關(guān)哪方面的文章。最近想了想，打算先回歸一遍JS基礎(chǔ)，把一些比較重要的基礎(chǔ)知識(shí)點(diǎn)回顧一下，然后繼續(xù)擼框架（可能是源碼、也可能補(bǔ)全下全家桶）。不積跬步無(wú)以至千里，萬(wàn)丈高樓咱們先從JS的事件循環(huán)機(jī)制開(kāi)始吧，廢話不多說(shuō)，開(kāi)搞開(kāi)搞！

在JS中，我們所有的任務(wù)可以分為同步任務(wù)和異步任務(wù)。那么什么是同步任務(wù)？什么又是異步任務(wù)呢？

同步任務(wù)：是在主線程執(zhí)行棧上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)；比如：console.log、賦值語(yǔ)句等。

異步任務(wù)：不進(jìn)入主線程，是進(jìn)入任務(wù)隊(duì)列的任務(wù)，只有等主線程任務(wù)執(zhí)行完畢，"任務(wù)隊(duì)列"開(kāi)始通知主線程，請(qǐng)求執(zhí)行任務(wù)，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行。比如：ajax網(wǎng)絡(luò)請(qǐng)求，setTimeout 定時(shí)函數(shù)等都屬于異步任務(wù)，異步任務(wù)會(huì)通過(guò)任務(wù)隊(duì)列的機(jī)制(先進(jìn)先出的機(jī)制)來(lái)進(jìn)行協(xié)調(diào)。

我們執(zhí)行一段代碼時(shí)，在我們主線程的執(zhí)行棧執(zhí)行過(guò)程中，如果遇到同步任務(wù)會(huì)立即執(zhí)行，如果遇到異步任務(wù)會(huì)暫時(shí)掛起，將此異步任務(wù)推入任務(wù)隊(duì)列中(隊(duì)列的執(zhí)行機(jī)制遵循先進(jìn)先出)。當(dāng)主線程執(zhí)行棧里的同步任務(wù)執(zhí)行完畢后，js執(zhí)行引擎會(huì)去任務(wù)隊(duì)列中讀取掛起的異步任務(wù)并將其推入到執(zhí)行棧中執(zhí)行。這個(gè)不斷重復(fù)的過(guò)程（執(zhí)行棧執(zhí)行--->判斷同異步--->同步執(zhí)行/異步掛起推入事件對(duì)列--->?？蘸笕∈录?duì)列里任務(wù)并推入執(zhí)行棧執(zhí)行--->繼續(xù)判斷同異步--->.......）就是本文所要介紹的事件循環(huán)。

二、宏、微任務(wù)

我們每進(jìn)行一次事件循環(huán)的操作被稱之為tick，在介紹一次 tick 的執(zhí)行步驟之前，我們需要補(bǔ)充兩個(gè)概念：宏任務(wù)、微任務(wù)。

宏任務(wù)和微任務(wù)嚴(yán)格來(lái)說(shuō)是ES6之后才有的概念（原因在于ES6提出了Promise這個(gè)概念）；在Es6之后我們把JS的任務(wù)更細(xì)分成了宏任務(wù)和微任務(wù)。

其中，宏任務(wù)主要包括：script（整體代碼）、setTimeout、setInterval、I/O、UI交互事件、postMessage、requestAnimationFrame（幀動(dòng)畫）、MessageChannel、setImmediate(Node.js環(huán)境）；

微任務(wù)主要包括：Promise.then、MutaionObserver、process.nextTick(Node.js環(huán)境）；

好了，了解了宏微任務(wù)的概念之后我們就來(lái)掰扯掰扯每次tick的執(zhí)行順序吧。首先看下圖：

三、Tick 執(zhí)行順序

1、首先執(zhí)行一個(gè)宏任務(wù)（棧中沒(méi)有就從事件隊(duì)列中獲?。?/p>

2、執(zhí)行過(guò)程中如果遇到微任務(wù)，就將它添加到微任務(wù)的任務(wù)隊(duì)列中、如果有宏任務(wù)的話推到相應(yīng)的事件隊(duì)列中去；

3、宏任務(wù)執(zhí)行完畢后，立即執(zhí)行當(dāng)前微任務(wù)隊(duì)列中的所有微任務(wù)（依次執(zhí)行）；

4、當(dāng)前宏任務(wù)執(zhí)行完畢，開(kāi)始進(jìn)行渲染；5、開(kāi)始下一個(gè)宏任務(wù)（從事件隊(duì)列中獲取）開(kāi)啟下一次的tick；

需要注意的是：宏任務(wù)執(zhí)行過(guò)程中如果宏任務(wù)中又添加了一個(gè)新的宏任務(wù)到任務(wù)隊(duì)列中。 這個(gè)新的宏任務(wù)會(huì)等到下一次事件循環(huán)再執(zhí)行；而微任務(wù)則不同，微任務(wù)執(zhí)行過(guò)程中如果又添加了新的微任務(wù)，則新的微任務(wù)也會(huì)在本次微任務(wù)執(zhí)行過(guò)程中被執(zhí)行，直到微任務(wù)隊(duì)列為空。每次宏任務(wù)執(zhí)行完在開(kāi)啟下一次宏任務(wù)時(shí)會(huì)把微任務(wù)隊(duì)列中所有的微任務(wù)執(zhí)行完畢！

四、案例詳解

概念性的東西說(shuō)完了，下面就來(lái)找些demo練練手吧！

1.摻雜setTimeout

console.log('開(kāi)始');

setTimeout(()=>{
    console.log('同級(jí)的定時(shí)器');
      setTimeout(() => {
          console.log('內(nèi)層的定時(shí)器');
      }, 0);
},0)

console.log('結(jié)束');

輸出結(jié)果為

開(kāi)始 -> 結(jié)束 -> 同級(jí)的定時(shí)器 ->內(nèi)層的定時(shí)器

解釋上述代碼：

• 整體代碼作為一個(gè)宏任務(wù)進(jìn)入主線程執(zhí)行棧中；
• 遇到console.log('開(kāi)始')，控制臺(tái)輸出 開(kāi)始；
• 遇到有一個(gè)宏任務(wù)setTimeout，JS引擎將之掛起，并推入任務(wù)隊(duì)列；
• 遇到console.log('結(jié)束')，控制臺(tái)輸出 結(jié)束；本次宏任務(wù)執(zhí)行完畢，發(fā)現(xiàn)本次并無(wú)微任務(wù)，GUI進(jìn)行render渲染完畢開(kāi)啟下一次宏任務(wù)執(zhí)行，本次tick結(jié)束。
• JS引擎從任務(wù)隊(duì)列拿出第一個(gè)setTimeout宏任務(wù)，將至推入主線程執(zhí)行棧， 開(kāi)始進(jìn)行第二個(gè)宏任務(wù)；
• 執(zhí)行setTimeout回調(diào)，遇到 console.log('同級(jí)的定時(shí)器')，控制臺(tái)輸出 同級(jí)的定時(shí)器；
• 遇到第二個(gè)setTimeout ，這是個(gè)本次宏任務(wù)產(chǎn)生的新的宏任務(wù)，將此宏任務(wù)掛起，并推入任務(wù)隊(duì)列；
• 同樣此時(shí)發(fā)現(xiàn)沒(méi)有微任務(wù)，則GUI接管開(kāi)始進(jìn)行渲染，渲染完畢又開(kāi)啟下一次宏任務(wù)，tick結(jié)束；
• JS引擎又從任務(wù)隊(duì)列拿出第二個(gè)setTimeout宏任務(wù)，將之推入主線程執(zhí)行棧， 開(kāi)始進(jìn)行第三個(gè)宏任務(wù)；
• 執(zhí)行第二個(gè)setTimeout回調(diào)，遇到 console.log('內(nèi)層的定時(shí)器')，控制臺(tái)輸出 內(nèi)層的定時(shí)器；
• 本次宏任務(wù)執(zhí)行完畢發(fā)現(xiàn)沒(méi)有微任務(wù)，結(jié)束。

2.摻雜微任務(wù)，此處主要是Promise.then

console.log('script start');

setTimeout(function() {
  new Promise(resolve=>{
        console.log('000');
      resolve()
    }).then(res=>{
        console.log('這是微任務(wù)');
    })
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');       
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end');

輸出結(jié)果為:

script start -> promise1 -> script end -> then1 -> 000 -> timeout1 -> 這是微任務(wù) -> timeout2

解釋上述代碼：

• 整體script作為一個(gè)宏任務(wù)進(jìn)入主線程執(zhí)行棧；
• 遇到 console.log('script start') 輸出 script start ；
• 遇到setTimeout作為新的一個(gè)宏任務(wù)連同其回調(diào)內(nèi)容一同推入任務(wù)隊(duì)列 ；
• 遇到和script start 同級(jí)的new Promise 進(jìn)行執(zhí)行，此處需注意：Promise內(nèi)容是同步任務(wù)，它的.then才是微任務(wù)會(huì)被推入微任務(wù)隊(duì)列。所有此處JS引擎的處理邏輯是：遇到 console.log('promise1') 輸出 promise1 ，遇到resolve() 會(huì)將 Promise的.then函數(shù)推入微任務(wù)隊(duì)列（注意，我們常說(shuō)微任務(wù)時(shí)宏任務(wù)的小尾巴，指的是本次宏任務(wù)產(chǎn)生的微任務(wù)都會(huì)在本次宏任務(wù)執(zhí)行完之后進(jìn)行執(zhí)行清空。）；遇到resolve下面的setTimeout這是個(gè)新的宏任務(wù)，會(huì)被掛起并推入任務(wù)隊(duì)列。
• 繼續(xù)順序執(zhí)行，執(zhí)行到 console.log('script end') ，輸出script end；此時(shí)第一個(gè)宏任務(wù)執(zhí)行完畢，JS引擎開(kāi)始清理小尾巴（執(zhí)行并清空微任務(wù)隊(duì)列）。
• 此時(shí)由本次執(zhí)行宏任務(wù)的過(guò)程中產(chǎn)生了 .then(function() { console.log('then1')}) 這個(gè)微任務(wù)，JS引擎會(huì)將此任務(wù)內(nèi)的回調(diào)推入執(zhí)行棧進(jìn)行執(zhí)行，輸出 then1；
• 微任務(wù)隊(duì)列為空，開(kāi)啟下一個(gè)宏任務(wù)，第一輪tick結(jié)束；
• JS引擎從任務(wù)隊(duì)列中拿script start下面那個(gè)setTimeout宏任務(wù)將回調(diào)推入主線程執(zhí)行棧中進(jìn)行執(zhí)行；
• 遇到了Promise，執(zhí)行其內(nèi)容：遇到 console.log('000') 輸出 000；
• 執(zhí)行 resolve() 將.then函數(shù)推入微任務(wù)隊(duì)列（是此次宏任務(wù)的小尾巴）；
• 繼續(xù)執(zhí)行，遇到 console.log('timeout1') 輸出 timeout1；本次宏任務(wù)執(zhí)行完畢；
• 宏任務(wù)執(zhí)行完畢后緊接著處理小尾巴： .then(res=>{ console.log('這是微任務(wù)'); }) 輸出 這是微任務(wù);
• 微任務(wù)隊(duì)列清空后，繼續(xù)開(kāi)啟下一個(gè)宏任務(wù)，第二輪tick結(jié)束；
• 將任務(wù)隊(duì)列中的 setTimeout(() => console.log('timeout2'), 10); 回調(diào)推入執(zhí)行棧中執(zhí)行，輸出 timeout2 ； 無(wú)微任務(wù)，第三輪tick結(jié)束，任務(wù)隊(duì)列也為空。

好了，相信經(jīng)過(guò)這兩個(gè)例子，小伙伴們對(duì)事件循環(huán)有了初步的認(rèn)識(shí)。接下來(lái)我們?cè)兕B皮一下：對(duì)上面這個(gè)demo做一丟丟微調(diào)

微調(diào)一 ： 其他地方不變，then里塞定時(shí)器

setTimeout(function() {
  new Promise(resolve=>{
        console.log('000');
      resolve()
    }).then(res=>{
         setTimeout(()=>{
         console.log('這次的執(zhí)行順序呢？') -----> 如果這里再塞個(gè)定時(shí)器呢？執(zhí)行順序是什么？
        },10)
        console.log('這是微任務(wù)');
    })
  console.log('timeout1');
}, 10);

微調(diào)二：其他地方不變，對(duì)Promise進(jìn)行鏈?zhǔn)秸{(diào)用

new Promise(resolve => {
    console.log('promise1');       
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
}).then(()=>{
    console.log('then2')
}).then(()=>{
    console.log('then3')
})

此Promise進(jìn)行鏈?zhǔn)秸{(diào)用，其他地方不動(dòng)，此時(shí)的執(zhí)行順序是什么?

提示：在一次tick結(jié)束時(shí)，此tick內(nèi)微任務(wù)隊(duì)列中的微任務(wù)一定會(huì)執(zhí)行完并清空，如果在執(zhí)行過(guò)程中又產(chǎn)生了微任務(wù)，那么同樣會(huì)在此tick過(guò)程中執(zhí)行完畢；而宏任務(wù)的執(zhí)行則可以看成是下一次tick的開(kāi)始。

3.摻雜async/await

在進(jìn)行demo解析之前，我們需要補(bǔ)充一下async/await的相關(guān)知識(shí)點(diǎn)。

async

async相當(dāng)于隱式返回Promise：當(dāng)我們?cè)诤瘮?shù)前使用async的時(shí)候，使得該函數(shù)返回的是一個(gè)Promise對(duì)象，async的函數(shù)會(huì)在這里幫我們隱式使用Promise.resolve()；

下面看個(gè)小demo來(lái)理解下async函數(shù)是怎么隱式轉(zhuǎn)換的：

async function test() {
    console.log('這是async函數(shù)')
    return '測(cè)試隱式轉(zhuǎn)換' 
}

上面這個(gè)async就相當(dāng)于如下代碼：

function test(){
    return new Promise(function(resolve) {
      console.log('這是async函數(shù)')
       resolve('測(cè)試隱式轉(zhuǎn)換')
   })
}

await

await表示等待，是右側(cè)表達(dá)式的結(jié)果，這個(gè)表達(dá)式的計(jì)算結(jié)果可以是 Promise 對(duì)象的值或者一個(gè)函數(shù)的值（換句話說(shuō)，就是沒(méi)有特殊限定）。并且await只能在帶有async的內(nèi)部使用；使用await時(shí)，會(huì)從右往左執(zhí)行，當(dāng)遇到await時(shí)，會(huì)阻塞函數(shù)內(nèi)部處于它后面的代碼，去執(zhí)行該函數(shù)外部的 代碼 ， 當(dāng)外部代碼執(zhí)行完畢，再回到該函數(shù)內(nèi)部執(zhí)行await后面剩余的代碼；

好了，補(bǔ)充完前置知識(shí)我們來(lái)做個(gè)demo助助興：

摻雜async/await的事件循環(huán)

async function async2() {				
    console.log('async2');     
}

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

console.log('script start');

setTimeout(function () {
    console.log('setTimeout');
}, 0);

async1();

new Promise((resolve) => {
    resolve()
    console.log('promise1');
}).then(function () {
    console.log('promise2');
});

console.log('script end');

輸出順序?yàn)?/p>

script start --> async1 start --> async2 --> promise1 --> script end --> async1 end --> promise2 --> setTimeout  

首先為方便理解我們先將async函數(shù)轉(zhuǎn)為return Promise的那種形式：

①:
async function async2() {				
    console.log('async2');     
}
轉(zhuǎn)換后如下:
function async2() {			
    return  new Promise(resolve=>{
       console.log('async2');     
    })
}


②:
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
轉(zhuǎn)換后如下:
function async1() {
  return new Promise(resolve=>{
    console.log('async1 start');
    #執(zhí)行async2，并且會(huì)阻塞其后面的代碼
    console.log('async1 end');
  })
}

所以，最后我們包含async函數(shù)的代碼塊就相當(dāng)于如下代碼：

function async2() {			
    return  new Promise(resolve=>{
       console.log('async2');     
    })
}

function async1() {
  return new Promise(resolve=>{
    console.log('async1 start');
    #執(zhí)行async2，并且會(huì)阻塞其后面的代碼，在此處是阻塞了console.log('async1 end')的執(zhí)行
    console.log('async1 end');
  })
}
=============上面為聲明部分===========
console.log('script start');

setTimeout(function () {
    console.log('setTimeout');
}, 0);

new Promise(resolve=>{
    console.log('async1 start');
    #執(zhí)行async2，并且會(huì)阻塞其后面的代碼，在此處是阻塞了console.log（async1end）的執(zhí)行；這里相當(dāng)于awaitasync2（）
   
    console.log('async1 end');
  })
}

new Promise((resolve) => {
    resolve()
    console.log('promise1');
}).then(function () {
    console.log('promise2');
});

console.log('script end');

經(jīng)過(guò)一系列騷操作之后，我們終于可以來(lái)分析這個(gè)代碼塊的執(zhí)行順序了，廢話不多說(shuō)，開(kāi)沖。

解釋上述代碼：

• 首先整體代碼作為第一個(gè)宏任務(wù)進(jìn)入主線程執(zhí)行棧；
• 首先順序執(zhí)行，遇到了async2、async1 函數(shù)的聲明，不進(jìn)行任何輸出；
• 執(zhí)行到console.log('script start') 輸出 script start ；
• 繼續(xù)執(zhí)行，遇到setTimeout宏任務(wù)，掛起并推入任務(wù)隊(duì)列；
• 接著執(zhí)行Promise內(nèi)容部分，遇到console.log('async1 start')，輸出async1 start ；
• 這一步重點(diǎn)來(lái)了，遇到了await，這該怎么辦呢？別急，咱們?cè)賮?lái)看看使用await會(huì)發(fā)生什么：使用await時(shí)，會(huì)從右往左執(zhí)行，當(dāng)遇到await時(shí)，會(huì)阻塞函數(shù)內(nèi)部處于它后面的代碼，去執(zhí)行該函數(shù)外部的 代碼 ， 當(dāng)外部代碼執(zhí)行完畢，再回到該函數(shù)內(nèi)部執(zhí)行await后面剩余的代碼；
• 好了，下面開(kāi)始解釋await async2（）：由于是是從右往左執(zhí)行，所以我們首先執(zhí)行了async2（）輸出了一個(gè)Promise，我們執(zhí)行了Promise的內(nèi)容輸出了async2；async2執(zhí)行完了之后，遇到await，完全不出意外，后面的代碼被阻塞；我們?nèi)?zhí)行外面的代碼；
• 因?yàn)閏onsole.log('async1 end')被await阻塞掉了，我們先執(zhí)行外面的代碼：執(zhí)行了外面Promise的內(nèi)容，遇到了resolve()，將.then函數(shù)推入微任務(wù)隊(duì)列；然后執(zhí)行console.log('promise1')，輸出 promise1；
• 最后執(zhí)行到console.log('script end')，輸出 script end；
• 到此，我們外層的代碼就執(zhí)行完畢，現(xiàn)在想想好像少了什么？往前一看，我們console.log('async1 end')還在等待，此時(shí)，JS引擎執(zhí)行l(wèi)og輸出 async1 end 。
• 由此，我們本次的宏任務(wù)就執(zhí)行完畢，下面看看是否有微任務(wù)，JS引擎去微任務(wù)隊(duì)列一看，好家伙，還藏著一個(gè) then(function () {console.log('promise2');}); 把此任務(wù)回調(diào)推到執(zhí)行棧中執(zhí)行，輸出 promise2；
• 此次tick執(zhí)行結(jié)束，開(kāi)啟下一個(gè)宏任務(wù)；
• 從任務(wù)隊(duì)列拿setTimeout這個(gè)宏任務(wù)，塞入執(zhí)行棧執(zhí)行，打印輸出setTimeout，本次無(wú)微任務(wù)，結(jié)束tick；
• 循環(huán)結(jié)束；

到此這篇關(guān)于實(shí)例詳解JS中的事件循環(huán)機(jī)制的文章就介紹到這了,更多相關(guān)JS事件循環(huán)機(jī)制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論