在 JavaScript 中,任务分为:
- 宏任务 macro task
- 微任务 micro task
他们的执行顺序有一定的区别,理解他们的执行机制对于处理异步操作非常重要。
宏任务
宏任务是由 JavaScript 引擎提供的任务源,通常包括一下几种情况:
- 主代码块
- setTimeout 和 SetInterval 回调函数
- I/O 操作(例如文件读写、网络请求等)
- UI 渲染
每个宏任务会在事件循环的不同阶段执行,宏任务之间会有一个执行顺序,即先进先出。
微任务
微任务是由 Promise、MutationObserve 和 process.nextTick 等提供的任务源。
常见的微任务包括:
- Promise 的回调函数
- .then()、.catch()、finally()
- MutationObserver 的回调函数
- 是一个 js api,用于监测 DOM 的变化
- process.nextTick
- process.nextTick 是 Node.js 中的一个特殊函数,用于在当前执行栈完成后立即执行回调函数。它提供了一种将回调函数插入到事件循环的微任务队列的方法,并且优先级比 Promise 的微任务更高。
微任务会在当前宏任务执行完毕后立即执行,而不需要等待下一个宏任务。在同一个宏任务中,所有的微任务会按照它们被创建的顺序依次执行完毕。
事件循环的基本流程如下:
- 执行当前宏任务的同步代码。
- 检查是否存在微任务队列,如果存在则依次执行所有微任务。
- 执行浏览器的渲染操作(如果有)。
- 执行下一个宏任务。
示例代码
console.log('1');setTimeout(function() {console.log('2');
}, 0);Promise.resolve().then(function() {console.log('3');
});console.log('4');在上述代码中,按照执行顺序,输出结果为:
1
4
3
2
解释如下:
1. 首先,同步代码 console.log('1') 和 console.log('4') 都会立即执行,分别打印数字 1和4。
2. 然后,遇到 setTimeout,它是一个宏任务,会被放到宏任务队列中,等待执行。
3. 接着,遇到 Promise.resolve().then(),它是一个微任务,会被放到微任务队列中,等待执行。
4. 所有同步代码执行完毕后,执行微任务队列中的微任务,打印数字 3。
5. 最后,执行宏任务队列中的宏任务,即 setTimeout 的回调函数,打印数字 2。
总结:微任务优先级高于宏任务,微任务会在当前宏任务执行完毕后立即执行。