目录
- 简介
- 微任务与宏任务的基本概念
- 宏任务（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异步编程的基石。
- 微任务提供了一种更快的异步处理方式，通常用于
快速连续的异步操作，而宏任务则包括了更广泛的异步事件。
