浏览器与 Node 的事件循环-阿里云开发者社区

浏览器与 Node 的事件循环

2024-11-11 37

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云原生网关 MSE Higress，422元/月

函数计算FC，每月15万CU 3个月

可观测监控 Prometheus 版，每月50GB免费额度

简介： 浏览器和Node.js的事件循环是异步操作的核心机制。它们通过管理任务队列和回调函数，确保程序在处理耗时任务时不会阻塞主线程，从而实现高效、响应式的应用开发。

浏览器中的事件循环
- 执行栈（Call Stack）
  - 执行栈是一个后进先出（LIFO）的数据结构，用于存储在代码执行期间创建的函数调用。当一个函数被调用时，它就会被添加到执行栈的顶部，当这个函数执行完成后，它就会从执行栈的顶部被移除。例如，在下面的JavaScript代码中：
```
function foo() {
         
console.log('foo');
}
function bar() {
         
foo();
}
bar();
```
  - 首先bar函数被调用并压入执行栈，在bar函数内部调用foo函数，foo函数又被压入执行栈，当foo函数执行完毕（打印foo后），它从执行栈弹出，然后bar函数执行完毕也从执行栈弹出。
- 任务队列（Task Queue）
  - 任务队列分为宏任务队列（Macro - task Queue）和微任务队列（Micro - task Queue）。宏任务包括script（整体代码）、setTimeout、setInterval、I/O操作、postMessage、MessageChannel等。微任务包括Promise.then、MutationObserver等。
  - 当执行栈为空时，事件循环会检查微任务队列。如果微任务队列中有任务，就会将微任务队列中的任务依次取出并压入执行栈执行，直到微任务队列为空。例如：
```
console.log('start');
Promise.resolve().then(() => {
         
console.log('micro - task');
});
setTimeout(() => {
         
console.log('macro - task');
}, 0);
console.log('end');
```
  - 输出顺序是start、end、micro - task、macro - task。因为Promise.then中的任务是微任务，会在执行栈为空后且在检查宏任务队列之前执行，而setTimeout中的任务是宏任务，会在微任务队列清空后且执行栈再次为空时执行。
- 渲染（Render）
  - 浏览器通常会在一个宏任务执行完毕后，且在执行下一个宏任务之前进行渲染。不过，这也不是绝对的，浏览器会根据自身的优化策略和任务的紧急程度等来决定是否进行渲染。例如，在一个复杂的动画场景中，浏览器可能会更频繁地进行渲染以保证动画的流畅性。
Node.js中的事件循环
- 阶段（Phases）
  - Node.js的事件循环分为6个阶段，分别是timers、pending callbacks、idle, prepare、poll、check、close callbacks。
  - timers阶段：这个阶段会执行setTimeout和setInterval的回调函数。需要注意的是，这些回调函数的执行时机并不是严格按照设置的时间来的，而是在进入timers阶段且满足时间条件时才会执行。例如，如果在setTimeout回调函数之前有一个长时间运行的同步操作，那么setTimeout回调函数可能会延迟执行。
  - pending callbacks阶段：处理一些系统操作（如TCP错误回调等）的回调函数，这些回调函数在之前的轮询中可能没有被处理完。
  - idle, prepare阶段：这是内部使用的阶段，主要用于一些准备工作。
  - poll阶段：这是一个比较复杂的阶段。它主要有两个功能。一是等待新的I/O事件；二是在适当的时候执行与I/O相关的回调函数。如果没有新的I/O事件，它会检查timers阶段是否有到期的定时器，如果有就会回到timers阶段执行定时器的回调函数。
  - check阶段：主要用于执行setImmediate的回调函数。setImmediate是Node.js特有的一个函数，它的回调函数会在check阶段执行。
  - close callbacks阶段：用于执行close事件的回调函数，比如socket.on('close', callback)中的callback函数。
- Node.js与浏览器事件循环的区别
  - 任务类型的差异：Node.js有自己独特的任务阶段划分，如setImmediate和process.nextTick。process.nextTick是一个特殊的微任务，它会在当前操作完成后立即执行，甚至优先于其他微任务。而浏览器没有setImmediate和process.nextTick这些概念。
  - I/O处理的重点不同：Node.js更侧重于服务器端的I/O处理，事件循环的设计也更注重高效处理大量的I/O请求。例如，在Node.js的poll阶段，对I/O事件的等待和处理是核心功能之一。而浏览器的事件循环主要是为了处理用户交互、页面渲染以及网络请求等浏览器相关的任务。

浏览器与 Node 的事件循环

云原生

热门文章

最新文章

相关课程

相关电子书

相关实验场景