下面一道關(guān)于宏任務(wù)和微任務(wù)的題：

setTimeout(function(){
  console.log('1')
});
 
new Promise(function(resolve){
  console.log('2');
     resolve();
}).then(function(){
 console.log('3')
});
 
console.log('4')

試問(wèn)一下上面代碼的執(zhí)行順序是啥？

有小伙伴可能會(huì)答：2，4，1，3

估摸著是這么想的：我難道不知道js是一行一行執(zhí)行的，setTimeout是異步，所以先放后面；往下走，執(zhí)行了console.log(2) ，.then()是異步的，放在后面；走了console.log(4);再去異步隊(duì)列里走，先是console.log(1);再是console.log(3) 。

我有點(diǎn)慌，于是我粘貼到瀏覽器去瞅兩眼：

無(wú)法相信

帶著困惑的我，只能去好好研究研究JavaScript的運(yùn)行機(jī)制了！

1、關(guān)于JavaScript

JavaScript是一門(mén)單線程語(yǔ)言，即一次只能完成一個(gè)任務(wù)，若有多個(gè)任務(wù)要執(zhí)行，則必須排隊(duì)按照隊(duì)列來(lái)執(zhí)行(前一個(gè)任務(wù)完成,再執(zhí)行下一個(gè)任務(wù))。

2、JavaScript事件循環(huán)

既然js是單線程，那就像只有一個(gè)窗口的食堂，學(xué)生需要排隊(duì)一個(gè)一個(gè)打飯，同理js任務(wù)也要一個(gè)一個(gè)順序執(zhí)行。這種模式執(zhí)行簡(jiǎn)單，但隨著日后的需求，事務(wù)，請(qǐng)求增多，這種單線程模式執(zhí)行效率必定低下。只要有一個(gè)任務(wù)執(zhí)行消耗了很長(zhǎng)時(shí)間，在這個(gè)時(shí)間里后面的任務(wù)無(wú)法執(zhí)行。

常見(jiàn)的有新聞包含的超清圖片加載很慢，難道我們的網(wǎng)頁(yè)要一直卡著直到圖片完全顯示出來(lái)？為了解決這個(gè)問(wèn)題，JavaScript語(yǔ)言將任務(wù)執(zhí)行模式分成同步和異步：

• 同步模式： 就是上面所說(shuō)的一種執(zhí)行模式，后一個(gè)任務(wù)等待前一個(gè)任務(wù)結(jié)束，然后再執(zhí)行，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。
• 異步模式： 就是每一個(gè)任務(wù)有一個(gè)或多個(gè)回調(diào)函數(shù)（callback），前一個(gè)任務(wù)結(jié)束后，不是執(zhí)行后一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個(gè)任務(wù)則是不等前一個(gè)任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的。

導(dǎo)圖要表達(dá)的內(nèi)容用文字來(lái)表述的話：

• 同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行"場(chǎng)所"，同步的進(jìn)入主線程，異步的進(jìn)入Event Table并注冊(cè)函數(shù)。
• 當(dāng)指定的事情完成時(shí)，Event Table會(huì)將這個(gè)函數(shù)移入Event Queue。
• 主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去Event Queue讀取對(duì)應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行。
• 上述過(guò)程會(huì)不斷重復(fù)，也就是常說(shuō)的Event Loop(事件循環(huán))。
  

 再配上代碼表達(dá)：

let data = [];
$.ajax({
    url:blog.csdn.net,
    data:data,
    success:() => {
        console.log('發(fā)送成功!');
    }
})
console.log('代碼執(zhí)行結(jié)束');

上面是一段簡(jiǎn)易的ajax請(qǐng)求代碼：

• ajax進(jìn)入Event Table，注冊(cè)回調(diào)函數(shù)success。
• 執(zhí)行console.log('代碼執(zhí)行結(jié)束')。
• ajax事件完成，回調(diào)函數(shù)success進(jìn)入Event Queue。
• 主線程從Event Queue讀取回調(diào)函數(shù)success并執(zhí)行。

相信通過(guò)上面的文字和代碼，你已經(jīng)對(duì)js的執(zhí)行順序有了初步了解。然而這也是為什么會(huì)有小伙伴回答2，4，1，3的原因。

然而實(shí)際上，異步隊(duì)列里是還有門(mén)道的，我們那道面試題，setTimeout和promise的.then()都在異步隊(duì)列了！接下來(lái)，講講那些門(mén)道(宏任務(wù)和微任務(wù))。

3、宏任務(wù)和微任務(wù)

