宏任务&微任务【前端基础】-CSDN博客

本文链接：https://blog.csdn.net/2401_86373285/article/details/148172410

一、JavaScript 中的宏任务与微任务

1. 事件循环机制

JavaScript 是单线程语言，通过事件循环处理异步任务。其核心规则是：

执行顺序：同步代码 → 微任务 → 渲染（如需要）→ 宏任务 → 循环。

微任务优先级：每个宏任务执行后，必须清空所有微任务队列，再执行下一个宏任务。

2. 宏任务与微任务分类

宏任务：setTimeout、setInterval、I/O、UI渲染、script标签整体代码。

微任务：Promise.then/catch/finally、MutationObserver、queueMicrotask。

3. 执行示例

console.log('Script start'); // 同步
setTimeout(() => console.log('setTimeout'), 0); // 宏任务
Promise.resolve().then(() => console.log('Promise')); // 微任务
console.log('Script end'); // 同步


// 输出顺序：
// Script start → Script end → Promise → setTimeout

JavaScript

解析：

同步代码先执行。
Promise微任务在同步代码后立即执行。
setTimeout宏任务在微任务队列清空后执行。

二、Node.js 中的宏任务与微任务

1. 事件循环差异

Node.js 的事件循环分为多个阶段：

Timers：处理 setTimeout、setInterval。
I/O Callbacks：执行系统操作回调。
Poll：等待新I/O事件。
Check：执行 setImmediate。
Close：处理关闭事件（如 socket.on('close')）。

2. 微任务优先级

process.nextTick：优先级最高，在事件循环各阶段切换前执行。

Promise.then：次优先级，在 process.nextTick 之后执行。

3. 执行示例

console.log('Start');
setTimeout(() => console.log('setTimeout'), 0);
setImmediate(() => console.log('setImmediate'));
Promise.resolve().then(() => console.log('Promise'));
process.nextTick(() => console.log('nextTick'));


// 输出顺序（可能）：
// Start → nextTick → Promise → setTimeout → setImmediate

JavaScript

解析：

process.nextTick 和 Promise 微任务优先于宏任务。
setTimeout 和 setImmediate 的执行顺序可能不稳定（因事件循环阶段差异）。

三、关键差异与注意事项

1. 执行顺序差异

JavaScript（浏览器） ：微任务在宏任务前执行。

Node.js：process.nextTick 优先级高于 Promise，且 setImmediate 设计为 Check 阶段专用。

2. 常见误区

嵌套任务：微任务中再添加微任务会阻塞事件循环，需避免无限递归。

渲染时机：浏览器中宏任务后可能触发渲染，而 Node.js 无此阶段。

3. 性能优化建议

微任务：适合高频轻量操作（如状态更新）。

宏任务：适合耗时操作（如批量数据处理）。

四、综合对比示例（Node.js）

console.log('Main');
setTimeout(() => {
  console.log('Timeout 1');
  process.nextTick(() => console.log('nextTick in Timeout'));
}, 0);
setImmediate(() => {
  console.log('Immediate 1');
  Promise.resolve().then(() => console.log('Promise in Immediate'));
});
Promise.resolve().then(() => console.log('Promise 1'));
process.nextTick(() => console.log('nextTick 1'));


// 输出顺序：
// Main → nextTick 1 → Promise 1 → Timeout 1 → nextTick in Timeout → Immediate 1 → Promise in Immediate

JavaScript

解析：

process.nextTick 和 Promise 先执行。

setTimeout 回调作为宏任务执行后，其内部的 process.nextTick 仍优先于外层 setImmediate。

总结

JavaScript：微任务优先于宏任务，适合快速响应异步操作。

Node.js：process.nextTick 优先级最高，事件循环阶段划分更复杂，需注意 setImmediate 与 setTimeout 的触发时机差异。合理利用任务类型可优化代码性能，避免阻塞事件循环。

其他补充说明

一、JavaScript 中的事件循环模型增强说明

运行时架构

调用栈（Call Stack） ：同步代码按顺序压入栈中执行，函数调用形成栈帧

堆（Heap） ：存储对象等动态分配的内存区域

队列（Queue） ：包含宏任务队列和微任务队列，采用先进先出原则

事件循环完整流程

执行一个宏任务（通常从任务队列中获取）
执行过程中遇到微任务时，将其加入微任务队列
当前宏任务执行完毕后，立即清空微任务队列
执行渲染操作（浏览器环境下）
从宏任务队列中取下一个任务执行

渲染时机细节

浏览器每16.6ms（约60Hz刷新率）会尝试渲染

渲染前会执行requestAnimationFrame回调（属于宏任务）

微任务执行时机在渲染之前，保证数据更新及时反映到UI

二、Node.js事件循环阶段补充说明

完整阶段序列：

graph LR
A[Timers] --> B[Pending I/O]
B --> C[Idle/Prepare]
C --> D[Poll]
D --> E[Check]
E --> F[Close]
F --> A

Mermaid

阶段详解：

Timers阶段：执行setTimeout/setInterval到期回调

Poll阶段：

计算阻塞时间（基于最快到期定时器）

执行I/O事件回调（文件/网络操作）

队列为空时检查Check阶段是否有setImmediate

Check阶段：专门处理setImmediate回调

特殊API对比：

API	类型	执行阶段	优先级
`process.nextTick`	微任务	阶段切换前立即执行	最高
`Promise.then`	微任务	阶段切换后执行	次于nextTick
`setImmediate`	宏任务	Check阶段	常规宏任务
`setTimeout(0)`	宏任务	Timers阶段	可能晚于setImmediate

三、关键机制差异的深度解析

定时器精度差异

浏览器：setTimeout(0)实际延迟≥4ms（HTML5规范）

Node.js：setTimeout(0)等价于setTimeout(1)，但实际精度依赖系统时钟

任务饥饿问题

// 危险示例：微任务递归导致宏任务饥饿
function microtaskLoop() {
  Promise.resolve().then(() => {
    console.log('Microtask executed');
    microtaskLoop();
  });
}

JavaScript

浏览器：会强制中断无限微任务链（如Chrome的100万次限制）

Node.js：无此保护机制，可能导致事件循环完全阻塞

跨环境行为差异：

requestAnimationFrame：浏览器专用，Node.js无等效API

setImmediate：Node.js特有，浏览器仅IE11支持

MessageChannel：浏览器中可用于创建新宏任务队列

四、性能优化实践建议

任务类型选择原则：

<50ms的任务优先使用微任务

I/O密集型操作使用宏任务分解

动画更新使用requestAnimationFrame

Node.js优化技巧：

// 好的实践：分解CPU密集型任务
function processChunk() {
  // 处理数据块
  if (hasMoreWork) {
    setImmediate(processChunk); // 而非同步递归
  }
}

JavaScript

浏览器内存管理：

及时移除事件监听器

避免在微任务中创建大型对象

使用WeakMap管理DOM引用

五、现代API的整合

异步迭代器：

async function processStream() {
  for await (const chunk of stream) {
    // 处理数据块
  }
}

JavaScript

Web Workers集成：

// 主线程
const worker = new Worker('task.js');
worker.postMessage(data);


// Worker线程
self.onmessage = ({data}) => {
  const result = heavyCalculation(data);
  self.postMessage(result);
}

JavaScript

AbortController：

const controller = new AbortController();
fetch(url, { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    }
  });
// 取消请求
controller.abort();

JavaScript