Node与浏览器EventLoop的差异

51 阅读8分钟

在说到node与浏览器EventLoop的差异时,首先不得不提一下进程和线程。

进程和线程

一个进程里面可以有多个线程,线程是一个进程中代码的不同执行路线,一个进程的内存空间是共享的,每个线程都可用这些共享内存。进程是CPU资源分配的最小单位,线程是CPU调度的最小单位。

浏览器内核

浏览器内核是通过取得页面内容、整理信息、计算和组合最终输出可视化的图像结果,通常也被称为渲染引擎。一个浏览器通常由以下常驻进程组成:

  • GUI渲染进程
  • JavaScript引擎线程
  • 定时触发器线程
  • 事件触发线程
  • 异步http请求线程

GUI渲染进程

主要负责页面的渲染,解析HTML、CSS,构建DOM树,布局和绘制等。
当界面需要重绘或者由于某种操作引发回流时,将执行该线程。
该线程与JS引擎线程互斥,当执行JS引擎线程时,GUI渲染会被挂起,当任务队列空闲时,JS引擎才会去执行GUI渲染。

JavaScript引擎线程

该线程主要负责处理JavaScript脚本,执行代码。
也是主要负责执行准备好待执行的事件,即定时器计数结束,或者异步请求成功并正确返回时,将依次进入任务队列,等待JS引擎线程的执行。
当然,该线程与GUI渲染线程互斥,当JS引擎线程执行JavaScript脚本时间过长,将导致页面渲染的阻塞。

定时触发器线程

负责执行异步定时器一类的函数的进程,如:setTimeout, setTimeInterval。
主线程依次执行代码时,遇到定时器,会将定时器交给该线程处理,当计数完毕后,事件触发线程会将计数完毕后的事件加入到任务队列的尾部,等待JS引擎线程执行。

事件触发线程

主要负责将准备好的事件交给JS引擎线程执行。
比如setTimeout定时器计数结束,ajax等异步请求成功并触发回调函数,或者用户触发点击事件时,该线程会将整装待发的事件加入到任务队列的尾部,等待JS引擎线程执行。

异步http请求线程

负责执行异步请求一类的函数的线程,如:Promise, axios, ajax等。
主线程依次执行代码时,遇到异步请求,会将函数交给该线程处理,当监听到状态码变更,如果有回调函数,事件触发线程会将回调函数加入到任务队列的尾部,等待JS引擎线程执行

浏览器中的EventLoop

微任务和宏任务

事件循环中的异步队列有两种:宏任务队列和微任务队列。(宏任务队列可以为多个,微任务队列只能有一个)
常见的宏任务:setTimeout, setInterval, setImmediate, script(整体代码), I/O操作,UI渲染。
常见的微任务:new Promise().then(回调), process.nextTick, MutationObserver(html5新特性)等。

Event Loop过程解析

1)一开始执行栈空,我们可以把执行栈认为是一个存储函数调用的栈结构,遵循先进后出的原则。micro队列空,macro队列里有且仅有一个script脚本(整体代码)。

2)全局上下文(script标签)被推入执行栈,同步代码执行。在执行过程中,会判断是同步任务还是异步任务,通过对一些接口的调用,可以产生新的macro-task和micro-task, 它们会分别被推入各自的任务队列。同步代码执行完了,script脚本会被移出macro队列,这个过程本质上就是队列的macro-task的执行和出队的过程。

3)上一步我们出队的是一个macro-task,这一步我们处理的是micro-task。但需要注意的是:当macro-task出队时,任务是一个一个执行的;而micro-task出队时,任务是一队一队执行的。因此我们处理micro队列这一步,会逐个执行队列中的任务并把它出队,直到队列被清空。

4)执行渲染操作,更新界面

5)检查是否存在web worker任务, 如果有,则对其进行处理。

6)上述过程循环往复,直到两个队列都清空。

代码示例

Promise.resolve().then(() => {
  console.log('Promise1');
  setTimeout(() => {
    console.log('setTimeout2');
  }, 0)
})
setTimeout(() => {
  console.log('setTimeout1');
  Promise.resolve().then(() => {
    console.log('Promise2');
  })
}, 0)
// 执行结果:
// Promise1
// setTimeout1
// Promise2
// setTimeout2

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
setTimeout(() => {
  console.log(3);
}, 0);
new Promise((resolve, reject) => {
  console.log(4);
  resolve();
}).then(e => {
  console.log(5);
});
setTimeout(e => {
  console.log(6);
  new Promise((resolve, reject) => {
    console.log(7);
    resolve();
  }).then(e => {
    console.log(8);
  })
})
// 执行结果:
// 1
// 4
// 5
// 2
// 3
// 6
// 7
// 8

