JavaScript的异步特性，在深入了解其底层机制前，可能显得神秘莫测。其核心在于事件循环 (Event Loop)，它协调着两个关键角色：微任务 (Microtask) 和宏任务 (Macrotask)。本文将深入探讨它们的概念、运作机制以及实际应用，帮助您掌握JavaScript异步编程的精髓。
事件循环与任务队列
JavaScript引擎单线程执行代码。为了处理异步操作，它依赖于事件循环，在调用栈 (Call Stack) 和任务队列之间进行协调。任务队列分为微任务队列和宏任务队列。
微任务
微任务具有高优先级，在当前JavaScript代码执行完毕且调用栈为空后立即执行。它们确保快速响应和状态一致性。常见示例包括：
- Promise (.then, async/await)
- MutationObserver 回调函数
宏任务
宏任务优先级较低，只有在所有微任务执行完毕后，事件循环才会处理它们。它们处理耗时操作和外部事件。常见示例包括：
- 计时器 (setTimeout, setInterval)
- 消息通道 (MessageChannel) 回调函数
- I/O操作
此外，requestAnimationFrame 并不属于任何队列。它与浏览器渲染周期同步，非常适合动画渲染。
工作机制
事件循环处理任务的步骤如下：
- 执行同步代码。
- 清空微任务队列。
- 执行宏任务队列中的一个任务。
- 重复步骤2和3，直到所有任务处理完毕。
这种优先级机制保证了高优先级任务（如Promise）优先执行，而低优先级任务（如计时器）稍后处理。
实际应用示例
以下代码片段演示了同步代码、微任务、宏任务和requestAnimationFrame的交互：
console.log('同步代码开始');
// 宏任务: setTimeout
setTimeout(() => {
console.log('宏任务: setTimeout');
}, 0);
// 宏任务: setInterval
const intervalId = setInterval(() => {
console.log('宏任务: setInterval');
clearInterval(intervalId);
}, 100);
// 微任务: Promise
Promise.resolve().then(() => {
console.log('微任务: Promise then 1');
Promise.resolve().then(() => {
console.log('微任务: Promise then 2');
});
});
// 微任务: MutationObserver
const observer = new MutationObserver(() => {
console.log('微任务: MutationObserver');
});
const targetNode = document.createElement('div');
observer.observe(targetNode, { attributes: true });
targetNode.setAttribute('data-test', 'true');
// 宏任务: MessageChannel
const channel = new MessageChannel();
channel.port1.onmessage = () => {
console.log('宏任务: MessageChannel');
};
channel.port2.postMessage('Test');
// requestAnimationFrame
requestAnimationFrame(() => {
console.log('不在任务队列中: requestAnimationFrame');
});
console.log('同步代码结束');
预期输出
输出顺序清晰地展现了任务优先级：
- 同步代码: “同步代码开始”, "同步代码结束"
- 微任务: "微任务: Promise then 1", "微任务: Promise then 2", "微任务: MutationObserver"
- 宏任务: "宏任务: setTimeout", "宏任务: MessageChannel", "宏任务: setInterval"
- requestAnimationFrame: "不在任务队列中: requestAnimationFrame"
深入探讨：微任务与宏任务
微任务的关键特征
- 在同步代码执行完毕后立即执行。
- 适用于小型、高优先级的更新，例如处理Promise或DOM变化。
- 示例：Promise, MutationObserver。
宏任务的关键特征
- 只有在所有微任务执行完毕后才运行。
- 用于较大的、优先级较低的操作或外部事件处理。
- 示例：计时器, 消息通道。
requestAnimationFrame 的独特之处
requestAnimationFrame虽然不属于任务队列，但在异步编程中扮演着重要角色。它安排代码在浏览器下次重绘之前执行，确保动画流畅。
结论
微任务、宏任务和事件循环的交互是JavaScript异步编程的核心。理解和运用这些概念，可以编写更高效、更易维护且高性能的代码。记住：微任务优先，然后是宏任务，最后是requestAnimationFrame用于优化动画效果。祝您编程愉快！
