快捷導(dǎo)航

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

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

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

分類

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

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

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

宏任務(wù)

主代碼塊、setTimeout、setInterval等

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

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

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

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

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

微任務(wù)

Promise、async/await等

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

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

為什么

為什么有了宏任務(wù)，還會有微任務(wù)存在？

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

案例

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

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

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

結(jié)果：