宏任务和微任务
除了本章中所讲的 宏任务（macrotask） 外，还有在 微任务（Microtask） 一章中提到的 微任务（microtask） 。
微任务仅来自于我们的代码。它们通常是由 promise 创建的：对 .then/catch/finally 处理程序的执行会成为微任务。微任务也被用于 await 的“幕后”，因为它是 promise 处理的另一种形式。
还有一个特殊的函数 queueMicrotask(func)，它对 func 进行排队，以在微任务队列中执行。
每个宏任务之后，引擎会立即执行微任务队列中的所有任务，然后再执行其他的宏任务，或渲染，或进行其他任何操作。
例如，看看下面这个示例：
setTimeout(() => alert("timeout"));
Promise.resolve()
.then(() => alert("promise"));
alert("code");
这里的执行顺序是怎样的？
code首先显示，因为它是常规的同步调用。promise第二个出现，因为then会通过微任务队列，并在当前代码之后执行。timeout最后显示，因为它是一个宏任务。
更详细的事件循环图示如下（顺序是从上到下，即：首先是脚本，然后是微任务，渲染等）：
微任务会在执行任何其他事件处理，或渲染，或执行任何其他宏任务之前完成。
这很重要，因为它确保了微任务之间的应用程序环境基本相同（没有鼠标坐标更改，没有新的网络数据等）。
如果我们想要异步执行（在当前代码之后）一个函数，但是要在更改被渲染或新事件被处理之前执行，那么我们可以使用 queueMicrotask 来对其进行安排（schedule）。
这是一个与前面那个例子类似的，带有“计数进度条”的示例，但是它使用了 queueMicrotask 而不是 setTimeout。你可以看到它在最后才渲染。就像写的是同步代码一样：
<div id="progress"></div>
<script>
let i = 0;
function count() {
// 做繁重的任务的一部分 (*)
do {
i++;
progress.innerHTML = i;
} while (i % 1e3 != 0);
if (i < 1e6) {
queueMicrotask(count);
}
}
count();
</script>
总结
更详细的事件循环算法（尽管与规范) 相比仍然是简化过的）：
-
从 宏任务 队列（例如 “script”）中出队（dequeue）并执行最早的任务。
-
执行所有 微任务：
-
当微任务队列非空时：
- 出队（dequeue）并执行最早的微任务。
-
-
如果有变更，则将变更渲染出来。
-
如果宏任务队列为空，则休眠直到出现宏任务。
-
转到步骤 1。
安排（schedule）一个新的 宏任务：
- 使用零延迟的
setTimeout(f)。
它可被用于将繁重的计算任务拆分成多个部分，以使浏览器能够对用户事件作出反应，并在任务的各部分之间显示任务进度。
此外，也被用于在事件处理程序中，将一个行为（action）安排（schedule）在事件被完全处理（冒泡完成）后。
安排一个新的 微任务：
- 使用
queueMicrotask(f)。 - promise 处理程序也会通过微任务队列。
在微任务之间没有 UI 或网络事件的处理：它们一个立即接一个地执行。
所以，我们可以使用 queueMicrotask 来在保持环境状态一致的情况下，异步地执行一个函数。
Web Workers
对于不应该阻塞事件循环的耗时长的繁重计算任务，我们可以使用 Web Workers
这是在另一个并行线程中运行代码的方式。
Web Workers 可以与主线程交换消息，但是它们具有自己的变量和事件循环。
Web Workers 没有访问 DOM 的权限，因此，它们对于同时使用多个 CPU 内核的计算非常有用。
转载详情：
转载网站： Javascript.info
