JS宏任务 & 微任务 API 速查表

宏任务 & 微任务 API 速查表

微任务（Microtask）API

浏览器 & Node.js 通用

// 1. Promise（最常用）
Promise.resolve().then(() => { /* 微任务 */ })
Promise.reject().catch(() => { /* 微任务 */ })
Promise.all([]).then(() => { /* 微任务 */ })

// 2. async/await（Promise语法糖）
async function demo() {
  await Promise.resolve() // await后面的代码在微任务执行
  /* 微任务代码 */
}

// 3. queueMicrotask（现代API）
queueMicrotask(() => { /* 微任务 */ })

Node.js 特有（比微任务优先级更高）

// 4. process.nextTick（Node.js专有）
process.nextTick(() => { /* 下一个tick执行 */ })

浏览器传统方式

// 5. MutationObserver（兼容性方案）
const observer = new MutationObserver(() => { /* 微任务 */ })
observer.observe(element, { attributes: true })
element.setAttribute('data-trigger', '')

🟡 宏任务（Macrotask/Task）API

定时器相关

// 1. setTimeout
setTimeout(() => { /* 宏任务 */ }, delay)

// 2. setInterval
setInterval(() => { /* 周期性宏任务 */ }, interval)

// 3. setImmediate（Node.js特有）
setImmediate(() => { /* Node.js宏任务 */ })

I/O 操作

// 4. 各种I/O回调（Node.js）
fs.readFile('file', (err, data) => { /* I/O宏任务 */ })
http.get('url', (res) => { /* 网络宏任务 */ })

// 5. 浏览器I/O
fetch('url').then(res => { /* 网络请求 */ })

UI & 事件相关

// 6. DOM事件
element.addEventListener('click', () => { /* 事件宏任务 */ })
element.click() // 触发事件回调（宏任务）

// 7. requestAnimationFrame（渲染相关）
requestAnimationFrame(() => { /* 下一帧前执行 */ })

// 8. requestIdleCallback（空闲时执行）
requestIdleCallback(() => { /* 空闲时执行 */ })

通信相关

// 9. MessageChannel
const channel = new MessageChannel()
channel.port1.onmessage = () => { /* 宏任务 */ }
channel.port2.postMessage('data')

// 10. postMessage
window.addEventListener('message', () => { /* 宏任务 */ })
window.postMessage('data', '*')

其他

// 11. 解析/加载回调
<script src="file" onload="/* 宏任务 */"></script>
<img onload="/* 宏任务 */">

// 12. Web Workers
worker.postMessage('data')
worker.onmessage = () => { /* 宏任务 */ }

🔄 执行顺序层级

Node.js 优先级

1. 同步代码
2. process.nextTick
3. 微任务（Promise、queueMicrotask）
4. 宏任务：
   - timers阶段（setTimeout、setInterval）
   - pending callbacks（I/O回调）
   - idle/prepare（内部）
   - poll（轮询I/O）
   - check阶段（setImmediate）
   - close callbacks（关闭回调）

浏览器优先级

1. 同步代码
2. 微任务队列（清空所有微任务）
3. 渲染（requestAnimationFrame、布局、绘制）
4. 宏任务队列（取一个执行）
5. 重复2-4

🎯 快速选择指南

需要立即/尽快执行

// 微任务（优先级高）
queueMicrotask(() => {})      // 推荐
Promise.resolve().then(() => {})  // 传统
process.nextTick(() => {})    // Node.js最快

需要让出控制权（不阻塞UI）

// 宏任务（给浏览器渲染机会）
setTimeout(() => {}, 0)           // 通用
requestAnimationFrame(() => {})   // 动画相关
MessageChannel                   // 高优先级宏任务

Node.js 环境

// I/O完成后执行
setImmediate(() => {})       // check阶段
fs.readFile(callback)        // I/O回调

// 立即下一轮
process.nextTick(() => {})   // 最快

浏览器特定

// 与渲染帧同步
requestAnimationFrame(() => {})   // 动画优化

// 空闲时执行
requestIdleCallback(() => {})     // 后台任务

// 跨上下文通信
postMessage()                     // 页面/Worker通信

📝 一句话总结

API	类型	特点
Promise.then()	微任务	最常用，立即执行
queueMicrotask()	微任务	现代API，推荐使用
setTimeout(0)	宏任务	最小延迟，让出控制权
setImmediate()	宏任务	Node.js特有，I/O后执行
requestAnimationFrame()	伪宏任务	下一帧前，适合动画
MessageChannel	宏任务	高优先级，比setTimeout快
process.nextTick()	Node.js特快	比微任务还快

记住核心原则：

	微任务：当前任务结束后立即执行
	
	宏任务：等到下一次事件循环执行