在前端开发中,JavaScript运行时环境通常将任务分为两类:微任务(Microtasks)和宏任务(Macrotasks),这是为了管理和执行异步代码。理解它们的区别很重要,因为它们决定了代码执行的顺序。
1.宏任务(Macrotasks)
宏任务是由浏览器提供的异步任务,包括但不限于:
·setTimeout和setInterval回调函数
·DOM 事件回调函数(如click、input等)
·XMLHttpRequest 和 fetch 等网络请求的回调函数
·requestAnimationFrame 回调函数
宏任务的执行是在当前执行栈执行完毕后进行。当浏览器执行完一个宏任务后,会检查微任务队列是否有待处理的微任务,如果有,则会优先执行微任务队列中的所有微任务,然后再执行下一个宏任务。
2.微任务(Microtasks)
微任务也是异步任务,但它的优先级比宏任务高。常见的微任务包括:
·Promise的resolve和reject回调函数
·MutationObserver回调函数
·process.nextTick(Node.js环境)
微任务会在当前宏任务执行结束后、下一个宏任务执行之前执行。
现在,让我们通过代码演示来说明微任务和宏任务的区别:
<button id="btn">点击触发异步任务</button>
<script>
function performMacroTask() {
console.log('执行宏任务');
}
function performMicroTask() {
console.log('执行微任务');
}
document.getElementById('btn').addEventListener('click', function () {
console.log('点击事件触发');
// 宏任务:模拟异步任务
setTimeout(function () {
performMacroTask();
}, 0);
// 微任务:Promise的resolve
Promise.resolve().then(function () {
performMicroTask();
});
console.log('点击事件结束');
});
console.log('脚本执行结束');
</script>
假设我们在浏览器中运行上述代码并点击按钮,输出的顺序将是:
点击事件触发
点击事件结束
脚本执行结束
执行微任务
执行宏任务
解释执行过程:
1.点击按钮触发点击事件,输出"点击事件触发"。
2.执行点击事件内的同步代码,输出"点击事件结束"。
3.执行外部脚本的同步代码,输出"脚本执行结束"。
4.执行微任务队列,输出"执行微任务"。
5.执行宏任务队列,输出"执行宏任务"。
这个例子演示了异步任务的执行顺序。微任务会在当前宏任务的末尾执行,而宏任务会在当前执行栈执行完毕后执行。请注意,微任务总是在下一个宏任务之前执行,所以它们的优先级较高。