以下是关于 JavaScript 中 宏任务(Macro Task) 和 微任务(Micro Task) 的系统梳理,涵盖核心概念、执行规则、应用场景及进阶知识,帮助我们彻底掌握异步编程的底层机制。
一、基础概念
1. 宏任务(Macro Task)
- 定义:由宿主环境(浏览器/Node.js)发起的任务,代表一个独立的、完整的逻辑单元。
- 常见来源:
setTimeout
/setInterval
- I/O 操作(文件读写、网络请求)
- DOM 事件回调(点击、滚动)
requestAnimationFrame
(浏览器)setImmediate
(Node.js)
2. 微任务(Micro Task)
- 定义:由 JavaScript 引擎发起的任务,通常用于处理高优先级的异步操作。
- 常见来源:
Promise.then
/Promise.catch
/Promise.finally
MutationObserver
(浏览器)queueMicrotask
process.nextTick
(Node.js,优先级高于其他微任务)
二、执行顺序规则
1. 事件循环流程
- 执行当前调用栈(同步代码)。
- 检查微任务队列:清空所有微任务(递归处理新添加的微任务)。
- 执行一个宏任务:从宏任务队列中取出一个任务执行。
- 重复步骤 2-3,形成事件循环。
2. 经典执行顺序示例
console.log("Script start"); // 同步任务(宏任务)setTimeout(() => console.log("setTimeout"