JS浏览器事件循环机制以及node事件循环机制

js特性

单线程：只有一个主线程来处理任务
非阻塞：当执行异步任务时，不必等到结果返回，主线程会pending这个任务，然后根据一定规则执行回调函数（事件循环机制）

任务分类

同步任务：会立即执行的任务
异步任务：不会立即执行的任务，异步任务可细分为以下2种任务
-- 宏任务：script, setTimeout, setInterval, setImmeditate, T/O, UI rendering
-- 微任务：process, nextTick, promise.then(), object.observe, MutationObserver

执行栈&事件队列（任务队列）

执行栈：后进先出的数据结构，当函数被调用时添加到执行栈顶部，执行结束，从栈顶移出。当一个任务为同步任务时，则会被立即执行，执行完移出栈；如果是异步任务，则会交给异步处理模块处理，当异步任务回调到达触发条件时，会将回调函数添加到任务队列中，如果是宏任务，则添加到宏任务队列中，如果是为任务队列，则添加到微任务队列中。
事件队列（任务队列）：任务队列读取任务的顺序为宏任务-微任务（微任务队列全部执行结束才进入到下一轮宏任务）-宏任务-微任务的顺序；当执行栈中的任务全部完成之后会从事件队列中读取一个任务添加到执行栈。一个任务队列中可以有多个宏任务队列，但只能有一个微任务队列。
当第一次事件循环时，会将script代码作为宏任务执行，执行栈中的任务执行结束之后，会从微任务队列中获取任务，直到微任务队列中的任务全部执行结束，再从宏任务队列中获取。

image.png

这里补充一点vue的相关知识

vue的dom操作是异步的。监听到vue的数据变化，vue会开启一个队列，缓冲所有的数据变更；当同一个Watcher被触发多次时，只会向队列中添加一次。
vue内部对异步的实现使用Promise.then、MutationObserver、setImmediate,若执行环境不支持上述方法，则使用setTimeout(fn, 0)。
因为DOM更新是异步的，所以在修改了vue数据之后，不会立刻获取到更新后的DOM，可以在nextTick中获取到修改时之后的DOM。
比如：

    <span ref="aText">{{ a }}</span>
    <el-button @click="numberAdd">点击</el-button>
    data: function() {
        return {
           a: 1        
        }
    },
    numberAdd: function() {
      this.a = this.a + 1
      console.info(this.$el.textContent) // 1 点击
      this.$nextTick(() => {
        console.info(this.$el.textContent) // 2 点击
      })
    },
// 如果我们改一下代码，循环修改this.a 的值，那么会发现DOM 只会更新一次，即当同一个Watcher被触发多次时，只会向队列中添加一次。
numberAdd: function() {
      for (let i = 0; i < 10; i++) {
        this.a = this.a + 1
        console.info(this.$el.textContent)
        this.$nextTick(() => {
          console.info(this.$el.textContent)
        })
      }
    },

node事件循环

事件循环是 Node.js 处理非阻塞 I/O 操作的机制。当 Node.js 启动后，它会初始化事件循环，处理已提供的输入脚本，它可能会调用一些异步的 API、调度定时器，或者调用 process.nextTick()，然后开始处理事件循环。
下图是node官网的事件循环图示

node事件循环

每个框框代表一个阶段。

poll（轮询阶段）：检查新的I/O事件；执行与I/O相关的回调（几乎所有情况下，除了关闭的回调函数、计时器、setImmediate之外，其余情况会在此阻塞）
check(检查阶段)：setImmediate()的回调函数会在此执行。
close callbacks(关闭事件回调阶段)：一些关闭的回调函数，如socket.on('close', ...)。
timers（定时器执行阶段）：已经被调度的setTimeout()和setInterval()的回调函数
pending callbacks（待定回调阶段）：执行延迟到下一个循环迭代的I/O回调。（如一些TCP错误回调，ECONNREFUSED）

轮询阶段（poll）

轮训阶段两大功能：
1、计算应该阻塞和轮询I/O的时间。
2、处理轮询队列里的事件。
当事件进入轮训阶段且没有被调度的计时器时：

轮询队列不是空的：事件循环将循环访问回调队列并同步执行，直到队列用尽，或者达到系统相关的硬性限制。（轮询队列中如果存在异步操作时，防止轮询饿死事件循环，libuv在停止轮询以获取更多时间之前，还有一个硬性最大值，这个最大值依赖于系统。）
轮询队列是空的：如果脚本被setImmediate()调度，则事件循环将结束轮训阶段进入检查阶段（check）执行回调。如果脚本未被setImmediate()调度，则事件循环将等待回调被添加到队列中，然后立即执行。

检查阶段（check）

setImmediate()实际上是一个在事件循环的单独阶段运行的特殊计时器。回调在轮询阶段完成后执行。如果轮询阶段变为空闲状态，则会直接结束轮询阶段，到达检查阶段。

关闭事件回调阶段（close callbacks）

如果套接字或处理函数突然关闭（如socket.destroy()），则'close'事件将在这个阶段发出。否则他将通过process.nextTick()发出。
process.nextTick()在进入下一阶段时都会执行