概念
微任务和宏任务是在异步编程中经常使用的概念，用于管理任务的执行顺序和优先级。
- 宏任务：setTimeout, setInterval，I/O 操作和 UI 渲染等。
- 微任务： Promise 回调、async/await等
微任务通常比宏任务具有更高的优先级。
执行情况
- 微任务会在当前宏任务执行完毕后立即执行，而宏任务则需要等待当前宏任务执行完毕后，再从宏任务队列中选择下一个宏任务执行。
- 微任务（Microtask） 总是在所有的 宏任务（Macrotask） 之前执行。
当一个宏任务执行完毕后，JavaScript 引擎会立即检查微任务队列，并执行所有微任务。微任务队列为空后，引擎才会继续执行下一个宏任务。
好处：
保持状态一致性：在执行微任务时，保证了所有相关的异步操作在同一个宏任务执行周期内完成。这有助于在执行下一个宏任务之前，确保应用状态的一致性和数据的完整性。
具体执行顺序
- 当执行脚本开始时，会先执行一个宏任务（通常是脚本本身）。
- 执行完当前宏任务后，检查微任务队列。
- 如果微任务队列不为空，则按照先进先出的顺序依次执行所有微任务，直到微任务队列为空。这意味着微任务会在下一个宏任务之前执行。
- 当前宏任务执行完毕后，浏览器会渲染页面更新UI。
- 检查是否有新的宏任务进入事件队列。如果有，则选择最早进入队列的宏任务，并执行它。如果队列为空，则继续等待新的宏任务进入队列。
重复步骤2-5，循环执行宏任务和微任务。
面试题
题目1
console.log('1');
setTimeout(function() {
console.log('2');
}, 0);
Promise.resolve().then(function() {
console.log('3');
});
console.log('4');
输出：1 4 3 2
首先打印了数字1和4，这是因为它们是同步任务。然后，微任务Promise的回调函数被添加到微任务队列中。接下来，通过setTimeout函数创建的定时器被添加到宏任务队列中。当JavaScript引擎处于空闲状态时，它会先执行微任务队列中的任务，然后再执行宏任务队列中的任务。
所以，数字3首先被打印，这是因为微任务具有更高的优先级，它会在当前任务完成后立即执行。然后，数字2被打印，这是因为宏任务需要等待一段时间，直到JavaScript引擎空闲时才会执行。
题目2
console.log('script start');
setTimeout(() => {
console.log('setTimeout'); // 宏任务
}, 0);
Promise.resolve().then(() => {
console.log('promise1'); // 微任务
}).then(() => {
console.log('promise2'); // 微任务
});
console.log('script end');
题目3
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start");
async1();
console.log("script end");
// 输出顺序：
// script start
// async1 start
// async2
// script end !!
// async1 end !! 容易错
await async()后面的代码相当于是在.then里面执行的，所以会先执行 script end
题目4
console.log("Start");
new Promise((resolve) => {
console.log("Inside Promise");
resolve();
}).then(() => {
console.log("Promise then");
});
console.log("End");
Promise 的回调（即 .then、.catch、.finally 里的函数）会被添加到微任务队列中,注意不是Promise的参数
题目5
console.log('Start');
async function asyncFunc() {
console.log('Inside async function');
await new Promise((resolve) => {
console.log('Inside Promise');
resolve();
});
console.log('After await');
}
asyncFunc();
console.log('End');
题目6
console.log("Start");
async function asyncFunc() {
console.log("Inside async function");
await new Promise((resolve) => {
console.log("Inside Promise");
resolve();
}).then((res) => {
console.log("then");// 注意这里
});
console.log("After await");
}
asyncFunc();
console.log("End");
题目7
初创外企的面试题
const printing = () => {
console.log('A');
setTimeout(() => { console.log('B'); }, 1000);
setTimeout(() => { console.log('C'); }, 0);
console.log('D');
console.log('E');
}
printing();
A D E C B
题目8
console.log(1); //
setTimeout(() => {
console.log(2); //
});
const p1 = new Promise((reslove) => {
console.log(3); //
reslove();
});
p1.then(() => {
console.log(4); //
});
console.log(5); //
const p2 = new Promise((reslove) => {
console.log(6); //
reslove();
});
p2.then(() => {
console.log(7); //
});
// 1 3 5 6 4 7 2
注意setTime是宏任务，所以排到后面了
题目9
function testAsy(x) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(x);
}, 3000);
});
}
async function testAwt() {
let result = await testAsy("hello world");
console.log(result); // 3秒钟之后出现hello world
console.log("cuger"); // 3秒钟之后出现cug
}
testAwt();
console.log("cug"); //立即输出cug
题目10
console.log("script start");
let promise1 = new Promise(function (resolve) {
console.log("promise1");
resolve("resolve!"); // 注意这里
console.log("promise1 end");
}).then(function (res) {
console.log("promise2");
console.log(res); // 注意这里
});
setTimeout(function () {
console.log("settimeout");
});
console.log("script end");
题目11
console.log("start");
setTimeout(() => {
console.log("1");
new Promise((resolve) => {
console.log("2");
resolve();
}).then(() => {
console.log("3");
});
new Promise((ressolve, reject) => {
console.log("middle");
reject();
})
.then(() => {
console.log(4); // 注意这里！！
})
.catch(() => {
console.log("5");
setTimeout(() => {
console.log("6");
});
});
});
console.log("end");
