浏览器事件循环vsNode.js事件循环

一分耕耘，一分收获！既然都打开这篇《浏览器事件循环与Node.js有何不同？》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

浏览器和Node.js事件循环的核心区别在于运行环境与职责不同：浏览器侧重UI渲染与用户交互，Node.js专注高性能I/O。浏览器事件循环按“宏任务→微任务→渲染”流程执行，确保界面流畅；Node.js事件循环由libuv实现，分为多个阶段（如timers、poll、check等），每个阶段处理特定任务，以优化服务器端并发处理。在任务优先级上，Node.js中process.nextTick优先于Promise微任务执行，体现更细粒度的控制；浏览器中requestAnimationFrame与渲染同步，用于动画优化，而Node.js中setImmediate用于在I/O操作后、下一循环前执行回调，提升响应性。两者虽均基于事件驱动，但设计目标不同导致机制差异。

浏览器和Node.js的事件循环，虽然核心思想都是为了实现非阻塞I/O和异步编程，但它们在具体实现、阶段划分以及处理的任务类型上存在显著差异。简单来说，浏览器事件循环更侧重于UI渲染、用户交互和网络请求，而Node.js的事件循环则专注于高性能的服务器端I/O操作，如文件系统、网络通信和数据库交互。

解决方案

理解浏览器和Node.js事件循环的区别，首先要抓住它们各自所处的运行环境和主要职责。这就像是两个不同领域的专家，虽然都精通“异步处理”这门学问，但他们的工作流程和关注点大相径庭。

浏览器事件循环： 在浏览器环境中，事件循环的核心是确保用户界面的响应性和流畅性。它主要处理以下几类任务：

1. 宏任务（Macrotasks）：包括setTimeout、setInterval、script（整体代码）、I/O操作、UI渲染、用户交互事件（如点击、滚动）等。这些任务通常由浏览器排队，并在每个事件循环迭代中执行一个。
2. 微任务（Microtasks）：包括Promise的回调（.then().catch().finally()）、MutationObserver的回调、queueMicrotask等。微任务的优先级高于宏任务，它们会在当前宏任务执行完毕后，下一个宏任务开始之前，被全部清空。这意味着，在一个宏任务执行期间产生的微任务，会立即在该宏任务之后执行，而不会等到下一个事件循环迭代。
3. 渲染：浏览器还有一个重要的职责就是渲染页面。渲染过程（包括样式计算、布局、绘制等）通常会在一个宏任务执行完毕，并且微任务队列被清空之后进行。这保证了页面更新能够及时响应JavaScript的修改。

Node.js事件循环： Node.js的事件循环则由libuv库实现，其设计目标是处理高并发的I/O操作，构建高性能的网络应用。它的事件循环被划分为多个明确的阶段（phases），每个阶段都有特定的任务：

1. timers（定时器阶段）：执行setTimeout和setInterval的回调。
2. pending callbacks（待定回调阶段）：执行一些系统操作的回调，例如TCP连接错误。
3. idle, prepare（空闲、准备阶段）：内部使用。
4. poll（轮询阶段）：这是事件循环中最重要的阶段之一。它会检查新的I/O事件，并执行I/O相关的回调（例如文件读取、网络请求回调）。如果此阶段队列为空，且有setImmediate回调，它会直接进入check阶段；如果没有setImmediate回调，它可能会在此阶段等待新的I/O事件到来，或者根据定时器是否到期进入timers阶段。
5. check（检查阶段）：执行setImmediate的回调。
6. close callbacks（关闭回调阶段）：执行socket.on('close')等关闭事件的回调。

在Node.js中，微任务（Promise回调）和process.nextTick的回调，其执行时机略有不同：

• process.nextTick：它的优先级极高，会在当前执行栈清空后，立即执行，甚至比微任务队列（Promise）还要早。它不属于任何事件循环阶段。
• Promise回调：作为微任务，它们会在每个事件循环阶段结束时，以及在process.nextTick回调执行之后被清空。

总的来说，浏览器事件循环更像是一个循环往复的“宏任务 -> 微任务 -> 渲染”的流程，而Node.js事件循环则是一个有明确阶段划分的循环，每个阶段都有特定的任务和优先级。

为什么浏览器和Node.js需要不同的事件循环机制？

在我看来，这完全是出于它们各自“生存环境”和“核心使命”的考量。浏览器作为用户与互联网交互的窗口，最看重的是用户体验：页面不能卡顿，动画要流畅，用户的点击要立刻有反馈。这意味着它的事件循环必须优先处理UI渲染和用户输入，确保主线程不会长时间被阻塞。你总不希望一个复杂的计算导致页面半天不动吧？所以，浏览器事件循环的设计，天然地将UI渲染和事件处理放在了非常重要的位置，宏任务和微任务的调度也是为了更好地平衡代码执行和页面更新。