每個(gè)人的理解方式不同，因?yàn)楹耆蝿?wù)和微任務(wù)并不是標(biāo)準(zhǔn)，但執(zhí)行的順序在js中是大一統(tǒng)了的。

宏任務(wù)：

微任務(wù)：

宏任務(wù)包括：<script>整體代碼、setTimeout、setInterval、setImmediate、Ajax、DOM事件
微任務(wù)：process.nextTick、MutationObserver、Promise.then catch finally

process.nextTick差異太大，不同的node執(zhí)行不統(tǒng)一，不做標(biāo)準(zhǔn)
微任務(wù)比宏任務(wù)的執(zhí)行時(shí)間要早

Tip:有些人喜歡將<script>整體代碼放在宏任務(wù)里，但我個(gè)人不喜歡，在我這里它只是第一執(zhí)行的主線程，我個(gè)人是將宏任務(wù)和微任務(wù)都?xì)w類到異步任務(wù)里！

我們?cè)賮?lái)看看那道面試題：

//回調(diào)才是異步任務(wù)
setTimeout(function(){//宏任務(wù)
  console.log('1')
});
 
new Promise(function(resolve){
  console.log('2');//同步主線程
     resolve();
}).then(function(){//微任務(wù)
 console.log('3')
});
 
console.log('4')//同步主線程

2：同步中的第一個(gè)，故第一

4：同步中的第二個(gè)，故第二

3：異步中的微任務(wù)，故第三

1：異步中的宏任務(wù)，故第二

因此：2，4，3，1的結(jié)果就出來(lái)了！

除此我們來(lái)拓展一下：

setTimeout(() => {//宏任務(wù)隊(duì)列1
  console.log('1');//宏任務(wù)隊(duì)1的任務(wù)1

  setTimeout(() => {//宏任務(wù)隊(duì)列3(宏任務(wù)隊(duì)列1中的宏任務(wù))
    console.log('2')
  }, 0)

  new Promise(resolve => {
    resolve()
    console.log('3')//宏任務(wù)隊(duì)列1的任務(wù)2
  }).then(() => {//宏任務(wù)隊(duì)列1中的微任務(wù)
    console.log('4')
  })

}, 0)
 
setTimeout(() => {//宏任務(wù)隊(duì)列2
  console.log('5')
}, 0)

console.log('6')//同步主線程

執(zhí)行整體代碼（宏任務(wù)）console.log('6') >> 宏任務(wù)隊(duì)列1、宏任務(wù)隊(duì)列2位異步（依次執(zhí)行）

宏任務(wù)隊(duì)列1：=>

        console.log('1')

        console.log('3')

        console.log('4')//宏任務(wù)中的微任務(wù)

        剩下的不會(huì)先執(zhí)行，因?yàn)槭呛耆蝿?wù)中的宏任務(wù)（console.log(2)) ，要被繼續(xù)丟進(jìn)任務(wù)隊(duì)列后  

宏任務(wù)隊(duì)列2：=>

         console.log('5')

宏任務(wù)隊(duì)列1中的宏任務(wù)3：=>

        console.log('2')

 以上代碼會(huì)怎么輸出呢？

4、拓展宏任務(wù)微任務(wù)

上面出了復(fù)雜的題，小伙伴們不妨可以想一想，這種復(fù)雜情況，一個(gè)套一個(gè)的該怎么執(zhí)行呢？

• 6：第一個(gè)同步主線程，故第一
  

script整體代碼里沒(méi)有微任務(wù)故直接執(zhí)行宏任務(wù)=>

宏任務(wù)隊(duì)列：

 宏任務(wù)隊(duì)列1

• 任務(wù)1：console.log(1)
• 任務(wù)2：console.log(3)
• 宏任務(wù)隊(duì)列1中的微任務(wù)：console.log(4)
• 宏任務(wù)隊(duì)列3：因他是宏任務(wù)隊(duì)列1中的宏任務(wù)，所以被丟進(jìn)了任務(wù)隊(duì)列最后，我們先看宏任務(wù)隊(duì)列1同級(jí)的是否還有宏任務(wù)，有就先執(zhí)行同級(jí)的，沒(méi)有才可以執(zhí)行宏任務(wù)隊(duì)列3！故最后！

宏任務(wù)隊(duì)列2  

console.log(5)

所以輸出的結(jié)果是什么？是6，1，3，4，5，2！

經(jīng)過(guò)驗(yàn)證，結(jié)果正確！

到此這篇關(guān)于淺談js中的宏任務(wù)和微任務(wù)的文章就介紹到這了,更多相關(guān)js中的宏任務(wù)和微任務(wù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論