事件循环（Event Loop）与异步编程：宏任务与微任务的执行顺序

事件循环：JavaScript世界的幕后推手，以及它如何让我们又爱又恨

想象一下，你是一个餐厅的服务员，顾客（也就是你的代码）点了各种各样的菜（任务）。你不能一口气只服务一个顾客，那样其他顾客肯定会饿死。你需要高效地处理所有请求，让每个人都满意（或者至少不投诉）。这就是事件循环在JavaScript世界里扮演的角色：一个勤劳的服务员，巧妙地穿梭于各种任务之间，维持整个餐厅的秩序。

但这个服务员有点特别，它不是直接去后厨（CPU）催菜，而是有一个特殊的传送带系统（任务队列）。顾客点的菜先放在传送带上，然后服务员按照一定的规则（事件循环机制）把菜送到顾客面前。

1. 什么是事件循环？

简单来说，事件循环就是一个不断循环执行任务的机制。它负责监听各种事件（用户点击、定时器到期、网络请求完成等等），并将对应的任务放入任务队列，然后按照一定的优先级和顺序执行这些任务。

JavaScript是单线程的，这意味着它一次只能执行一个任务。如果没有事件循环，当遇到耗时操作（比如网络请求）时，整个程序就会卡住，直到这个操作完成。就像餐厅只有一个服务员，而且这个服务员一次只能服务一个顾客一样，其他顾客就只能干等着。

事件循环的出现，让JavaScript能够处理异步操作，而不会阻塞主线程。它就像一个聪明的调度员，让各种任务有条不紊地执行，保证程序的流畅运行。

2. 宏任务与微任务：任务世界的两大阵营

现在，我们的传送带上来了两种菜：一种是“大餐”（宏任务），一种是“小吃”（微任务）。

宏任务（Macro Task）： 比如setTimeout、setInterval、setImmediate（Node.js）、I/O操作（文件读写、网络请求）、UI渲染等等。你可以把它们想象成需要花费大量时间准备的大餐，比如烤全羊、佛跳墙。
微任务（Micro Task）： 比如Promise.then、async/await、queueMicrotask、MutationObserver等等。你可以把它们想象成制作精美的小吃，比如寿司、提拉米苏。

这两种任务的区别在于它们的执行时机和优先级。

3. 事件循环的工作流程：服务员的独家秘笈

我们的服务员（事件循环）有自己的一套独家秘笈，来决定先上哪个菜：

执行栈清空： 首先，确保当前执行栈是空的。这意味着当前正在执行的代码已经完成。就像服务员要确保手里没有其他菜品，才能开始新的服务。
执行宏任务： 从宏任务队列中取出一个任务执行。通常是按照先进先出的顺序，但也有例外，比如UI渲染的优先级可能会更高。就像服务员从传送带上取出一个大餐，然后送到顾客面前。
执行微任务： 在执行完一个宏任务后，立即执行微任务队列中的所有任务。微任务的优先级高于宏任务，这意味着它们会在下一个宏任务执行之前全部完成。就像服务员在送完大餐后，立即把所有的小吃都送到顾客面前，确保顾客不会等太久。
更新渲染： 如果需要更新UI，浏览器会在执行完微任务后进行渲染。就像服务员会及时清理桌面，给顾客提供更好的用餐环境。
重复： 然后，服务员会重复以上步骤，不断地从任务队列中取出任务执行，直到所有任务都完成。

这个过程就像一个永不停歇的循环，保证了JavaScript程序的正常运行。

4. 举个栗子：宏任务与微任务的爱恨情仇

让我们来看一个简单的例子，来理解宏任务和微任务的执行顺序：

console.log('start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise');
});

console.log('end');

如果你运行这段代码，你会看到以下输出：

start
end
promise
setTimeout

为什么是这个顺序呢？让我们一步一步地分析：

