js事件循环Event Loop机制

浏览器环境下js引擎的事件循环机制

执行栈与事件队列

• 当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分。堆里存放着一些对象，而栈中则存放着一些基础类型变量以及对象的指针。而执行栈与此不同。
• 执行同步方法时：当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。当一系列同步方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。
• 执行异步方法时：异步方法会被加入事件队列中，等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”。
  
  总结：事件循环指得是，执行同步方法和异步方法时，同步方法加入执行栈，异步方法加入事件队列。当执行栈所有任务完成时再查找事件队列，将事件回调加入执行栈继续执行，形成一个循环过程。
  

macro task与micro task

异步任务被分为两类：微任务（micro task）和宏任务（macro task）。

• 微任务：new Promise()、new MutaionObserver()
• 宏任务：setInterval()、setTimeout()
  
  同一次事件循环中，微任务永远在宏任务之前执行。
  

node环境下的事件循环机制

与浏览器环境的区别

在node中，事件循环表现出的状态与浏览器中大致相同。不同的是node中有一套自己的模型。node中事件循环的实现是依靠的libuv引擎。我们知道node选择chrome v8引擎作为js解释器，v8引擎将js代码分析后去调用对应的node api，而这些api最后则由libuv引擎驱动，执行对应的任务，并把不同的事件放在不同的队列中等待主线程执行。 因此实际上node中的事件循环存在于libuv引擎中。

事件循环模型

┌───────────────────────┐
┌─>│ timers │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ I/O callbacks │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ idle, prepare │
│ └──────────┬────────────┘ ┌───────────────┐
│ ┌──────────┴────────────┐ │ incoming: │
│ │ poll │<──connections─── │
│ └──────────┬────────────┘ │ data, etc. │
│ ┌──────────┴────────────┐ └───────────────┘
│ │ check │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
└──┤ close callbacks │
└───────────────────────┘

事件循环各阶段

外部输入数据–>轮询阶段(poll)–>检查阶段(check)–>关闭事件回调阶段(close callback)–>定时器检测阶段(timer)–>I/O事件回调阶段(I/O callbacks)–>闲置阶段(idle, prepare)–>轮询阶段…

参考

https://zhuanlan.zhihu.com/p/33058983