Event Loop我知道，宏任務微任務是什麼鬼？

在介紹宏任務和微任務以前，先拋出一個問題。相信你們在面試的時候，會遇到這樣的類似的問題：

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

請說出控制檯打印的數據，不少小夥伴通過深思熟慮以後，會自信的說出答案：二、四、一、3。

可是說出答案以後每每會發現面試官並無出現很滿意的表情。這是爲何呢？接下來讓咱們一步一步的探討面試官不滿意的緣由。

JavaScript事件循環機制

首先仍是說說JavaScript的事件循環機制，你們都知道，js的執行任務分爲同步任務和異步任務，那麼他們的執行狀況是怎麼樣的尼？執行的時候，會優先執行同步任務，當執行中遇到了異步任務，會暫時將異步任務扔到異步隊列中，繼續執行後面的同步任務。當全部的同步任務執行完成以後，再執行剛纔扔在異步隊列中的任務。一直循環執行，也就造成了咱們JavaScript的Event Loop機制。

可能純文字的介紹你們看得有點繞，下面引入一張圖片來幫助你們理解JavaScript事件循環機制：

看完這個圖，各位小夥伴可能會以爲，我上面的答案沒有問題呀，是正確的呀！可是事情並非那麼的簡單，接下來引入兩個新概念：宏任務（macrotask）和微任務（microtask）

宏任務（macrotask）和微任務（microtask）

宏任務和微任務表示的是異步任務的兩種分類。在瀏覽器js引擎加載js代碼的時候，會將全部的代碼以任務的形式分別分配到這兩個分類的隊列中。而後首先會從宏任務的任務隊列中中取出一條任務執行；當執行完畢以後再將微任務隊列裏面的全部的任務按照順序執行；當全部的微任務隊列任務執行完畢以後，再去宏任務隊列中取出一條任務執行。

宏任務主要有：總體script代碼、setTimeout、setInterval、I/O、requestAnimationFrame 微任務主要有：Promise、process.nextTick、MutationObserver

那麼宏任務和微任務究竟是什麼關係呢？接下來，奉上一張寶圖，描述二者的關係：

相信，看到這裏，你們已經知道上面的問題的答案了吧，沒錯，就是二、四、三、1。

最後，若是你們想和我一塊兒討論探索前端，能夠關注一下個人公衆號，不按期更新干貨，更可加入技術羣交流討論。

本文使用 mdnice 排版