事件循环机制Event Loop（JavaScript，Node)

事件循环机制Event Loop

Event Loop即事件循环，是解决javaScript单线程运行阻塞的一种机制。

javascript是单线程。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

同步任务和异步任务

JavaScript任务分为两种：同步任务，异步任务

同步任务是调用立即得到结果的任务，同步任务在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务是调用无法立即得到结果，需要额外的操作才能预期结果的任务，异步任务不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

JS引擎遇到异步任务（DOM事件监听、网络请求、setTimeout计时器等），会交给相应的线程单独去维护异步任务，等待某个时机（计时器结束、网络请求成功、用户点击DOM），然后由事件触发线程将异步对应的回调函数加入到消息队列中，消息队列中的回调函数等待被执行。

宏任务和微任务

宏队列，macrotask，也叫tasks。一些异步任务的回调会依次进入macrotask queue，等待后续被调用，这些异步任务包括：

setTimeout
setInterval
setImmediate (Node独有)
requestAnimationFrame (浏览器独有)
I/O
UI rendering (浏览器独有)

微队列，microtask，也叫jobs。另一些异步任务的回调会依次进入microtask queue，等待后续被调用，这些异步任务包括：

process.nextTick (Node独有)
Promise
Object.observe
MutationObserver
进一步理解：
实现的具体流程描述：

执行全局Script同步代码
全局Script代码执行完毕后，调用栈Stack会清空；
从微队列microtask queue中取出位于队首的回调任务，放入调用栈Stack中执行，执行完后microtask queue长度减1；
继续取出位于队首的任务，放入调用栈Stack中执行，以此类推，直到直到把microtask queue中的所有任务都执行完毕。注意，如果在执行microtask的过程中，又产生了microtask，那么会加入到队列的末尾，也会在这个周期被调用执行；
microtask queue中的所有任务都执行完毕，此时microtask queue为空队列，调用栈Stack也为空；
取出宏队列macrotask queue中位于队首的任务，放入Stack中执行；
执行完毕后，调用栈Stack为空；

console.log(1);

setTimeout(() => {
//setTimeout属于macrotask，放到macrotask queue中
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
//这里是同步执行
  console.log(4)
  resolve(5)
}).then((data) => {
//promise属于microtask，所以放到microtask queue中
  console.log(data);
})

setTimeout(() => {
  console.log(6);
})

console.log(7);
/* 结果：
     1
     4
     7
     5
     2
     3
     6
*/

在执行微队列microtask queue中任务的时候，如果又产生了microtask，那么会继续添加到队列的末尾，也会在这个周期执行，直到microtask queue为空停止。
注意：如果在microtask中不断的产生microtask，那么其他宏任务macrotask就无法执行了，但是这个操作也不是无限的，拿NodeJS中的微任务process.nextTick()来说，它的上限是1000个。

Node中的Event Loop

NodeJS中的宏队列和微队列

Node的Event Loop中，执行宏队列的回调任务有6个阶段，如下图：
在这里插入图片描述
各个阶段执行的任务如下：

timers阶段：这个阶段执行setTimeout和setInterval预定的callback
I/O callback阶段：执行除了close事件的callbacks、被timers设定的 callbacks、setImmediate()设定的callbacks这些之外的callbacks
idle, prepare阶段：仅node内部使用
poll阶段：获取新的I/O事件，适当的条件下node将阻塞在这里
check阶段：执行setImmediate()设定的callbacks
close callbacks阶段：执行socket.on(‘close’, …)这些callbacks

NodeJS中宏队列主要有4个

由上面的介绍可以看到，回调事件主要位于4个macrotask queue中：

Timers Queue
IO Callbacks Queue
Check Queue
Close Callbacks Queue

这4个都属于宏队列，但是在浏览器中，可以认为只有一个宏队列，所有的macrotask都会被加到这一个宏队列中，但是在NodeJS中，不同的macrotask会被放置在不同的宏队列中。

NodeJS中微队列主要有2个：

Next Tick Queue：是放置process.nextTick(callback)的回调任务的
Other Micro Queue：放置其他microtask，比如Promise等

在浏览器中，也可以认为只有一个微队列，所有的microtask都会被加到这一个微队列中，但是在NodeJS中，不同的microtask会被放置在不同的微队列中。

NodeJS的Event Loop过程描述：

执行全局Script的同步代码
执行microtask微任务，先执行所有Next Tick Queue中的所有任务，再执行Other Microtask Queue中的所有任务
开始执行macrotask宏任务，共6个阶段，从第1个阶段开始执行相应每一个阶段macrotask中的所有任务，注意，这里是所有每个阶段宏任务队列的所有任务，在浏览器的Event Loop中是只取宏队列的第一个任务出来执行，每一个阶段的macrotask任务执行完毕后，开始执行微任务，也就是步骤2
Timers Queue -> 步骤2 -> I/O Queue -> 步骤2 -> Check Queue -> 步骤2 -> Close Callback Queue -> 步骤2 -> Timers Queue …

console.log('start');

setTimeout(() => {          // 宏队列的Timers Queue
  console.log(1);
  setTimeout(() => {        // 微队列的Next Tick Queue
    console.log(2);
  }, 0);
  setImmediate(() => {      // 宏队列的 Check Queue
    console.log(3);
  })
  process.nextTick(() => {  //微队列的Next Tick Queue
    console.log(4);  
  })
}, 0);

setImmediate(() => {        //宏队列的 Check Queue
  console.log(5);
  process.nextTick(() => {  // 微队列的Next Tick Queue
    console.log(6);  
  })
})

setTimeout(() => {           // 宏队列的Timers Queue        
  console.log(7);
  process.nextTick(() => {  //微队列的Next Tick Queue
    console.log(8);   
  })
}, 0);

process.nextTick(() => {    // 微队列的Next Tick Queue
  console.log(9);  
})

console.log('end');
/*结果：
		start
		end
		9
		1
		7
		4
		8
		5
		3
		6
		2
		*/

setTimeout 对比 setImmediate

setTimeout(fn, 0)在Timers阶段执行，并且是在poll阶段进行判断是否达到指定的timer时间才会执行
setImmediate(fn)在Check阶段执行

两者的执行顺序要根据当前的执行环境才能确定：

如果两者都在主模块(main module)调用，那么执行先后取决于进程性能，顺序随机
如果两者都不在主模块调用，即在一个I/O Circle中调用，那么setImmediate的回调永远先执行，因为会先到Check阶段

setImmediate 对比 process.nextTick

setImmediate(fn)的回调任务会插入到宏队列Check Queue中
process.nextTick(fn)的回调任务会插入到微队列Next Tick Queue中
process.nextTick(fn)调用深度有限制，上限是1000，而setImmedaite则没有

builder2991

发布了102 篇原创文章 · 获赞 252 · 访问量 2万+

私信关注