事件循环上下文中微任务和宏任务的区别

事件循环的一次循环将从macrotask队列处理一个任务(此队列在WHATWG规范中简单地称为任务队列)。 在这个宏任务完成后，所有可用的microtasks将被处理，即在同一个循环周期内。当这些微任务被处理时，它们可以排队更多的微任务，这些微任务将一个接一个地运行，直到微任务队列耗尽

这样做的实际后果是什么?

如果microtask递归地排队其他微任务，它可能需要很长时间才能处理下一个宏任务。这意味着，您最终可能会遇到阻塞的UI，或者应用程序中一些已完成的I/O处于空闲状态。

但是，至少对于Node.js的进程。nextTick函数(排队microtasks)，通过process.maxTickDepth有一个内置的保护来防止这种阻塞。此值被设置为默认值1000，在达到此限制后减少对microtasks的进一步处理，从而允许处理下一个macrotask)

那么什么时候用什么呢?

基本上，当你需要以同步方式异步地做事情时(即当你说在最近的将来执行这个(微)任务时)，使用microtasks。 否则，坚持macrotasks。

例子

< p > macrotasks: setTimeout、setInterval setImmediate, requestAnimationFrame I / O, UI呈现< br > 微任务: process.nextTick， 承诺， queueMicrotask， MutationObserver

规范中的基本概念:

• 一个事件循环有一个或多个任务队列。(任务队列为宏任务队列)
• 每个事件循环都有一个微任务队列。
• 任务队列=宏任务队列!=微任务队列
• 一个任务可以被推入宏任务队列，也可以被推入微任务队列
• 当一个任务被推入队列(微观/宏观)时，我们意味着准备工作已经完成，所以任务现在可以执行了。

事件循环过程模型如下:

当调用堆栈为空时，执行步骤-

1. 选择任务队列中最老的任务(任务A)
2. 如果任务A为空(意味着任务队列为空)，则跳转到步骤6
3. 将“当前正在运行的任务”设置为“任务A”
4. 运行“任务A”(意味着运行回调函数)
5. 将“当前运行的任务”设为空，删除“任务A”
6. 执行微任务队列
   • (a).选择微任务队列中最老的任务(任务x)
   • (b)如果任务x为空(意味着微任务队列为空)，跳转到步骤(g)
   • (c).将“当前运行的任务”设置为“任务x”
   • (d).运行“任务x”
   • (e).将“当前运行的任务”设为空，删除“任务x”
   • (f).选择微任务队列中最老的任务，跳转到步骤(b)
   • (g).完成微任务队列;
   李< / ul > < / >
   • 跳转到步骤1。

简化后的过程模型如下:

1. 运行宏任务队列中最老的任务，然后删除它。
2. 运行微任务队列中所有可用的任务，然后删除它们。
3. 下一轮:在宏任务队列中运行下一个任务(跳过步骤2)

需要记住的事情:

1. 当一个任务(在宏任务队列中)正在运行时，可能会注册新的事件。因此可能会创建新的任务。下面是两个新创建的任务:
   • promise .then()的回调是一个任务
     • 在当前的事件循环中，任务将被推入微任务队列。
     • 在事件循环的下一轮(可能是下一轮)，任务将被推入微任务队列。
     李< / ul > < / >
     • setTimeout(callback,n)的回调是一个任务，将被推入宏任务队列，即使n为0;
     李< / ul > < / >
     • 微任务队列中的任务将在当前一轮运行，而宏任务队列中的任务将等待下一轮事件循环。
     • 我们都知道callback的"click"，"scroll"，"ajax"，"setTimeout"…是任务，但是我们也应该记住js代码作为一个整体在脚本标签是一个任务(一个宏任务)太。

我认为我们不能从堆栈中分离出来讨论事件循环，所以:

JS有三个“堆栈”:

• 所有同步调用的标准堆栈(一个函数调用另一个函数，等等)
• (过程。nextTick，承诺，对象。观察,MutationObserver)用于所有具有更高优先级的异步操作的微任务队列(或作业队列或微任务堆栈)
• (setTimeout, setInterval, setimmediation, requestAnimationFrame, I/O, UI渲染)用于所有低优先级的异步操作的宏任务队列(或事件队列，任务队列，宏任务队列)

|=======|
| macro |
| [...] |
|       |
|=======|
| micro |
| [...] |
|       |
|=======|
| stack |
| [...] |
|       |
|=======|

事件循环是这样工作的:

• 执行栈中从下到上的所有操作，并且只有当栈为空时，才检查上面的队列中发生了什么
• 检查微堆栈并在堆栈的帮助下执行那里的所有内容(如果需要)，一个微任务接一个微任务，直到微任务队列为空或不需要任何执行，然后才检查宏堆栈
• 检查宏堆栈并在堆栈的帮助下执行其中的所有内容(如果需要)

如果栈不为空，微栈将不会被触动。如果微堆栈不为空或不需要任何执行，宏堆栈将不会被触及。

综上所述:微任务队列与宏任务队列几乎相同，但这些任务(过程。nextTick，承诺，对象。观察,MutationObserver)的优先级高于宏任务。

微观就像宏观，但优先级更高。

这里有“ultimate"理解一切的代码。

console.log('stack [1]');
setTimeout(() => console.log("macro [2]"), 0);
setTimeout(() => console.log("macro [3]"), 1);


const p = Promise.resolve();
for(let i = 0; i < 3; i++) p.then(() => {
setTimeout(() => {
console.log('stack [4]')
setTimeout(() => console.log("macro [5]"), 0);
p.then(() => console.log('micro [6]'));
}, 0);
console.log("stack [7]");
});


console.log("macro [8]");






/ *结果:
堆栈[1]
宏[8]


堆叠[7]，堆叠[7]，堆叠[7]


宏[2]
宏[3]


堆栈[4]
微[6]
堆栈[4]
微[6]
堆栈[4]
微[6]


宏[5]宏[5]宏[5]
--------------------
但在节点在版本<11(旧版本)你会得到一些不同的东西




堆栈[1]
宏[8]


堆叠[7]，堆叠[7]，堆叠[7]


宏[2]
宏[3]


堆叠[4]，堆叠[4]，堆叠[4]
微[6]微[6]微[6]


宏[5]宏[5]宏[5]


更多信息:https://blog.insiderattack.net/new-changes-to-timers-and-microtasks-from-node-v11-0-0-and-above-68d112743eb3
* /
< /代码> < / >之前