深入解析JavaScript事件循环机制：从单线程到Node.js

JavaScript单线程模型与Web Worker

本文通过具体实例深入剖析JavaScript中事件循环机制的核心原理与实际应用，以下是完整的技术解析内容。

var start = new Date()
setTimeout(function () {
 var end = new Date
 console.log('Time elapsed:', end - start, 'ms')
}, 500)
while (new Date() - start < 1000) {
}

其他语言如Java，在java.util.Timer中实现定时任务时，通常采用多线程方案。任务对象被存储在任务队列中，由专门的调度线程在新建的子线程内执行具体任务。

JavaScript语言本身的设计决定了它是单线程执行的。

JavaScript的核心应用场景在于与用户进行交互以及操作DOM元素。这种设计定位决定了它必须保持单线程特性，否则将引发极其复杂的同步与状态冲突问题。

为了充分利用多核CPU的计算资源，HTML5规范提出了Web Worker标准。该标准允许JavaScript脚本创建多个工作线程，但子线程完全受主线程控制，且严禁直接操作DOM。因此，Web Worker并未改变JavaScript单线程运行的本质。

调用栈与事件循环基础

理解事件循环需要掌握两个核心概念：函数调用栈和任务队列。

调用栈是JavaScript引擎执行代码时的重要数据结构。

当JavaScript执行代码时会构建调用栈。每次调用函数时，返回地址、参数以及本地变量都会被压入栈中。如果当前运行的函数内部调用了另一个函数，新函数的相关信息会被压入栈顶。当该函数执行完毕后，其内容会从调用栈中弹出，变量也随之释放。需要注意的是，复杂类型的数据实际存放在堆内存中，因此从栈中弹出的仅是指向堆内存的指针，具体数值仍由垃圾回收机制（GC）决定何时回收。

事件循环（event loop）与任务队列（task queue）共同构成了异步执行的基石。

JavaScript的主线程包含一个执行栈和一个任务队列。

当代码遇到异步操作（如setTimeout、AJAX请求）时，这些操作会交由浏览器或操作系统执行。浏览器在异步任务完成后，会将预先定义的回调函数推入主线程的任务队列（task queue）中。一旦主线程的执行栈清空，引擎便会从任务队列中读取回调函数并执行。当任务队列处理完毕后，主线程继续执行后续代码，这一过程无限循环，即事件循环机制。

主线程的执行栈与任务队列交替执行，共同构成了事件循环的核心逻辑。

setTimeout执行机制分析

关于setTimeout的执行时机，有明确的结论。

setTimeout()的作用仅仅是将事件插入到“任务队列”中。主线程必须等待当前代码（即执行栈中的同步代码）完全执行完毕后，才会去执行任务队列中指定的回调函数。如果当前同步代码耗时较长，回调函数的执行可能会被延迟很久，因此无法保证回调函数一定会在setTimeout()指定的时间精确执行。

通过另一个具体代码示例可以进一步验证这一机制。

(function test() {
 setTimeout(function() {console.log(4)}, 0);
 new Promise(function executor(resolve) {
 console.log(1);
 for( var i=0 ; i<10000 ; i++ ) {
 i == 9999 && resolve();
 }
 console.log(2);
 }).then(function() {
 console.log(5);
 });
 console.log(3);
})()

宏任务与微任务执行顺序

异步任务被明确分类为宏任务（macrotask）和微任务（microtask）。

在挂起任务时，JavaScript引擎会将所有异步任务按照类别分配到宏任务队列和微任务队列中。执行流程如下：首先从宏任务队列（也称为task queue）中取出第一个任务执行；执行完毕后，立即取出微任务队列中的所有任务并按顺序执行；随后再取下一个宏任务，如此周而复始，直到两个队列中的任务全部处理完毕。

常见的宏任务（macro-task）包括：script（整体代码）、setTimeout、setInterval、setImmediate、I/O操作、UI渲染等。常见的微任务（micro-task）包括：process.nextTick、Promises（指浏览器实现的原生Promise）、Object.observe、MutationObserver等。

关于宏任务与微任务的执行顺序，结论如下。

执行顺序遵循：全部代码（script，属于宏任务） -> 微任务队列（包含promise.then等） -> 宏任务（如setTimeout） -> 下一个微任务。

Node.js事件循环特性

Node.js环境下的事件循环机制与浏览器环境存在差异。

在Node.js中，process.nextTick与setImmediate的行为尤为关键。

process.nextTick指定的任务总是会在所有其他异步任务之前执行。

setImmediate指定的任务则总是在下一次Event Loop迭代时执行。

process.nextTick(function A() {
 console.log(1);
 process.nextTick(function B(){console.log(2);});
});
setTimeout(function timeout() {
 console.log('TIMEOUT FIRED');
}, 0)

new Promise(function(resolve) {
 console.log('glob1_promise');
 resolve();
}).then(function() {
 console.log('glob1_then')
})
process.nextTick(function() {
 console.log('glob1_nextTick');
})