1.理解概念:
執(zhí)行順序: "主線任務(wù) -> a微任務(wù) -> b宏任務(wù) "的規(guī)則辩蛋。在執(zhí)行過(guò)程中技健,微任務(wù)的優(yōu)先級(jí)高于宏任務(wù) 注意如果產(chǎn)生嵌套時(shí):則生成第二套微任務(wù)骄呼、宏任務(wù)菇夸,保證第一套微任務(wù)宏任務(wù)執(zhí)行完才執(zhí)行第二套
常見的微任務(wù):
Promises: 使用 Promise.resolve()琼富、Promise.reject()、new Promise() 等方式創(chuàng)建的 Promise 對(duì)象庄新。
Mutation Observer: 監(jiān)聽 DOM 的變化并在變化發(fā)生時(shí)執(zhí)行的微任務(wù)鞠眉。
process.nextTick: 用于在 Node.js 中添加微任務(wù)的方法。
queueMicrotask: 用于在現(xiàn)代瀏覽器中添加微任務(wù)的方法择诈。
async await
常見的宏任務(wù):
setTimeout 和 setInterval: 設(shè)置定時(shí)器的方法械蹋。
I/O 操作: 包括網(wǎng)絡(luò)請(qǐng)求、文件讀寫等涉及到輸入輸出的任務(wù)羞芍。
UI 渲染: 瀏覽器渲染頁(yè)面的任務(wù)哗戈,如繪制、布局等荷科。
requestAnimationFrame: 用于在瀏覽器重繪之前執(zhí)行的任務(wù)唯咬。
2.理解 async await
async 定義一個(gè)函數(shù)A,A內(nèi)部執(zhí)行 await B();其中await會(huì)暫停A當(dāng)中 await B()畏浆;的后續(xù)內(nèi)容副渴,等待B()才將await B()后續(xù)內(nèi)容加入微任務(wù)隊(duì)列。
3.promise的 then() 是同步任務(wù)
4.實(shí)例
定義方法:
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
執(zhí)行:
setTimeout(function() {
console.log('settimeout');
});
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
})
分析:沿著主線任務(wù)執(zhí)行分別如下:
第一輪主線任務(wù):
setTimeout——宏任務(wù)全度,加入宏任務(wù)隊(duì)列,
setTimeout—— 先執(zhí)行console.log('async1 start'), 遇到同步任務(wù) await async2(); async2() 加入微任務(wù)隊(duì)列斥滤; 后續(xù)代碼得等到 async2() 執(zhí)行完才加入微任務(wù)隊(duì)列;
繼續(xù)主線将鸵,Promise加入微任務(wù)隊(duì)列
微任務(wù)的隊(duì)列:先執(zhí)行 async2() {console.log('async2');}勉盅,完成后將console.log('async1 end');加入微任務(wù)隊(duì)列,注意這里第一輪時(shí)promise先加入微任務(wù)隊(duì)列的顶掉,先執(zhí)行promise代碼草娜,后執(zhí)行 console.log('async1 end');
最后執(zhí)行宏任務(wù),
結(jié)果:
async1 start
async2
promise1
promise2
async1 end
settimeout