JavaScript宏任務和微任務區(qū)別介紹

更新時間：2022年07月15日 09:48:45 作者：??桃子蘸醬?

這篇文章主要介紹了JavaScript宏任務和微任務區(qū)別介紹，js中的任務，大致分為2類，一類是同步任務，另一類是異步任務。而異步任務，又分為宏任務和微任務，這兩個任務是兩個隊列，所以是先進先出的

分類

js中的任務，大致分為2類，一類是同步任務，另一類是異步任務。而異步任務，又分為宏任務和微任務，這兩個任務是兩個隊列，所以是先進先出的。

同步任務指的是，在主線程上排隊執(zhí)行的任務，只有前一個任務執(zhí)行完畢，才能執(zhí)行后一個任務。

異步任務指的是，不進入主線程、而進入"任務隊列"的任務，只有等主線程任務執(zhí)行完畢，"任務隊列"開始通知主線程，請求執(zhí)行任務，該任務才會進入主線程執(zhí)行

宏任務

主代碼塊、setTimeout、setInterval等

有些地方會列出來UI Rendering，說這個也是宏任務，可是在讀了HTML規(guī)范文檔以后，發(fā)現(xiàn)這很顯然是和微任務平行的一個操作步驟

requestAnimationFrame姑且也算是宏任務吧，requestAnimationFrame，下次頁面重繪前所執(zhí)行的操作，而重繪也是作為宏任務的一個步驟來存在的，且該步驟晚于微任務的執(zhí)行

宏任務是主流，當js開始被執(zhí)行的時候，就是開啟一個宏任務，在宏任務中執(zhí)行一條一條的指令

宏任務可以同時有多個，但會按順序一個一個執(zhí)行；

每一個宏任務，后面都可以跟一個微任務隊列，如果微任務隊列中有指令或方法，那么就會執(zhí)行；如果沒有，則開始執(zhí)行下一個宏任務，直到所有的宏任務執(zhí)行完為止。

微任務

Promise、async/await等

需要注意的是，promise里的then才會被加入微任務，它的resolve是同步里的

async函數(shù)里遇到await之前的代碼是同步里的，遇到await時，會執(zhí)行await后面的函數(shù)，然后返回一個promise，把await下面的代碼放入微任務，并且退出這個async函數(shù)。

為什么

為什么有了宏任務，還會有微任務存在？

因為宏任務太占用性能，當需要一些較早就準備好的方法，排在最后才執(zhí)行的時候，又不想新增一個宏任務，那么就可以把這些方法，一個一個的放在微任務隊列里面，在這個宏任務中的代碼執(zhí)行完后，就會執(zhí)行微任務隊列。

案例

console.log('整體script開始。');

setTimeout(()=>{
    console.log('宏任務setTimeout的回調(diào)函數(shù)。')
})

Promise.resolve().then(function() {
    console.log('微任務Promise回調(diào)函數(shù)1。')
}).then(function() {
    console.log('微任務Promise回調(diào)函數(shù)2。')
})
console.log('整體script結(jié)束。')

結(jié)果：