快捷導(dǎo)航

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

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

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

分類

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

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

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

宏任務(wù)

主代碼塊、setTimeout、setInterval等

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

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

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

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

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

微任務(wù)

Promise、async/await等

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

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

為什么

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

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

案例

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

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é)果：