在 javascript 中，微任务和宏任务是事件循环管理的两种类型的异步任务，但它们的处理方式不同。了解它们的工作原理对于预测异步代码的执行顺序至关重要。
1.宏任务队列（任务队列）
- 宏任务被放入自己的队列中，通常称为任务队列或宏任务队列。
- 宏任务的示例包括：settimeout、setinterval、i/o 事件和 dom 事件（如单击和加载）。
- 事件循环会从此队列中获取每个宏任务来执行，但前提是微任务队列中的所有微任务都已处理完毕。
2. 微任务队列
- 微任务有自己的队列，称为微任务队列。
- 微任务的例子包括：promise 的 .then()、mutationobserver。
- 微任务队列的优先级高于宏任务队列。每个宏任务执行后，事件循环将处理该队列中的所有微任务，然后再继续执行下一个宏任务。
事件循环如何处理微任务和宏任务：
- 事件循环开始新的循环。
- 执行调用堆栈中的所有同步代码。
- 当调用堆栈为空时
- 执行微任务队列中的所有微任务。如果一个微任务添加了更多的微任务，它们将在同一个周期内立即执行。
- 移动到宏任务队列中的第一个宏任务并执行它。
- 重复此过程。
示例：
console.log('start');
settimeout(() => {
console.log('macrotask 1');
promise.resolve().then(() => {
console.log('microtask inside macrotask 1');
});
}, 0);
settimeout(() => {
console.log('macrotask 2');
}, 0);
console.log('end');
输出
Start End Microtask 1 Microtask 2 Macrotask 1 Macrotask 2
解释：
- console.log('start'): 立即执行并打印“start”。
- settimeout(..., 0) (macrotask 1): 添加到宏任务队列。
- promise.resolve().then(...)（微任务1）：添加到微任务队列。
- settimeout(..., 0) (宏任务 2)：添加到宏任务队列中。
- promise.resolve().then(...)（微任务 2）：添加到微任务队列。
- console.log('end')：立即执行并打印“end”。
- 微任务：事件循环将在处理任何宏任务之前处理微任务队列中的所有微任务：
- 打印“微任务 1”。
- 打印“微任务 2”。
- 宏任务：
- 执行第一个 settimeout(..., 0)（宏任务 1），打印“macrotask 1”。
- 执行第二个 settimeout(..., 0)（宏任务 2），打印“macrotask 2”。
概括：
- 微任务和宏任务被放入两个独立的队列中：微任务队列和宏任务队列。
- 在事件循环中，微任务队列先于宏任务队列进行处理。
- 在每个宏任务之后，事件循环会处理微任务队列中的所有微任务，然后再移至宏任务队列中的下一个宏任务。
- 这确保了微任务（例如 promise 回调）比宏任务具有更高的优先级并且执行得更快。
