前端面试题——js的宏任务和微任务（包含Demo）

1. JS 执行机制(主线程->微任务->宏任务)

同步任务

从上至下执行

异步任务

1. 宏任务：script(整体代码)、setTimeOut、setInterval、UI交互事件、postMessage、Ajax
2. 微任务：Promise.then catch finally、MutationObserver、process.nextTick(Node.js环境)

2. Demo

demo1

async function Prom() {
  console.log("Y"); //同步任务
  await Promise.resolve();
  console.log("X");
}
//宏任务2
setTimeout(() => {
  console.log(1);
  Promise.resolve().then(() => {
    console.log(2);
  });
}, 0);
setTimeout(() => {
  console.log(3);
  Promise.resolve().then(() => {
    console.log(4);
  });
}, 0);
//微任务
Promise.resolve().then(() => {
  console.log(5);
});
//微任务
Promise.resolve().then(() => {
  console.log(6);
});
//微任务
Promise.resolve().then(() => {
  console.log(7);
});
//微任务
Promise.resolve().then(() => {
  console.log(8);
});
Prom(); //宏任务1
console.log(0); //同步任务
//Y 0 5 6 7 8 X 1 2 3 4

demo2

setTimeout(function(){
    console.log('1')
});
 
new Promise<void>(function(resolve){
    console.log('2');
    resolve();
}).then(function(){
    console.log('3')
});
 
console.log('4');
 
new Promise<void>(function(resolve){
    console.log('5');
    resolve();
}).then(function(){
    console.log('6')
});
 
setTimeout(function(){
    console.log('7')
});
 
function bar(){
    console.log('8')
    foo()
}
 
function foo(){
    console.log('9')
}
 
console.log('10')
bar()
// 2,4,5,10,8,9,3,6,1,7

demo3

setTimeout(() => { 
  console.log(2) //宏任务1
  new Promise(() => {
    console.log(11) //宏任务1
  })
  setTimeout(() => {
    console.log(3) //宏任务4（宏任务+宏任务）
  })
})
nextTick(() => { 
  console.log(4) //微任务1
  setTimeout(() => {
    console.log(5) //宏任务3（微任务+宏任务）
  })
})
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(6) //宏任务2（主线程+宏任务）
  })
  resolve(null)
  console.log(7) //主线程1
}).then(() => { 
  console.log(8) //微任务1
})
// 主线程1->微任务1->微任务1->宏任务1->宏任务1->宏任务2->宏任务3->宏任务4
// 7,8,4,2,11,6,5,3

参考文档

https://blog.csdn.net/qq_38290251/article/details/107518611

https://blog.csdn.net/qq1195566313/article/details/125237755