console.log('start');： 首先，执行同步代码，输出start。
setTimeout(() => { ... }, 0);： setTimeout是一个宏任务，它会被放入宏任务队列中。注意，即使setTimeout的延迟时间是0，它仍然是一个宏任务。就像你点了一份烤全羊，即使后厨说马上就能做好，服务员也需要把它放到传送带上，然后按照流程处理。
Promise.resolve().then(() => { ... });： Promise.then是一个微任务，它会被放入微任务队列中。
console.log('end');： 执行同步代码，输出end。
执行栈清空： 现在，所有同步代码都执行完毕，执行栈为空。
执行微任务： 事件循环开始处理微任务队列，执行Promise.then的回调函数，输出promise。
执行宏任务： 微任务队列为空后，事件循环开始处理宏任务队列，执行setTimeout的回调函数，输出setTimeout。

这个例子清晰地展示了微任务的优先级高于宏任务。即使setTimeout的延迟时间是0，它仍然会在Promise.then之后执行。

5. async/await的魔法：微任务的另一种写法

async/await是ES2017引入的语法糖，它可以让我们以同步的方式编写异步代码。但实际上，async/await底层也是基于Promise实现的，所以它也和微任务息息相关。

让我们看一个使用async/await的例子：

async function foo() {
  console.log('foo start');
  await bar();
  console.log('foo end');
}

async function bar() {
  console.log('bar');
}

console.log('script start');

foo();

console.log('script end');

这段代码的输出是：

script start
foo start
bar
script end
foo end

为什么是这个顺序呢？

console.log('script start');： 首先，执行同步代码，输出script start。
foo();： 调用foo函数。
console.log('foo start');： 执行foo函数，输出foo start。
await bar();： 执行await bar()。await会暂停foo函数的执行，并将控制权交还给事件循环。bar函数会被立即执行，输出bar。
console.log('script end');： 执行同步代码，输出script end。
恢复foo函数的执行： 当bar函数执行完毕后，事件循环会恢复foo函数的执行。注意，await bar()实际上会创建一个微任务，在bar函数执行完毕后，将foo函数的剩余部分放入微任务队列。
执行微任务： 事件循环开始处理微任务队列，执行foo函数的剩余部分，输出foo end。

这个例子说明了async/await实际上是基于Promise实现的，await表达式会将后面的代码放入微任务队列中，等待执行。

6. 为什么理解事件循环很重要？

理解事件循环对于编写高性能、可维护的JavaScript代码至关重要。

避免阻塞： 通过合理地使用异步操作，我们可以避免阻塞主线程，保证程序的流畅运行。
优化性能： 了解宏任务和微任务的执行顺序，可以帮助我们优化代码的执行效率，避免不必要的延迟。
调试问题： 当遇到一些奇怪的bug时，理解事件循环可以帮助我们更好地调试问题，找到问题的根源。

7. 事件循环的进阶玩法：requestAnimationFrame和Idle Deadline

除了宏任务和微任务之外，还有一些其他的API可以让我们更好地控制事件循环：

requestAnimationFrame： 用于在浏览器下一次重绘之前执行动画相关的代码。它可以保证动画的流畅性，避免出现卡顿现象。
Idle Deadline： 用于在浏览器空闲时执行一些低优先级的任务，比如数据分析、预加载等等。它可以避免影响用户体验，同时也能充分利用浏览器的资源。

这些API就像是餐厅里的特殊服务，可以让我们更好地满足顾客的需求。

8. 总结：事件循环，我们相爱相杀

事件循环是JavaScript世界的核心机制，它让我们可以编写异步代码，保证程序的流畅运行。但是，如果不理解事件循环的工作原理，很容易写出一些性能低下的代码，甚至出现一些难以调试的bug。

就像餐厅的服务员一样，事件循环也需要我们合理地利用，才能发挥出它的最大价值。我们需要了解宏任务和微任务的执行顺序，合理地使用async/await、requestAnimationFrame和Idle Deadline等API，才能写出高性能、可维护的JavaScript代码。

希望这篇文章能帮助你更好地理解事件循环，让你在JavaScript的世界里更加游刃有余！记住，理解事件循环，就像掌握了一门秘籍，可以让你在代码的世界里披荆斩棘，最终成为一名优秀的JavaScript开发者！

事件循环：JavaScript世界的幕后推手，以及它如何让我们又爱又恨

发表回复 取消回复

发表回复取消回复