淺談js中的宏任務和微任務

下面一道關於宏任務和微任務的題:

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

試問一下上面代碼的執行順序是啥?

有小夥伴可能會答:2,4,1,3

估摸著是這麼想的:我難道不知道js是一行一行執行的,setTimeout是異步,所以先放後面;往下走,執行瞭console.log(2) ,.then()是異步的,放在後面;走瞭console.log(4);再去異步隊列裡走,先是console.log(1);再是console.log(3)

我有點慌,於是我粘貼到瀏覽器去瞅兩眼:

無法相信

帶著困惑的我,隻能去好好研究研究JavaScript的運行機制瞭!

1、關於JavaScript

JavaScript是一門單線程語言,即一次隻能完成一個任務,若有多個任務要執行,則必須排隊按照隊列來執行(前一個任務完成,再執行下一個任務)。

2、JavaScript事件循環

既然js是單線程,那就像隻有一個窗口的食堂,學生需要排隊一個一個打飯,同理js任務也要一個一個順序執行。這種模式執行簡單,但隨著日後的需求,事務,請求增多,這種單線程模式執行效率必定低下。隻要有一個任務執行消耗瞭很長時間,在這個時間裡後面的任務無法執行。

常見的有新聞包含的超清圖片加載很慢,難道我們的網頁要一直卡著直到圖片完全顯示出來?為瞭解決這個問題,JavaScript語言將任務執行模式分成同步和異步:

  • 同步模式: 就是上面所說的一種執行模式,後一個任務等待前一個任務結束,然後再執行,程序的執行順序與任務的排列順序是一致的、同步的。
  • 異步模式: 就是每一個任務有一個或多個回調函數(callback),前一個任務結束後,不是執行後一個任務,而是執行回調函數,後一個任務則是不等前一個任務結束就執行,所以程序的執行順序與任務的排列順序是不一致的、異步的。

導圖要表達的內容用文字來表述的話:

  • 同步和異步任務分別進入不同的執行”場所”,同步的進入主線程,異步的進入Event Table並註冊函數。
  • 當指定的事情完成時,Event Table會將這個函數移入Event Queue
  • 主線程內的任務執行完畢為空,會去Event Queue讀取對應的函數,進入主線程執行。
  • 上述過程會不斷重復,也就是常說的Event Loop(事件循環)。

 再配上代碼表達:

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


上面是一段簡易的ajax請求代碼:

  • ajax進入Event Table,註冊回調函數success
  • 執行console.log(‘代碼執行結束’)。
  • ajax事件完成,回調函數success進入Event Queue
  • 主線程從Event Queue讀取回調函數success並執行。

相信通過上面的文字和代碼,你已經對js的執行順序有瞭初步瞭解。然而這也是為什麼會有小夥伴回答2,4,1,3的原因。

然而實際上,異步隊列裡是還有門道的,我們那道面試題,setTimeoutpromise.then()都在異步隊列瞭!接下來,講講那些門道(宏任務和微任務)。

3、宏任務和微任務

每個人的理解方式不同,因為宏任務和微任務並不是標準,但執行的順序在js中是大一統瞭的。

宏任務:

# 瀏覽器 Node
<script>整體代碼
setTimeout
setInterval
setImmediate x
requestAnimationFrame x
Ajax
DOM事件

微任務:

# 瀏覽器 Node
process.nextTick x
MutationObserver x
Promise.then catch finally

宏任務包括:<script>整體代碼、setTimeoutsetIntervalsetImmediateAjax、DOM事件
微任務process.nextTickMutationObserverPromise.then catch finally

process.nextTick差異太大,不同的node執行不統一,不做標準
微任務比宏任務的執行時間要早

Tip:有些人喜歡將<script>整體代碼放在宏任務裡,但我個人不喜歡,在我這裡它隻是第一執行的主線程,我個人是將宏任務和微任務都歸類到異步任務裡!

我們再來看看那道面試題:

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


2:同步中的第一個,故第一

4:同步中的第二個,故第二

3:異步中的微任務,故第三

1:異步中的宏任務,故第二

因此:2,4,3,1的結果就出來瞭!

除此我們來拓展一下:

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

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

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

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

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

執行整體代碼(宏任務)console.log(‘6’) >> 宏任務隊列1、宏任務隊列2位異步(依次執行)

宏任務隊列1:=>

        console.log(‘1’)

        console.log(‘3’)

        console.log(‘4’)//宏任務中的微任務

        剩下的不會先執行,因為是宏任務中的宏任務(console.log(2)) ,要被繼續丟進任務隊列後  

宏任務隊列2:=>

         console.log(‘5’)

宏任務隊列1中的宏任務3:=>

        console.log(‘2’)

 以上代碼會怎麼輸出呢?

4、拓展宏任務微任務

上面出瞭復雜的題,小夥伴們不妨可以想一想,這種復雜情況,一個套一個的該怎麼執行呢?

  • 6:第一個同步主線程,故第一

script整體代碼裡沒有微任務故直接執行宏任務=>

宏任務隊列:

 宏任務隊列1

  • 任務1:console.log(1)
  • 任務2:console.log(3)
  • 宏任務隊列1中的微任務:console.log(4)
  • 宏任務隊列3:因他是宏任務隊列1中的宏任務,所以被丟進瞭任務隊列最後,我們先看宏任務隊列1同級的是否還有宏任務,有就先執行同級的,沒有才可以執行宏任務隊列3!故最後!

宏任務隊列2  

console.log(5)

所以輸出的結果是什麼?是6,1,3,4,5,2!

經過驗證,結果正確!

到此這篇關於淺談js中的宏任務和微任務的文章就介紹到這瞭,更多相關js中的宏任務和微任務內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: