個人中心
退出
Event Loop我知道，宏任務微任務是什么鬼？
在介紹宏任務和微任務之前，先拋出一個問題。相信大家在面試的時候，會遇到這樣的相似的問題：
setTimeout(function(){
console.log('1')
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3')
});
console.log('4');
請說出控制臺打印的數(shù)據(jù)，很多小伙伴經(jīng)過深思熟慮之后，會自信的說出答案：2、4、1、3。
但是說出答案之后往往會發(fā)現(xiàn)面試官并沒有出現(xiàn)很滿意的表情。這是為什么呢？接下來讓我們一步一步的探討面試官不滿意的原因。
JavaScript事件循環(huán)機制
首先還是說說JavaScript的事件循環(huán)機制，大家都知道，js的執(zhí)行任務分為同步任務和異步任務，那么他們的執(zhí)行情況是怎么樣的尼？執(zhí)行的時候，會優(yōu)先執(zhí)行同步任務，當執(zhí)行中遇到了異步任務，會暫時將異步任務扔到異步隊列中，繼續(xù)執(zhí)行后面的同步任務。當所有的同步任務執(zhí)行完成之后，再執(zhí)行剛才扔在異步隊列中的任務。一直循環(huán)執(zhí)行，也就形成了我們JavaScript的Event Loop機制。
可能純文字的介紹大家看得有點繞，下面引入一張圖片來幫助大家理解JavaScript事件循環(huán)機制：
在這里插入圖片描述
看完這個圖，各位小伙伴可能會覺得，我上面的答案沒有問題呀，是正確的呀！但是事情并不是那么的簡單，接下來引入兩個新概念：宏任務（macrotask）和微任務（microtask）
宏任務（macrotask）和微任務（microtask）
宏任務和微任務表示的是異步任務的兩種分類。在瀏覽器js引擎加載js代碼的時候，會將所有的代碼以任務的形式分別分配到這兩個分類的隊列中。然后首先會從宏任務的任務隊列中中取出一條任務執(zhí)行；當執(zhí)行完畢之后再將微任務隊列里面的所有的任務按照順序執(zhí)行；當所有的微任務隊列任務執(zhí)行完畢之后，再去宏任務隊列中取出一條任務執(zhí)行。
宏任務主要有：整體script代碼、setTimeout、setInterval、I/O、requestAnimationFrame
微任務主要有：Promise、process.nextTick、MutationObserver
那么宏任務和微任務到底是什么關系呢？接下來，奉上一張寶圖，描述兩者的關系：
在這里插入圖片描述
歡迎關注微信公眾號:猴哥說前端
分類導航