JavaScript篇：你以为事件循环都一样？浏览器和Node的差别让我栽了跟头！

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个干了6年的前端老油条。今天想和大家聊聊事件循环这个老生常谈的话题，不过这次咱们不聊基础，而是说说浏览器和Node环境下事件循环的那些看似相同实则大不同的细节。

记得去年我在做一个SSR项目时，就因为这个差异导致了一个诡异的bug，页面渲染总是比预期慢了一拍。最后排查发现，原来是我把浏览器的事件循环经验直接套用到了Node环境...

先说说它们有多像

不管是浏览器还是Node，事件循环的核心思想都是一样的：处理异步任务。它们都有：

调用栈（Call Stack）
任务队列（Task Queue）
微任务队列（Microtask Queue）

举个🌰，下面这段代码在两个环境下输出顺序是一样的：

javascript 复制代码

console.log('1');

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

Promise.resolve().then(() => console.log('3'));

console.log('4');

输出都是：1 → 4 → 3 → 2

但是！它们真的不一样

1. 任务队列的分类不同

浏览器环境：

宏任务：script整体代码、setTimeout、setInterval、I/O、UI渲染等
微任务：Promise.then、MutationObserver等

Node环境：

分得更细，有6个阶段：
1. timers（定时器阶段）
2. pending callbacks（系统操作回调）
3. idle, prepare（内部使用）
4. poll（轮询阶段，处理I/O）
5. check（setImmediate回调）
6. close callbacks（关闭回调）

2. 微任务执行时机有坑

在Node中，微任务会在每个阶段切换时全部执行完，而不像浏览器只在宏任务结束后执行。

看这个让我踩坑的例子：

javascript 复制代码

setTimeout(() => {
  console.log('timeout1');
  Promise.resolve().then(() => console.log('promise1'));
}, 0);

setTimeout(() => {
  console.log('timeout2');
  Promise.resolve().then(() => console.log('promise2'));
}, 0);

浏览器输出：

bash 复制代码

timeout1
promise1
timeout2
promise2

Node输出（v11之前）：

bash 复制代码

timeout1
timeout2
promise1
promise2

注意：Node v11之后行为已经和浏览器对齐，但老项目可能还在用旧版本！

3. 特有的API差异

Node有setImmediate，而浏览器没有；浏览器有requestAnimationFrame，Node没有。

setImmediate和setTimeout(fn, 0)谁先执行？看这个迷惑行为：

javascript 复制代码

setTimeout(() => console.log('timeout'), 0);
setImmediate(() => console.log('immediate'));

你可能以为timeout总是先输出？错！实际运行结果是不确定的！

我是怎么踩坑的

回到开头说的SSR项目，我当时写了这样的代码：

javascript 复制代码

async function renderApp() {
  await preloadData();  // 异步预加载数据
  console.log('数据加载完成');
  renderToString();
}

// 我以为会按顺序执行...
renderApp();
someSyncOperation();

在浏览器里一切正常，但在Node服务端渲染时，someSyncOperation()有时会在renderToString()之前执行！原因就在于Node的微任务处理时机和浏览器不同。

怎么避免踩坑

不要假设执行顺序 ：即使是setTimeout(fn, 0)也不保证立即执行
理解环境差异：写通用代码时要特别注意
善用async/await：用同步写法处理异步，减少不确定性
测试！测试！ ：重要的事情说三遍，一定要在不同环境测试

最后说两句

事件循环就像JavaScript的呼吸系统，虽然平时感觉不到它的存在，但一旦出了问题就会让你窒息。理解浏览器和Node的差异，就像知道在陆地和水里呼吸的不同方式，能让你在前端和后端之间自如切换。

大家有没有因为事件循环踩过坑？欢迎在评论区分享你的"血泪史"~