在说到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库。