console.log('start')
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(function() {
  console.log('promise3')
})
console.log('end')
// 执行结果:
// start
// end
// promise3
// timer1
// promise1
// timer2
// promise2

Node中的Event Loop

Node.js采用V8作为js的解析引擎,而I/O处理方面使用了自己设计的libuv,libuv是一个基于事件驱动的跨平台抽象层,封装了不同操作系统一些底层特性,对外提供统一的API,事件循环机制也是它里面的实现。

Node.js的运行机制如下:

V8引擎解析JavaScript脚本
解析后的代码,调用Node API
libuv库负责Node API的执行。它将不同的任务分配给不同的线程,形成一个Event Loop(事件循环),以异步的方式将任务的执行结果返回给V8引擎。
V8引擎再将结果返回给用户。

六个阶段

libuv引擎中的事件循环可分为六个阶段,它们会按照顺序反复运行。每当进入某一个阶段的时候,都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量达到系统设定的阈值,就会进入下一个阶段。
node中的事件循环的顺序:外部输入数据-->轮询阶段(poll)-->检查阶段(check)-->关闭事件回调阶段(close callback)-->定时器检测阶段(timer)--> I/O事件回调阶段(I/O callbacks)-->闲置阶段(idle,prepare)-->轮询阶段(按照该顺序反复运行)-->...

  • times阶段:这个阶段执行timer(setTimeout,setInterval)的回调
  • I/O callbacks阶段:处理一些上一轮循环中的少数未执行的I/O回调
  • idle, prepare阶段:仅node内部使用
  • poll阶段:获取新的I/O事件,适当的条件下node将阻塞在这里
  • check阶段:执行setImmediate()的回调
  • close callbacks阶段:执行socket的close事件回调
  • 1)timer
  • timers阶段会执行setTimeout和setInterval回调,并且是由poll阶段控制的。同样,在Node中定时器指定的时间也不是准确时间,只能是尽快执行。
  • 2)poll
  • poll是一个至关重要的阶段,这一阶段中,系统会做两件事情
  • 回到timer阶段执行回调,执行I/O回调
  • 3)check阶段
  • setImmediate()的回调会被加入check队列中,check阶段的执行顺序在poll阶段之后。

代码示例:

console.log('start')
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(function() {
  console.log('promise3')
})
console.log('end')
//start=>end=>promise3=>timer1=>timer2=>promise1=>promise2
  • 一开始执行栈的同步任务(这属于宏任务)执行完毕后(依次打印出 start end,并将 2 个 timer 依次放入 timer队列),会先去执行微任务(这点跟浏览器端的一样),所以打印出 promise3
  • 然后进入 timers 阶段,执行 timer1 的回调函数,打印 timer1,并将 promise.then 回调放入 microtask 队列,同样的步骤执行 timer2,打印 timer2;这点跟浏览器端相差比较大,timers 阶段有几个 setTimeout/setInterval 都会依次执行,并不像浏览器端,每执行一个宏任务后就去执行一个微任务(关于 Node 与浏览器的 Event Loop 差异,下文还会详细介绍)。

注意点

setTimeout和setImmediate
二者非常相似,区别主要在于调用时机不同。

  • setImmediate设计在poll阶段完成时执行,即check阶段;
  • setTimeout设计在poll阶段为空闲时,且设定时间到达后执行,但它在timer阶段执行。
    2)process.nextTick
    这个函数其实是独立于Event Loop之外的,它有一个自己的队列,当每个阶段完成后,如果存在nextTick队列,就会清空队列中所有回调函数,并且优于其他microtask执行。
setTimeout(() => {
 console.log('timer1')
 Promise.resolve().then(function() {
   console.log('promise1')
 })
}, 0)
process.nextTick(() => {
 console.log('nextTick')
 process.nextTick(() => {
   console.log('nextTick')
   process.nextTick(() => {
     console.log('nextTick')
     process.nextTick(() => {
       console.log('nextTick')
     })
   })
 })
})
// nextTick=>nextTick=>nextTick=>nextTick=>timer1=>promise1

Node与浏览器的Event Loop差异

浏览器环境下,microtask的任务队列是每个macrotask执行完之后执行。而在Node.js中,microtask会在事件循环的各个阶段之间执行,也就是一个阶段执行完毕,就会去执行microtask队列的任务。

tips:

I/O事件:指的是输入输出的操纵事件。
Libuv: 一个高性能的,事件驱动的异步I/O库。