共计 1874 个字符，预计需要花费 5 分钟才能阅读完成。
#### 一、阻塞事件循环
任何破费太长时间能力将控制权返回给事件循环的 JavaScript 代码，都会阻塞页面中任何 JavaScript 代码的执行，甚至阻塞 UI 线程，并且用户无奈单击浏览、滚动页面等。
JavaScript 中简直所有的 I/O 基元都是非阻塞的。网络申请、文件系统操作等。被阻塞是个异样，这就是 JavaScript 如此之多基于回调（最近越来越多基于 promise 和 async/await）的起因。
#### 二、调用堆栈
调用堆栈是一个 LIFO 队列（后进先出）。
事件循环不断地查看调用堆栈，以查看是否须要运行任何函数。
当执行时，它会将找到的所有函数调用增加到调用堆栈中，并按程序执行每个函数。
你晓得在调试器或浏览器控制台中可能相熟的谬误堆栈跟踪吗？浏览器在调用堆栈中查找函数名称，以告知你是哪个函数发动了以后的调用：
#### 三、事件循环
1、一个简略的事件循环举例：
const bar = () => console.log('bar')
const baz = () => console.log('baz')
const foo = () => {console.log('foo')
bar()
baz()}
foo()此代码会如预期地打印：
foo
bar
baz当运行此代码时，会首先调用 foo()。在 foo() 外部，会首先调用 bar()，而后调用 baz()。
此时，调用堆栈如下所示：
每次迭代中的事件循环都会查看调用堆栈中是否有货色并执行它直到调用堆栈为空：
2、入队函数执行
下面的示例看起来很失常，没有什么特地的：JavaScript 查找要执行的货色，并按程序运行它们。
让咱们看看如何将函数推延直到堆栈被清空。
setTimeout(() => {}, 0) 的用例是调用一个函数，然而是在代码中的每个其余函数已被执行之后。
举个例子：
const bar = () => console.log('bar')
const baz = () => console.log('baz')
const foo = () => {console.log('foo')
setTimeout(bar, 0)
baz()}
foo()该代码会打印：
foo
baz
bar当运行此代码时，会首先调用 foo()。在 foo() 外部，会首先调用 setTimeout，将 bar 作为参数传入，并传入 0 作为定时器批示它尽快运行。而后调用 baz()。
此时，调用堆栈如下所示：
这是程序中所有函数的执行程序：
为什么会这样呢？
3、音讯队列
当调用 setTimeout() 时，浏览器或 Node.js 会启动定时器。当定时器到期时（在此示例中会立刻到期，因为将超时值设为 0），则回调函数会被放入“音讯队列”中。
在音讯队列中，用户触发的事件（如单击或键盘事件、或获取响应）也会在此排队，而后代码才有机会对其作出反应。相似 onLoad 这样的 DOM 事件也如此。
事件循环会赋予调用堆栈优先级，它首先解决在调用堆栈中找到的所有货色，一旦其中没有任何货色，便开始解决音讯队列中的货色。
咱们不用期待诸如 setTimeout、fetch、或其余的函数来实现它们本身的工作，因为它们是由浏览器提供的，并且位于它们本身的线程中。例如，如果将 setTimeout 的超时设置为 2 秒，但不用期待 2 秒，期待产生在其余中央。
#### 四、ES6 作业队列
ECMAScript 2015 引入了作业队列的概念，Promise 应用了该队列（也在 ES6/ES2015 中引入）。这种形式会尽快地执行异步函数的后果，而不是放在调用堆栈的开端。
在以后函数完结之前 resolve 的 Promise 会在以后函数之后被立刻执行。
有个游乐园中过山车的比喻很好：音讯队列将你排在队列的前面（在所有其他人的前面），你不得不期待你的回合，而工作队列则是快速通道票，这样你就能够在实现上一次乘车后立刻乘坐另一趟车。
示例：
const bar = () => console.log('bar')
const baz = () => console.log('baz')
const foo = () => {console.log('foo')
setTimeout(bar, 0)
new Promise((resolve, reject) =>
resolve('应该在 baz 之后、bar 之前')
).then(resolve => console.log(resolve))
baz()}
foo()这会打印：
foo
baz
应该在 baz 之后、bar 之前
bar这是 Promise（以及基于 promise 构建的 async/await）与通过 setTimeout() 或其余平台 API 的一般的旧异步函数之间的微小区别。
