宏任务与微任务：JavaScript 异步执行的幕后功臣

宏任务与微任务：JavaScript 执行机制中的异步交响曲

在 JavaScript 的世界里，程序执行并不是一个线性的过程，而是一个充满异步和事件驱动的复杂交响曲。理解宏任务和微任务的概念对于掌握这种复杂性至关重要。

宏任务：舞台上的主要表演者

宏任务是 JavaScript 执行队列中的主要参与者。它们是一些大型、耗时的操作，例如：

• DOM 操作（例如，创建、修改或删除元素）
• 计时器（例如， setTimeout 和 setInterval）
• 用户交互事件（例如，单击、鼠标移动）

这些任务都被添加到主线程上的事件队列中，并按顺序执行。一旦一个宏任务开始执行，它将一直运行，直到完成或浏览器停止运行。

微任务：幕后英雄

微任务是在宏任务执行期间执行的更小的异步任务。它们包括：

• Promise 解析
• 突变观察器回调
• 事件队列的 check 阶段

微任务的执行顺序由以下规则决定：

• 在宏任务执行期间，所有微任务都会被收集到一个队列中。
• 当宏任务完成时，将执行所有收集到的微任务。
• 在一个宏任务的执行过程中，可以添加新的微任务。

异步协奏曲

宏任务和微任务的交互创造了一种独特的异步执行模式。

1. 宏任务被添加到事件队列并按顺序执行。
2. 在宏任务执行期间，微任务被添加到队列中。
3. 当宏任务完成时，所有微任务在执行宏任务之前执行。
4. 这个过程重复进行，直到所有宏任务和微任务都完成。

理解异步模式的好处

了解宏任务和微任务的异步模式具有以下好处：

• 更好的代码组织： 您可以通过将不同的任务分配给宏任务和微任务来组织代码。
• 提高响应能力： 微任务可以在宏任务执行期间执行，从而使页面保持响应状态。
• 避免阻塞： 宏任务可能会阻塞主线程，但微任务可以异步执行，避免阻塞。

示例

考虑以下代码示例：

console.log('宏任务 1 开始');

setTimeout(() => {
  console.log('宏任务 2');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务');
});

console.log('宏任务 1 结束');

输出将为：

宏任务 1 开始
微任务
宏任务 1 结束
宏任务 2

结论

宏任务和微任务是 JavaScript 执行机制中至关重要的概念。理解它们之间的区别对于编写高效、响应迅速的代码至关重要。通过明智地使用这些异步模式，您可以充分利用 JavaScript 的能力，创建出色的用户体验。