返回
浏览器与NodeJS中的EventLoop差异：彻底了解微任务的执行时机
前端
2023-09-23 11:49:49
EventLoop在浏览器与NodeJS的区别
在web开发的世界中，EventLoop是一种机制，它允许应用程序异步处理事件和回调，而不会阻塞主线程。EventLoop在浏览器和NodeJS环境中扮演着至关重要的角色，但两者之间存在着一些关键差异，影响着微任务（microtasks）的执行时机。
NodeJS中的EventLoop
在NodeJS中，EventLoop使用单线程模型，这意味着应用程序中的所有任务都在同一个线程中顺序执行。当事件循环开始时，它会检查事件队列，该队列包含要处理的事件和回调。
- 同步任务： 首先，事件循环执行同步任务，这些任务不会将控制权让给EventLoop。这些任务包括顶层函数和文件模块的同步代码。
- 微任务： 在处理完同步任务后，事件循环会执行微任务。微任务是添加到当前事件循环事件队列中的特殊任务，通常由
Promise.resolve()、process.nextTick()和setImmediate()函数创建。 - 宏任务： 最后，事件循环会处理宏任务，这些任务是较长运行的任务，例如IO操作、定时器和
setTimeout()回调。
在NodeJS版本11及更高版本中，微任务会在处理完同步任务后立即执行，这与浏览器的行为一致。然而，在NodeJS版本10及更低版本中，微任务会在执行所有宏任务后再执行。
浏览器中的EventLoop
与NodeJS不同，浏览器中的EventLoop是一个多线程模型，它利用多个线程来并行处理任务。这使得浏览器能够同时处理用户界面交互和后台任务。
- 渲染线程： 渲染线程负责更新浏览器界面，响应用户交互。它执行JavaScript代码并构建DOM树。
- JS引擎线程： JS引擎线程负责执行JavaScript代码。它将JavaScript代码编译成机器代码，并执行函数调用。
- 任务队列： 任务队列是一个包含要执行的回调的队列。这些回调可能是由事件监听器、
setTimeout()或setInterval()函数注册的。 - 微任务队列： 微任务队列是一个包含微任务的队列。这些微任务通常由
Promise.resolve()或MutationObserver函数创建。
浏览器中的事件循环与NodeJS的事件循环类似，但有一些关键的区别：
- 多线程： 浏览器中的EventLoop利用多线程，允许并行执行任务。
- 微任务的执行时机： 在浏览器中，微任务会在处理完渲染线程中的同步任务后立即执行。这意味着微任务比宏任务优先执行，即使宏任务已经添加到事件循环中。
结论
NodeJS和浏览器的EventLoop在处理事件和回调的方式上存在差异，这些差异影响着微任务的执行时机。在NodeJS版本11及更高版本中，微任务的行为与浏览器一致。然而，在NodeJS版本10及更低版本中，微任务会在执行所有宏任务后再执行。了解这些差异对于编写高效且响应迅速的Web应用程序至关重要。
