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的交互：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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用于优化动画效果。祝您编程愉快！