Node.js则完全不同，它的战场是服务器端。服务器不需要渲染UI，也不需要响应用户的鼠标点击，它要处理的是大量的并发请求、文件操作、数据库查询等等。它的核心诉求是高吞吐量和低延迟。为了实现这一点，Node.js的事件循环（由libuv实现）被设计成一个高度优化的I/O多路复用模型。它将不同的I/O操作细化到不同的阶段去处理，比如定时器、网络I/O、文件I/O等，这样可以更高效地管理资源，避免因为某个I/O操作耗时过长而阻塞整个服务。可以说，Node.js的事件循环机制是为了“榨干”系统I/O的潜力而生的。

这两种设计哲学，虽然都基于事件驱动和非阻塞，但因其目标不同，最终演化出了两种截然不同的事件循环实现。

process.nextTick 与 Promise 在Node.js事件循环中的优先级如何体现？

在Node.js中，process.nextTick和Promise的回调虽然都属于“微任务”范畴，但它们之间的优先级差异是Node.js事件循环中一个非常微妙且重要的点。我的理解是，process.nextTick更像是一种“插队”机制，它拥有比Promise更高的执行优先级。

具体来说，当Node.js执行栈中的代码执行完毕后，在事件循环进入下一个阶段之前，它会优先清空process.nextTick队列。只有当process.nextTick队列为空后，才会去处理Promise的微任务队列。

我们可以通过一个简单的例子来观察这种优先级：

console.log('Start');

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

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

process.nextTick(() => {
  console.log('process.nextTick callback');
});

console.log('End');

这段代码的输出通常会是：

Start
End
process.nextTick callback
Promise callback
setTimeout callback

从输出可以看出：

1. Start和End是同步代码，立即执行。
2. process.nextTick的回调紧随同步代码之后执行，因为它具有最高的优先级，在当前执行栈清空后立刻执行。
3. Promise的回调在process.nextTick之后执行，因为它属于微任务队列，会在当前阶段（或当前执行栈）结束后，nextTick清空后才处理。
4. setTimeout的回调最后执行，因为它是一个宏任务，需要等到事件循环进入timers阶段才能被处理。

这个优先级机制，让开发者在Node.js中有了更细粒度的控制，可以在某些场景下，确保某些回调在当前操作完成但又不希望进入下一个事件循环阶段时立即执行。

浏览器中的requestAnimationFrame和Node.js中的setImmediate分别扮演什么角色？

这两个API，一个在浏览器，一个在Node.js，它们都是为了“推迟执行”而生，但目的和时机完全不同，这恰恰反映了它们各自环境的特点。

浏览器中的requestAnimationFrame (rAF)： 对我来说，requestAnimationFrame是浏览器为了实现流畅动画而提供的“神器”。它的核心作用是告诉浏览器你希望执行一个动画，并让浏览器在下一次重绘之前调用你指定的回调函数。关键在于，这个回调的执行时机是与浏览器的渲染周期同步的。

想象一下，如果你用setTimeout(..., 16)来做动画（假设60fps），你无法保证每次回调都在浏览器准备渲染前执行，这可能导致动画卡顿或撕裂。但rAF会聪明地等待浏览器准备好渲染时才调用你的函数，这样你就可以在最佳时机更新动画帧，从而获得最平滑的视觉效果。它不是一个简单的宏任务或微任务，而是浏览器为了优化渲染性能而特意设计的，它通常在样式计算、布局之后，绘制之前执行。

Node.js中的setImmediate：setImmediate在Node.js中则扮演了一个完全不同的角色。它的设计初衷是为了在当前事件循环的poll阶段结束后，下一个close callbacks阶段之前，执行一个回调。它的名字有点迷惑性，因为“immediate”听起来好像会立即执行，但实际上它并不是立即执行的，而是被安排在事件循环的特定阶段。

setImmediate最常见的用途是打破长运行的同步操作，将任务分解到下一个事件循环迭代中，或者在某些I/O密集型操作中，确保回调在所有I/O事件处理完毕后，但又不想等下一个setTimeout(0)周期时执行。

例如，如果你有一个需要处理大量数据的同步函数，你可以在其中使用setImmediate来分批处理，避免阻塞事件循环：

function processLargeArray(array) {
  let i = 0;
  function doChunk() {
    const chunkEnd = Math.min(i + 100, array.length);
    for (; i < chunkEnd; i++) {
      // 处理 array[i]
      // console.log(`Processing: ${array[i]}`);
    }

    if (i < array.length) {
      setImmediate(doChunk); // 安排在下一个 check 阶段执行
    } else {
      console.log('Array processing finished.');
    }
  }
  doChunk();
}

// 示例调用
// processLargeArray(new Array(10000).fill(0).map((_, idx) => idx));

在这个例子中，setImmediate确保了每处理100个元素后，事件循环有机会处理其他待处理的I/O事件，从而保持Node.js应用的响应性。它与setTimeout(0)的区别在于，setImmediate在check阶段执行，而setTimeout(0)在timers阶段执行，它们的执行顺序在特定条件下会有差异。

总结来说，requestAnimationFrame是浏览器为了“美观”而生，旨在提供最佳的视觉体验；而setImmediate是Node.js为了“效率”而生，旨在优化服务器端的异步流程控制。它们各自服务于其独特环境下的核心需求。

以上就是《浏览器事件循环vsNode.js事件循环》的详细内容，更多关于的资料请关注golang学习网公众号！