转载:一次弄懂Event Loop(彻底解决此类面试问题)作者:光光同学出处:掘金文章为转载,不喜勿喷,都是前端狗,相煎何太急
转载:一次弄懂Event Loop(彻底解决此类面试问题)
Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用非同步的原理。
Event Loop
Node
javaScript
JavaScript
堆,栈、队列
堆是一种数据结构,是利用完全二叉树维护的一组数据,堆分为两种,一种为最大堆,一种为最小堆,将根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做最小堆或小根堆。
堆是线性数据结构,相当于一维数组,有唯一后继。
如最大堆
栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。栈是一种数据结构,它按照后进先出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,需要读数据的时候从栈顶开始弹出数据。
栈是只能在某一端插入和删除的特殊线性表。
特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表。
front
rear
进行插入操作的端称为队尾,进行删除操作的端称为队头。 队列中没有元素时,称为空队列。
队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队,从队列中删除一个队列元素称为出队。因为队列只允许在一端插入,在另一端删除,所以只有最早进入队列的元素才能最先从队列中删除,故队列又称为先进先出(FIFO—first in first out)
FIFO—first in first out
在JavaScript中,任务被分为两种,一种宏任务(MacroTask)也叫Task,一种叫微任务(MicroTask)。
MacroTask
Task
MicroTask
script
setTimeout
setInterval
setImmediate
MDN
I/O
UI Rendering
Process.nextTick(Node独有)
Promise
Object.observe(废弃)
MutationObserver
Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。
Javascript
main thread
call-stack
JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。
Javascript单线程任务被分为同步任务和非同步任务,同步任务会在调用栈中按照顺序等待主线程依次执行,非同步任务会在非同步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。
任务队列Task Queue,即队列,是一种先进先出的一种数据结构。
Task Queue
null
执行进入microtask检查点时,用户代理会执行以下步骤:
microtask
上述可能不太好理解,下图是我做的一张图片。
执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去执行Task(宏任务),每次宏任务执行完毕后,检查微任务(microTask)队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务(microTask)后,设置微任务(microTask)队列为null,然后再执行宏任务,如此循环。
microTask
console.log(script start);
setTimeout(function() { console.log(setTimeout); }, 0);
Promise.resolve().then(function() { console.log(promise1); }).then(function() { console.log(promise2); }); console.log(script end);
首先我们划分几个分类:
Tasks:run script、 setTimeout callback
Microtasks:Promise then
JS stack: script Log: script start、script end。
执行同步代码,将宏任务(Tasks)和微任务(Microtasks)划分到各自队列中。
Tasks
Microtasks
Microtasks:Promise2 then
JS stack: Promise2 callback Log: script start、script end、promise1、promise2
执行宏任务后,检测到微任务(Microtasks)队列中不为空,执行Promise1,执行完成Promise1后,调用Promise2.then,放入微任务(Microtasks)队列中,再执行Promise2.then。
Promise1
Promise2.then
Tasks:setTimeout callback
Microtasks:
JS stack: setTimeout callback Log: script start、script end、promise1、promise2、setTimeout
当微任务(Microtasks)队列中为空时,执行宏任务(Tasks),执行setTimeout callback,列印日志。
setTimeout callback
JS stack: Log: script start、script end、promise1、promise2、setTimeout
清空Tasks队列和JS stack。
JS stack
以上执行帧动画可以查看Tasks, microtasks, queues and schedules
或许这张图也更好理解些。
console.log(script start)
async function async1() { await async2() console.log(async1 end) } async function async2() { console.log(async2 end) } async1()
setTimeout(function() { console.log(setTimeout) }, 0)
new Promise(resolve => { console.log(Promise) resolve() }) .then(function() { console.log(promise1) }) .then(function() { console.log(promise2) })
console.log(script end)
这里需要先理解async/await。
async/await
promise
then
await
async
async wait
promise1
promise2
async1
主要原因是因为在谷歌(金丝雀)73版本中更改了规范,如下图所示:
RESOLVE(thenable)
Promise.resolve(thenable)
在73以下版本中
fulfilled
ticks
tick
引用贺老师知乎上的一个例子
async function f() { await p console.log(ok) }
简化理解为:
function f() { return RESOLVE(p).then(() => { console.log(ok) }) }
RESOLVE(p)
p
job
谷歌(金丝雀)73版本中
PromiseResolve
awaitPromise
microtick
script start
async1()
async2 end
script end
undefinde
resolve
async1 end
谷歌(金丝雀73版本)
throwaway Promise
PromiseReactionJob
具体详情查看(这里)。
Node中的Event Loop是基于libuv实现的,而libuv是 Node 的新跨平台抽象层,libuv使用非同步,事件驱动的编程方式,核心是提供i/o的事件循环和非同步回调。libuv的API包含有时间,非阻塞的网路,非同步文件操作,子进程等等。 Event Loop就是在libuv中实现的。
libuv
i/o
API
Node的Event loop一共分为6个阶段,每个细节具体如下:
Event loop
timers
callback
pending callback
idle, prepare
poll
check
setImmediate()
close callbacks
close
socket.on(close[,fn])
http.server.on(close, fn)
具体细节如下:
system
const fs = require(fs);
function someAsyncOperation(callback) { // Assume this takes 95ms to complete fs.readFile(/path/to/file, callback); }
const timeoutScheduled = Date.now();
setTimeout(() => { const delay = Date.now() - timeoutScheduled;
console.log(`${delay}ms have passed since I was scheduled`); }, 100);
// do someAsyncOperation which takes 95 ms to complete someAsyncOperation(() => { const startCallback = Date.now();
// do something that will take 10ms... while (Date.now() - startCallback < 10) { // do nothing } });
当进入事件循环时,它有一个空队列(fs.readFile()尚未完成),因此定时器将等待剩余毫秒数,当到达95ms时,fs.readFile()完成读取文件并且其完成需要10毫秒的回调被添加到轮询队列并执行。
fs.readFile()
在此示例中,您将看到正在调度的计时器与正在执行的回调之间的总延迟将为105毫秒。
以下是我测试时间:
pending callbacks
TCP socket ECONNREFUSED
该poll阶段有两个主要功能:
当事件循环进入poll阶段并且在timers中没有可以执行定时器时,将发生以下两种情况之一
system-dependent
如果poll队列为空,则会发生以下两种情况之一
当然设定了 timer 的话且 poll 队列为空,则会判断是否有 timer 超时,如果有的话会回到 timer 阶段执行回调。
libuv API
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)
如果node版本为v11.x, 其结果与浏览器一致。
node
v11.x
start end promise3 timer1 timer2 promise1 promise2
具体详情可以查看《又被node的eventloop坑了,这次是node的锅》。
如果v10版本上述结果存在两种情况:
start end promise3 timer1 promise1 timer2
具体情况可以参考poll阶段的两种情况。
从下图可能更好理解:
setTimeout()
setTimeout(() => { console.log(timeout); }, 0);
setImmediate(() => { console.log(immediate); });
执行定时器的顺序将根据调用它们的上下文而有所不同。 如果从主模块中调用两者,那么时间将受到进程性能的限制。
其结果也不一致
如果在I / O周期内移动两个调用,则始终首先执行立即回调:
I / O
fs.readFile(__filename, () => { setTimeout(() => { console.log(timeout); }, 0); setImmediate(() => { console.log(immediate); }); });
其结果可以确定一定是immediate => timeout。
immediate => timeout
I/O阶段
timeout
Process.nextTick()
process.nextTick()
next tick
callbacks
换种理解方式:
nextTick
let bar;
setTimeout(() => { console.log(setTimeout); }, 0)
setImmediate(() => { console.log(setImmediate); }) function someAsyncApiCall(callback) { process.nextTick(callback); }
someAsyncApiCall(() => { console.log(bar, bar); // 1 });
bar = 1;
在NodeV10中上述代码执行可能有两种答案,一种为:
bar 1 setTimeout setImmediate
另一种为:
bar 1 setImmediate setTimeout
无论哪种,始终都是先执行process.nextTick(callback),列印bar 1。
process.nextTick(callback)
bar 1
关于await问题参考了以下文章:.