🧠 为什么要区分宏任务(Macro Task)和微任务(Micro Task)?
这是为了更好地控制 JavaScript 的执行顺序和响应性能,尤其是在处理异步代码时:
- 微任务:用于保证某些操作在当前宏任务结束前立即执行(如
Promise.then()
)。 - 宏任务:系统调度的主循环单位(如
setTimeout()
、setInterval()
、事件处理)。
👉 简单说:微任务是“紧急的小事”,宏任务是“下一轮大事”。
📊 执行优先级顺序(事件循环模型)
- 执行一个 宏任务(如主线程代码或
setTimeout
回调) - 执行所有产生的 微任务(如
Promise.then()
、queueMicrotask()
) - 渲染更新(如 DOM 改动)
- 开始下一轮宏任务
✅ 举个例子:
console.log('start');
setTimeout(() => {
console.log('macro task');
});
Promise.resolve().then(() => {
console.log('micro task');
});
console.log('end');
输出顺序:
start
end
micro task // 微任务优先
macro task // 宏任务之后
📦 总结
类型 | 示例 | 何时执行 |
---|---|---|
微任务 | Promise.then() 、queueMicrotask() |
当前宏任务结束后,立刻执行所有 |
宏任务 | setTimeout() 、事件监听回调 |
每一轮事件循环的起点 |