Node.js和浏览器的事件循环有什么区别?

更新日期: 2026-04-06 阅读: 21 标签: 事件

事件循环是JavaScript运行的核心机制。Node.js和浏览器都有事件循环,它们的基本思路是一样的:单线程、队列、回调。但具体实现和优先级差别不小。下面从实际开发和面试的角度来对比一下。


一句话概括

浏览器是宏任务加微任务的简单模型。Node.js是6个阶段加两种微任务队列,更复杂一些。


浏览器的事件循环

浏览器的模型比较简单。流程是这样的:

  1. 执行一个宏任务(比如script、setTimeout、I/O)

  2. 执行所有微任务(Promise.then、MutationObserver)

  3. 如果需要就渲染页面

  4. 进入下一个循环

看个例子:

console.log('1');

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

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

console.log('4');

输出结果是:1, 4, 3, 2

关键点有两个:微任务优先级高于宏任务。每个宏任务执行完后,都会清空微任务队列。


Node.js的事件循环

Node.js不是简单的宏任务和微任务。它分成6个阶段,按顺序循环执行。

六个阶段

顺序是这样的:

  1. timers(setTimeout、setInterval)

  2. pending callbacks(系统回调)

  3. idle、prepare(内部使用)

  4. poll(I/O核心阶段)

  5. check(setImmediate)

  6. close callbacks(关闭回调)

每个阶段都有自己的队列。整体流程是:timers → pending → poll → check → close,然后循环继续。

Node.js的微任务

Node.js有两个微任务队列:

第一个是process.nextTick,优先级最高。第二个是Promise.then,普通微任务。

执行规则是:当前阶段执行完后,先执行nextTick队列,再执行Promise微任务,然后才进入下一个阶段。

看个面试经常出现的例子:

setTimeout(() => console.log('timeout'));

setImmediate(() => console.log('immediate'));

process.nextTick(() => console.log('nextTick'));

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

在Node里输出顺序是:nextTick、promise、然后是timeout或immediate(这两个的顺序不确定)。


浏览器和Node的对比

对比点浏览器Node.js
结构宏任务 + 微任务6个阶段
微任务类型PromisenextTick + Promise
微任务执行时机每个宏任务后每个阶段后
优先级最高Promiseprocess.nextTick
setImmediate没有
I/O处理简单poll阶段(核心)

容易踩坑的地方

nextTick会卡死事件循环

看这段代码:

function loop() {
  process.nextTick(loop);
}
loop();

这样写会导致I/O永远不执行,事件循环卡死。浏览器没有这个问题。

setTimeout和setImmediate的顺序

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

不同环境下顺序不一样。在主线程里执行,顺序不确定。在I/O回调里执行,setImmediate会更快。

const fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout(() => console.log('timeout'));
  setImmediate(() => console.log('immediate'));
});

这样写,immediate永远比timeout先输出。


面试总结

浏览器事件循环是宏任务加微任务的简单模型。每个宏任务执行完就清空微任务队列,然后可能渲染页面。

Node.js基于libuv,分成timers、poll、check等多个阶段。微任务也不一样,有process.nextTick和Promise两个队列,nextTick优先级更高。每个阶段执行完后会先清空nextTick,再清空Promise,然后才进入下一个阶段。

理解这些区别,对排查Node.js应用的问题和做性能优化都有帮助。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/13597

相关推荐

js监听浏览器返回,pushState,popstate 事件,window.history对象

在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

如何在React中优雅的处理doubleClick?

上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法, 顺便分享给大家。解决办法也很简单: 延迟 click事件的处理, 直到判断这个click 不在 doubleClick 中。

js中addEventListener事件监听器参数详解

我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

js鼠标事件参数,获取鼠标在网页中的坐标

事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

Vue @click.native 的作用

首先, @click.native 是给组件绑定原生事件,只能用在组件上,不可以用在原生元素上。在组件上绑定@click=clickCpn事件,click事件无法触发也不生效

js 冒泡事件与解决冒泡事件

事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。取消事件冒泡有两种方式:e.stopPropagation(); window.event.cancelBubble=true;

手写事件代理函数

面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数,它是通过事件冒泡机制,即子元素上触发的事件会冒泡到父级上, 即父级也会触发该类型的事件

Js事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数

js事件冒泡和默认事件处理(原生js、vue)

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!