好的，各位观众老爷们，今天咱们来聊聊 Event Loop 这个既熟悉又神秘的家伙。它就像我们程序世界里的交通指挥中心，负责安排各种任务，让我们的代码井然有序地执行。但是，浏览器和 Node.js 里的 Event Loop 可不是完全一样的，它们之间的差异直接影响着任务的调度方式。今天我们就来扒一扒它们的底裤，看看它们到底有什么不一样。
开场白：Event Loop 是个啥玩意儿？
简单来说，Event Loop 就是一个循环往复执行的机制，它会不断地检查任务队列，取出任务并执行。之所以需要它，是因为 JavaScript 是单线程的，一次只能执行一个任务。如果没有 Event Loop，我们的程序就只能一个任务接着一个任务死板地执行，效率低到令人发指。
Event Loop 的核心思想就是：“你办事我放心，办完事别忘了告诉我。” 也就是说，当我们执行一个异步任务（比如网络请求、定时器等）时，会把这个任务交给其他模块（比如浏览器内核或者 libuv）。这些模块执行完任务后，会把结果放到任务队列里。Event Loop 会不断地从任务队列里取出任务并执行。
第一幕：浏览器里的 Event Loop
浏览器里的 Event Loop 相对复杂一些，它涉及到多个队列，以及复杂的优先级策略。让我们一起来看看它的主要组成部分：
-
调用栈（Call Stack）： 存放当前正在执行的任务。记住，JavaScript 是单线程的，所以调用栈里永远只有一个任务在执行。
-
任务队列（Task Queue/Callback Queue）： 存放待执行的任务。浏览器里有多种任务队列，比如宏任务队列（MacroTask Queue）和微任务队列（MicroTask Queue）。
-
微任务队列（MicroTask Queue）： 存放需要尽快执行的任务。比如
Promise.then、MutationObserver等产生的任务。 -
宏任务队列（MacroTask Queue）： 存放普通的任务。比如
setTimeout、setInterval、setImmediate、I/O、UI rendering 等产生的任务。 -
渲染队列（Rendering Queue）：这个队列由浏览器内部管理，主要用于页面渲染。
浏览器 Event Loop 的运行机制：
- 执行全局脚本代码，这些代码会被放到调用栈里执行。
- 当遇到异步任务时，比如
setTimeout，会把这个任务交给浏览器内核的其他模块处理，然后继续执行后面的代码。 - 当异步任务完成后，会把对应的回调函数放到宏任务队列或微任务队列里。
- 当调用栈为空时，Event Loop 会首先检查微任务队列，取出所有微任务并执行。
- 当微任务队列为空时，Event Loop 会从宏任务队列里取出一个任务并执行。
- 执行完宏任务后，浏览器会判断是否需要更新渲染，如果需要，会执行渲染队列里的任务，进行页面渲染。
- 重复 4-6 步，直到所有任务都执行完毕。
举个栗子：
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');执行结果：
script start
script end
promise1
promise2
setTimeout解析：
- 首先执行全局脚本代码，输出
script start和script end。 setTimeout的回调函数会被放到宏任务队列里。Promise.resolve().then的回调函数会被放到微任务队列里。- 当调用栈为空时，Event Loop 会首先执行微任务队列里的任务，输出
promise1和promise2。 - 然后，Event Loop 会从宏任务队列里取出一个任务执行，输出
setTimeout。
重点： 微任务的优先级高于宏任务，所以微任务会先于宏任务执行。
第二幕：Node.js 里的 Event Loop
Node.js 的 Event Loop 基于 libuv 库实现，libuv 是一个高性能的异步 I/O 库。Node.js 的 Event Loop 结构如下：
- Timers 阶段： 执行
setTimeout和setInterval的回调函数。 - Pending callbacks 阶段： 执行延迟到下一个循环迭代的 I/O 回调。
- Idle, prepare 阶段： 仅内部使用。
- Poll 阶段： 获取新的 I/O 事件，执行与 I/O 相关的回调。
- Check 阶段： 执行
setImmediate的回调函数。 - Close callbacks 阶段： 执行
close事件的回调函数，比如socket.on('close', ...)。
Node.js Event Loop 的运行机制：
- Event Loop 启动后，会依次执行各个阶段。
- 在每个阶段，Event Loop 会检查是否有待执行的回调函数，如果有，则执行这些回调函数。
- 当所有阶段都执行完毕后，Event Loop 会检查是否有新的 I/O 事件，如果有，则会进入 Poll 阶段，否则会进入 Timers 阶段。
- 重复 1-3 步，直到没有需要执行的任务。
举个栗子：
setTimeout(() => {
console.log('setTimeout');
}, 0);
setImmediate(() => {
console.log('setImmediate');
});
console.log('script end');执行结果 (可能)：
script end
setTimeout
setImmediate或者
script end
setImmediate
setTimeout解析：
- 首先执行全局脚本代码，输出
script end。 setTimeout的回调函数会被放到 Timers 阶段。setImmediate的回调函数会被放到 Check 阶段。- 由于 Timers 阶段先于 Check 阶段执行，所以
setTimeout的回调函数可能会先于setImmediate的回调函数执行。 - 但是，如果 Poll 阶段没有新的 I/O 事件，Event Loop 会直接进入 Check 阶段，这时
setImmediate的回调函数会先于setTimeout的回调函数执行。
重点： setTimeout 和 setImmediate 的执行顺序是不确定的，取决于 Poll 阶段是否有新的 I/O 事件。
第三幕：浏览器 vs. Node.js：Event Loop 的差异
| 特性 | 浏览器 | Node.js |
|---|---|---|
| 基础 | 浏览器内核 | libuv |
| 任务队列 | 宏任务队列、微任务队列、渲染队列 | Timers、Pending callbacks、Poll、Check、Close callbacks |
| 优先级 | 微任务 > 宏任务 > 渲染 | 各个阶段有不同的优先级，但整体上是顺序执行的 |
setImmediate |
不支持 | 支持 |
| 渲染 | 有专门的渲染队列，负责页面渲染 | 没有 |
| 文件 I/O | 通过浏览器提供的 API 进行文件操作 | 通过 fs 模块进行文件操作 |
差异分析：
- 基础不同： 浏览器 Event Loop 是浏览器内核的一部分，而 Node.js Event Loop 基于
libuv库。 - 任务队列不同： 浏览器有宏任务队列、微任务队列和渲染队列，而 Node.js 有 Timers、Pending callbacks、Poll、Check、Close callbacks 等阶段。
- 优先级不同： 浏览器里微任务的优先级高于宏任务，而在 Node.js 里，各个阶段的优先级是固定的，Event Loop 会按照顺序执行各个阶段。
setImmediate的支持： 浏览器不支持setImmediate，而 Node.js 支持。- 渲染： 浏览器有专门的渲染队列，负责页面渲染，而 Node.js 没有。
- 文件 I/O： 浏览器通过浏览器提供的 API 进行文件操作，而 Node.js 通过
fs模块进行文件操作。
这些差异对任务调度的影响：
- 微任务的执行时机： 在浏览器里，微任务会在每个宏任务执行完毕后立即执行，而在 Node.js 里，微任务的执行时机取决于当前 Event Loop 处于哪个阶段。
setTimeout和setImmediate的执行顺序： 在浏览器里，setTimeout的回调函数总是会在setImmediate的回调函数之前执行，而在 Node.js 里，setTimeout和setImmediate的执行顺序是不确定的。- 页面渲染的时机： 在浏览器里，页面渲染会在每个宏任务执行完毕后执行，而在 Node.js 里，没有页面渲染的概念。
第四幕：代码示例与深度剖析
为了更好地理解浏览器和 Node.js Event Loop 的差异，我们来看几个更复杂的代码示例。
示例 1：Promise 与 process.nextTick (Node.js)
setTimeout(() => {
console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
console.log('promise');
});
process.nextTick(() => {
console.log('nextTick');
});
setImmediate(() => {
console.log('setImmediate');
});
console.log('script end');可能的执行结果：
script end
nextTick
promise
setTimeout
setImmediate解析：
process.nextTick的回调函数会被放到 next tick 队列里，这个队列的优先级最高，会在当前操作结束后、Event Loop 的下一个循环开始前执行。Promise.resolve().then的回调函数会被放到微任务队列里，微任务队列的优先级高于宏任务队列，会在 next tick 队列执行完毕后执行。setTimeout的回调函数会被放到 Timers 阶段。setImmediate的回调函数会被放到 Check 阶段。
示例 2：I/O 操作 (Node.js)
const fs = require('fs');
fs.readFile('test.txt', () => {
setTimeout(() => {
console.log('setTimeout');
}, 0);
setImmediate(() => {
console.log('setImmediate');
});
});可能的执行结果：
setImmediate
setTimeout解析：
fs.readFile的回调函数会在 Poll 阶段执行。- 当 Poll 阶段执行完毕后，Event Loop 会进入 Check 阶段，执行
setImmediate的回调函数。 - 然后，Event Loop 会进入 Timers 阶段，执行
setTimeout的回调函数。
示例 3：MutationObserver (浏览器)
<!DOCTYPE html>
<html>
<head>
<title>MutationObserver Example</title>
</head>
<body>
<div id="myDiv">Hello</div>
<script>
const div = document.getElementById('myDiv');
const observer = new MutationObserver(() => {
console.log('MutationObserver callback');
});
observer.observe(div, { childList: true });
div.textContent = 'World';
Promise.resolve().then(() => {
console.log('Promise callback');
});
setTimeout(() => {
console.log('setTimeout callback');
}, 0);
console.log('Script end');
</script>
</body>
</html>执行结果：
Script end
MutationObserver callback
Promise callback
setTimeout callback解析：
MutationObserver的回调函数会在微任务队列里执行。Promise.resolve().then的回调函数也会在微任务队列里执行。setTimeout的回调函数会在宏任务队列里执行。- 因为微任务的优先级高于宏任务，所以
MutationObserver和Promise的回调函数会在setTimeout的回调函数之前执行。
第五幕：总结与建议
通过以上分析，我们可以得出以下结论：
- 浏览器和 Node.js 的 Event Loop 机制有所不同，了解这些差异对于编写高性能的 JavaScript 代码至关重要。
- 在浏览器里，要特别注意微任务和宏任务的执行顺序，避免阻塞页面渲染。
- 在 Node.js 里，要了解各个阶段的优先级，合理安排任务，避免 I/O 阻塞。
- 在编写异步代码时，要充分利用 Promise、async/await 等语法糖，使代码更加简洁易懂。
- 调试 Event Loop 相关问题时，可以使用 Chrome DevTools 的 Performance 面板或者 Node.js 的
--trace-event-categories选项，来分析 Event Loop 的运行情况。
一些建议：
- 避免长时间运行的同步代码： 尽量将耗时的操作放到异步任务里执行，避免阻塞 Event Loop。
- 合理使用
setTimeout和setImmediate： 在浏览器里，尽量使用requestAnimationFrame来代替setTimeout，可以获得更好的性能。在 Node.js 里，要根据实际情况选择setTimeout或setImmediate。 - 注意内存泄漏： 在异步任务里，要及时释放不再使用的资源，避免内存泄漏。
好了，今天的 Event Loop 讲座就到这里了。希望大家能够对 Event Loop 有更深入的理解，写出更高效、更健壮的 JavaScript 代码。 感谢各位的观看，下次再见！