目录
- 简介
- 微任务与宏任务的基本概念
- 宏任务(Macrotasks)
- 微任务(Microtasks)
- 宏任务示例
- 微任务示例
- 微任务与宏任务的执行时序
- 结论
简介
在JavaScript的异步编程中,理解
事件循环(Event Loop)
是至关重要的。事件循环机制确保了JavaScript的单线程能够处理高并发的异步任务。
微任务(Microtasks)
和宏任务(Macrotasks)
是事件循环中的两种主要任务类型。
本文将介绍这两种任务的区别,并通过代码示例深入探讨它们的工作机制,帮助您掌握前端异步编程的核心概念。
微任务与宏任务的基本概念
JavaScript的事件循环由任务队列组成,任务队列分为两种:
微任务队列和宏任务队列
。每个宏任务执行完毕后,JavaScript引擎会先执行所有微任务队列中的任务,然后再执行下一个宏任务。
宏任务(Macrotasks)
宏任务通常指的是那些会在事件循环的单独迭代中执行的任务,它们包括:
- 整体脚本执行:整个JavaScript文件或脚本标签作为首次宏任务执行。
- setTimeout 和 setInterval:设定的定时器到期后,会作为宏任务被添加到宏任务队列。
- setImmediate (Node.js 特有):在Node.js中,
setImmediate
用于在当前事件循环结束时执行。 - I/O:包括从网络、文件系统等进行的输入/输出操作。
- UI 渲染:浏览器将计算好的DOM更新渲染到屏幕上。
- requestAnimationFrame:用于动画的帧同步,会在下一次重绘之前执行。
微任务(Microtasks)
微任务在当前宏任务完成后立即执行,它们包括:
- Promise 回调:
Promise
的.then()
,.catch()
, 和.finally()
方法。 - MutationObserver:用于监听DOM树变化的API,当DOM变化时触发。
- queueMicrotask:一个标准的API,允许开发者显式地将函数排入微任务队列。
- process.nextTick (Node.js):在Node.js中,process.nextTick 用于延迟函数的执行直到当前操作结束,但它会在当前执行栈清空之后,下一次事件循环之前执行。
宏任务示例
尽管
setTimeout
的延迟时间设置为0,它仍然是一个宏任务,会在当前宏任务执行完毕后,下一个事件循环迭代中执行。
console.log('Script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
console.log('Script end');
输出:
Script start
Script end
setTimeout
微任务示例
Promise
的then
回调是微任务,它们会在当前宏任务的所有代码执行完毕后立即执行。
console.log('Script start');
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('Script end');
输出:
Script start
Script end
promise1
promise2
微任务与宏任务的执行时序
在这个示例中,我们可以看到
Promise
的微任务在当前宏任务的代码执行完毕后立即执行,而两个setTimeout
的宏任务则在下一个事件循环迭代中执行。
console.log('Script start');
setTimeout(function() {
console.log('setTimeout');
});
Promise.resolve().then(function() {
console.log('promise1');
});
setTimeout(function() {
console.log('setTimeout2');
}, 0);
console.log('Script end');
输出:
Script start
Script end
promise1
setTimeout2 (next event loop iteration)
setTimeout
结论
- 微任务和宏任务是JavaScript异步编程的基石。
- 微任务提供了一种更快的异步处理方式,通常用于
快速连续的异步操作
,而宏任务则包括了更广泛的异步事件。