Event Loop
即事件循环,是指浏览器或Node
的一种解决javaScript
单线程运行时不会阻塞的一种机制,也就是咱们常用异步的原理。javascript
是要增长本身技术的深度,也就是懂得JavaScript
的运行机制。html
如今在前端领域各类技术层出不穷,掌握底层原理,可让本身以不变,应万变。前端
应对各大互联网公司的面试,懂其原理,题目任其发挥。java
堆是一种数据结构,是利用彻底二叉树维护的一组数据,堆分为两种,一种为最大堆,一种为最小堆,将根节点最大的堆叫作最大堆或大根堆,根节点最小的堆叫作最小堆或小根堆。
堆是线性数据结构,至关于一维数组,有惟一后继。node
如最大堆git
栈在计算机科学中是限定仅在表尾进行插入或删除操做的线性表。 栈是一种数据结构,它按照后进先出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,须要读数据的时候从栈顶开始弹出数据。
栈是只能在某一端插入和删除的特殊线性表。github
特殊之处在于它只容许在表的前端(front
)进行删除操做,而在表的后端(rear
)进行插入操做,和栈同样,队列是一种操做受限制的线性表。
进行插入操做的端称为队尾,进行删除操做的端称为队头。 队列中没有元素时,称为空队列。面试
队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队,从队列中删除一个队列元素称为出队。由于队列只容许在一端插入,在另外一端删除,因此只有最先进入队列的元素才能最早从队列中删除,故队列又称为先进先出(FIFO—first in first out
)chrome
在JavaScript
中,任务被分为两种,一种宏任务(MacroTask
)也叫Task
,一种叫微任务(MicroTask
)。编程
script
所有代码、setTimeout
、setInterval
、setImmediate
(浏览器暂时不支持,只有IE10支持,具体可见MDN
)、I/O
、UI Rendering
。Process.nextTick(Node独有)
、Promise
、Object.observe(废弃)
、MutationObserver
(具体使用方式查看这里)Javascript
有一个 main thread
主线程和 call-stack
调用栈(执行栈),全部的任务都会被放到调用栈等待主线程执行。
JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。
Javascript
单线程任务被分为同步任务和异步任务,同步任务会在调用栈中按照顺序等待主线程依次执行,异步任务会在异步任务有告终果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。
Task Queue
,即队列,是一种先进先出的一种数据结构。
null
,则执行跳转到微任务(MicroTask
)的执行步骤。microtask
执行不为空时:选择一个最早进入的microtask
队列的microtask
,将事件循环的microtask
设置为已选择的microtask
,运行microtask
,将已经执行完成的microtask
为null
,移出microtask
中的microtask
。上述可能不太好理解,下图是我作的一张图片。
执行栈在执行完同步任务后,查看执行栈是否为空,若是执行栈为空,就会去检查微任务(microTask
)队列是否为空,若是为空的话,就执行Task
(宏任务),不然就一次性执行完全部微任务。
每次单个宏任务执行完毕后,检查微任务(microTask
)队列是否为空,若是不为空的话,会按照先入先出的规则所有执行完微任务(microTask
)后,设置微任务(microTask
)队列为null
,而后再执行宏任务,如此循环。
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:run script、 setTimeout callback
Microtasks:Promise2 then
JS stack: Promise2 callback
Log: script start、script end、promise一、promise2
复制代码
执行宏任务后,检测到微任务(Microtasks
)队列中不为空,执行Promise1
,执行完成Promise1
后,调用Promise2.then
,放入微任务(Microtasks
)队列中,再执行Promise2.then
。
Tasks:setTimeout callback
Microtasks:
JS stack: setTimeout callback
Log: script start、script end、promise一、promise二、setTimeout
复制代码
当微任务(Microtasks
)队列中为空时,执行宏任务(Tasks
),执行setTimeout callback
,打印日志。
Tasks:setTimeout callback
Microtasks:
JS stack:
Log: script start、script end、promise一、promise二、setTimeout
复制代码
清空Tasks队列和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
回调函数。
也就是说,这是 promise
的语法糖。
每次咱们使用 await
, 解释器都建立一个 promise
对象,而后把剩下的 async
函数中的操做放到 then
回调函数中。
async/await
的实现,离不开 Promise
。从字面意思来理解,async
是“异步”的简写,而 await
是 async wait
的简写能够认为是等待异步方法执行完成。
promise1
和promise2
,再执行async1
。async1
再执行promise1
和promise2
。主要缘由是由于在谷歌(金丝雀)73版本中更改了规范,以下图所示:
RESOLVE(thenable)
和之间的区别Promise.resolve(thenable)
。await
的值被包裹在一个 Promise
中。而后,处理程序附加到这个包装的 Promise
,以便在 Promise
变为 fulfilled
后恢复该函数,而且暂停执行异步函数,一旦 promise
变为 fulfilled
,恢复异步函数的执行。await
引擎必须建立两个额外的 Promise(即便右侧已是一个 Promise
)而且它须要至少三个 microtask
队列 ticks
(tick
为系统的相对时间单位,也被称为系统的时基,来源于定时器的周期性中断(输出脉冲),一次中断表示一个tick
,也被称作一个“时钟滴答”、时标。)。async function f() {
await p
console.log('ok')
}
复制代码
简化理解为:
function f() {
return RESOLVE(p).then(() => {
console.log('ok')
})
}
复制代码
RESOLVE(p)
对于 p
为 promise
直接返回 p
的话,那么 p
的 then
方法就会被立刻调用,其回调就当即进入 job
队列。RESOLVE(p)
严格按照标准,应该是产生一个新的 promise
,尽管该 promise
肯定会 resolve
为 p
,但这个过程自己是异步的,也就是如今进入 job
队列的是新 promise
的 resolve
过程,因此该 promise
的 then
不会被当即调用,而要等到当前 job
队列执行到前述 resolve
过程才会被调用,而后其回调(也就是继续 await
以后的语句)才加入 job
队列,因此时序上就晚了。PromiseResolve
的调用来更改await
的语义,以减小在公共awaitPromise
状况下的转换次数。await
的值已是一个 Promise
,那么这种优化避免了再次建立 Promise
包装器,在这种状况下,咱们从最少三个 microtick
到只有一个 microtick
。73如下版本
script start
,调用async1()
时,返回一个Promise
,因此打印出来async2 end
。await
,会新产生一个promise
,但这个过程自己是异步的,因此该await
后面不会当即调用。Promise
和script end
,将then
函数放入微任务队列中等待执行。null
,而后按照先入先出规则,依次执行。promise1
,此时then
的回调函数返回undefinde
,此时又有then
的链式调用,又放入微任务队列中,再次打印promise2
。await
的位置执行返回的 Promise
的 resolve
函数,这又会把 resolve
丢到微任务队列中,打印async1 end
。setTimeout
。谷歌(金丝雀73版本)
await
的值已是一个 Promise
,那么这种优化避免了再次建立 Promise
包装器,在这种状况下,咱们从最少三个 microtick
到只有一个 microtick
。await
创造 throwaway Promise
- 在绝大部分时间。promise
指向了同一个 Promise
,因此这个步骤什么也不须要作。而后引擎继续像之前同样,建立 throwaway Promise
,安排 PromiseReactionJob
在 microtask
队列的下一个 tick
上恢复异步函数,暂停执行该函数,而后返回给调用者。具体详情查看(这里)。
Node
中的Event Loop
是基于libuv
实现的,而libuv
是 Node
的新跨平台抽象层,libuv使用异步,事件驱动的编程方式,核心是提供i/o
的事件循环和异步回调。libuv的API
包含有时间,非阻塞的网络,异步文件操做,子进程等等。 Event Loop
就是在libuv
中实现的。
Node
的Event loop
一共分为6个阶段,每一个细节具体以下:timers
: 执行setTimeout
和setInterval
中到期的callback
。pending callback
: 上一轮循环中少数的callback
会放在这一阶段执行。idle, prepare
: 仅在内部使用。poll
: 最重要的阶段,执行pending callback
,在适当的状况下回阻塞在这个阶段。check
: 执行setImmediate
(setImmediate()
是将事件插入到事件队列尾部,主线程和事件队列的函数执行完成以后当即执行setImmediate
指定的回调函数)的callback
。close callbacks
: 执行close
事件的callback
,例如socket.on('close'[,fn])
或者http.server.on('close, fn)
。具体细节以下:
执行setTimeout
和setInterval
中到期的callback
,执行这二者回调须要设置一个毫秒数,理论上来讲,应该是时间一到就当即执行callback回调,可是因为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毫秒的回调被添加到轮询队列并执行。
当回调结束时,队列中再也不有回调,所以事件循环将看到已达到最快定时器的阈值,而后回到timers阶段以执行定时器的回调。
在此示例中,您将看到正在调度的计时器与正在执行的回调之间的总延迟将为105毫秒。
如下是我测试时间:
此阶段执行某些系统操做(例如TCP错误类型)的回调。 例如,若是TCP socket ECONNREFUSED
在尝试connect时receives,则某些* nix系统但愿等待报告错误。 这将在pending callbacks
阶段执行。
该poll阶段有两个主要功能:
I/O
回调。当事件循环进入poll
阶段而且在timers
中没有能够执行定时器时,将发生如下两种状况之一
poll
队列不为空,则事件循环将遍历其同步执行它们的callback
队列,直到队列为空,或者达到system-dependent
(系统相关限制)。若是poll
队列为空,则会发生如下两种状况之一
若是有setImmediate()
回调须要执行,则会当即中止执行poll
阶段并进入执行check
阶段以执行回调。
若是没有setImmediate()
回到须要执行,poll阶段将等待callback
被添加到队列中,而后当即执行。
固然设定了 timer 的话且 poll 队列为空,则会判断是否有 timer 超时,若是有的话会回到 timer 阶段执行回调。
此阶段容许人员在poll阶段完成后当即执行回调。
若是poll
阶段闲置而且script
已排队setImmediate()
,则事件循环到达check阶段执行而不是继续等待。
setImmediate()
其实是一个特殊的计时器,它在事件循环的一个单独阶段运行。它使用libuv API
来调度在poll
阶段完成后执行的回调。
一般,当代码被执行时,事件循环最终将达到poll
阶段,它将等待传入链接,请求等。
可是,若是已经调度了回调setImmediate()
,而且轮询阶段变为空闲,则它将结束而且到达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')
复制代码
若是node
版本为v11.x
, 其结果与浏览器一致。
start
end
promise3
timer1
promise1
timer2
promise2
复制代码
具体详情能够查看《又被node的eventloop坑了,此次是node的锅》。
若是v10版本上述结果存在两种状况:
start
end
promise3
timer1
timer2
promise1
promise2
复制代码
start
end
promise3
timer1
promise1
timer2
promise2
复制代码
具体状况能够参考poll
阶段的两种状况。
从下图可能更好理解:
setImmediate
和setTimeout()
是类似的,但根据它们被调用的时间以不一样的方式表现。
setImmediate()
设计用于在当前poll
阶段完成后check阶段执行脚本 。setTimeout()
安排在通过最小(ms)后运行的脚本,在timers
阶段执行。setTimeout(() => {
console.log('timeout');
}, 0);
setImmediate(() => {
console.log('immediate');
});
复制代码
执行定时器的顺序将根据调用它们的上下文而有所不一样。 若是从主模块中调用二者,那么时间将受到进程性能的限制。
其结果也不一致
若是在I / O
周期内移动两个调用,则始终首先执行当即回调:
const fs = require('fs');
fs.readFile(__filename, () => {
setTimeout(() => {
console.log('timeout');
}, 0);
setImmediate(() => {
console.log('immediate');
});
});
复制代码
其结果能够肯定必定是immediate => timeout
。
主要缘由是在I/O阶段
读取文件后,事件循环会先进入poll
阶段,发现有setImmediate
须要执行,会当即进入check
阶段执行setImmediate
的回调。
而后再进入timers
阶段,执行setTimeout
,打印timeout
。
┌───────────────────────────┐
┌─>│ timers │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ pending callbacks │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
│ │ idle, prepare │
│ └─────────────┬─────────────┘ ┌───────────────┐
│ ┌─────────────┴─────────────┐ │ incoming: │
│ │ poll │<─────┤ connections, │
│ └─────────────┬─────────────┘ │ data, etc. │
│ ┌─────────────┴─────────────┐ └───────────────┘
│ │ check │
│ └─────────────┬─────────────┘
│ ┌─────────────┴─────────────┐
└──┤ close callbacks │
└───────────────────────────┘
复制代码
process.nextTick()
虽然它是异步API的一部分,但未在图中显示。这是由于process.nextTick()
从技术上讲,它不是事件循环的一部分。
process.nextTick()
方法将 callback
添加到next tick
队列。 一旦当前事件轮询队列的任务所有完成,在next tick
队列中的全部callbacks
会被依次调用。换种理解方式:
nextTick
队列,就会清空队列中的全部回调函数,而且优先于其余 microtask
执行。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
。
感谢@Dante_Hu提出这个问题await
的问题,文章已经修正。 修改了node端执行结果。V10和V11的区别。
《promise, async, await, execution order》
《Normative: Reduce the number of ticks in async/await》
《async/await 在chrome 环境和 node 环境的 执行结果不一致,求解?》
《更快的异步函数和 Promise》
《JS浏览器事件循环机制》
《什么是浏览器的事件循环(Event Loop)?》
《一篇文章教会你Event loop——浏览器和Node》
《不要混淆nodejs和浏览器中的event loop》
《浏览器与Node的事件循环(Event Loop)有何区别?》
《Tasks, microtasks, queues and schedules》
《前端面试之道》
《Node.js介绍5-libuv的基本概念》
《The Node.js Event Loop, Timers, and process.nextTick()》
《node官网》