浏览器与Node.js事件循环差异

浏览器与Node.js事件循环的基本概念

浏览器和Node.js都采用了事件循环机制来处理异步操作，但具体实现存在显著差异。浏览器的事件循环主要服务于渲染和用户交互，而Node.js则专注于I/O密集型操作。两者虽然共享相似的设计理念，但在任务队列划分、执行顺序以及微任务处理等方面表现出不同行为。

任务队列的差异

浏览器环境通常包含至少一个宏任务队列和微任务队列。宏任务包括setTimeout、setInterval、I/O操作等，而微任务主要包括Promise.then、MutationObserver等。Node.js则将任务队列细分为更多类型：

// 浏览器中的任务队列示例
setTimeout(() => console.log('宏任务1'), 0);
Promise.resolve().then(() => console.log('微任务1'));
setTimeout(() => console.log('宏任务2'), 0);

// 输出顺序：
// 微任务1
// 宏任务1
// 宏任务2

Node.js使用libuv库实现事件循环，包含六个主要阶段：

1. timers阶段：执行setTimeout和setInterval回调
2. pending callbacks：执行某些系统操作的回调
3. idle, prepare：内部使用
4. poll：检索新的I/O事件
5. check：执行setImmediate回调
6. close callbacks：执行关闭事件的回调

微任务处理的时机

浏览器在每个宏任务执行完毕后都会清空微任务队列，而Node.js的微任务处理时机更为复杂：

// Node.js微任务示例
setImmediate(() => {
  console.log('setImmediate');
  Promise.resolve().then(() => console.log('微任务 in setImmediate'));
});

setTimeout(() => {
  console.log('setTimeout');
  Promise.resolve().then(() => console.log('微任务 in setTimeout'));
}, 0);

// 可能的输出顺序：
// setTimeout
// 微任务 in setTimeout
// setImmediate
// 微任务 in setImmediate

Node.js中微任务会在以下时机执行：

• 每个阶段切换时
• 每个回调函数执行后
• process.nextTick队列清空后

process.nextTick的特殊性

Node.js独有的process.nextTick队列优先级高于微任务队列：

Promise.resolve().then(() => console.log('微任务'));
process.nextTick(() => console.log('nextTick'));
setImmediate(() => console.log('setImmediate'));

// 输出顺序：
// nextTick
// 微任务
// setImmediate

process.nextTick回调会在事件循环的当前阶段立即执行，可能导致I/O饥饿问题，因此官方推荐使用setImmediate代替。

setImmediate与setTimeout(0)的对比

这两个API看似相似，但在Node.js中行为不同：

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

// 输出顺序不确定，取决于事件循环启动时间

在I/O回调中，setImmediate总是先于setTimeout执行：

const fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout(() => console.log('setTimeout'), 0);
  setImmediate(() => console.log('setImmediate'));
  Promise.resolve().then(() => console.log('微任务'));
});

// 典型输出顺序：
// 微任务
// setImmediate
// setTimeout

浏览器渲染与Node.js性能的考量

浏览器事件循环需要考虑页面渲染，通常每16ms会执行一次渲染流程。Node.js则更关注I/O性能，采用不同的优化策略：

// 浏览器中长任务会阻塞渲染
function longTask() {
  const start = Date.now();
  while(Date.now() - start < 100) {}
  requestAnimationFrame(() => console.log('渲染帧'));
}

// Node.js中可以使用setImmediate分解任务
function chunkedTask() {
  setImmediate(() => {
    // 处理部分任务
    if(hasMoreWork) chunkedTask();
  });
}

事件循环阶段的详细对比

Node.js的poll阶段特别值得关注，它负责处理I/O事件并计算应该阻塞和轮询I/O的时间：

1. 当事件循环进入poll阶段：
   • 如果poll队列不为空，执行队列中的回调直到清空
   • 如果poll队列为空：
     • 如果有setImmediate回调，结束poll阶段进入check阶段
     • 如果没有setImmediate回调，等待新的I/O事件

const fs = require('fs');

fs.readFile(__filename, () => {
  console.log('I/O回调');
  
  setTimeout(() => {
    console.log('setTimeout in I/O');
  }, 0);
  
  setImmediate(() => {
    console.log('setImmediate in I/O');
  });
});

// 典型输出顺序：
// I/O回调
// setImmediate in I/O
// setTimeout in I/O

浏览器Web Workers与Node.js Worker Threads

两者都提供了多线程能力，但与主线程的事件循环交互方式不同：

浏览器Web Workers：

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('data');
worker.onmessage = (e) => console.log(e.data);

// worker.js
onmessage = (e) => {
  postMessage('processed ' + e.data);
};

Node.js Worker Threads：

const { Worker } = require('worker_threads');

const worker = new Worker(`
  const { parentPort } = require('worker_threads');
  parentPort.on('message', (msg) => {
    parentPort.postMessage('processed ' + msg);
  });
`, { eval: true });

worker.on('message', (msg) => console.log(msg));
worker.postMessage('data');

错误处理差异

浏览器和Node.js在事件循环中的错误处理机制也有所不同：

浏览器：

window.addEventListener('unhandledrejection', (event) => {
  console.warn('未处理的Promise拒绝:', event.reason);
});

Promise.reject(new Error('浏览器错误'));

Node.js：

process.on('unhandledRejection', (reason) => {
  console.error('未处理的Promise拒绝:', reason);
});

Promise.reject(new Error('Node.js错误'));

Node.js还提供了domain和async_hooks等更高级的错误跟踪机制。

性能监控API

浏览器提供了Performance API来监控事件循环性能：

// 浏览器性能监控
performance.mark('start');
setTimeout(() => {
  performance.mark('end');
  performance.measure('timer', 'start', 'end');
  console.log(performance.getEntriesByName('timer'));
}, 100);

Node.js使用perf_hooks模块：

const { performance, PerformanceObserver } = require('perf_hooks');

const obs = new PerformanceObserver((items) => {
  console.log(items.getEntries()[0]);
});
obs.observe({ entryTypes: ['measure'] });

performance.mark('start');
setTimeout(() => {
  performance.mark('end');
  performance.measure('timer', 'start', 'end');
}, 100);

事件循环的自定义与扩展

Node.js允许一定程度的事件循环定制：

const { setUnrefTimeout } = require('timers');

// 不影响事件循环退出的定时器
const timer = setUnrefTimeout(() => {
  console.log('不会阻止进程退出');
}, 1000);

// 自定义promise钩子
const { async_hooks } = require('async_hooks');
const hook = async_hooks.createHook({
  init(asyncId, type, triggerAsyncId) {
    console.log(`初始化异步资源: ${type}`);
  }
});
hook.enable();

浏览器则通过requestIdleCallback等API实现类似功能：

requestIdleCallback((deadline) => {
  while(deadline.timeRemaining() > 0) {
    // 执行低优先级任务
  }
});