共计 4049 个字符，预计需要花费 11 分钟才能阅读完成。
写这篇文源起于一个不务正业、不写 JavaScript 的老友问我 JavaScript 的事件循环是怎么回事，他还不甘于只知其一; 不知其二。按说这方面的常识网上也是一大堆，但从他的检索后果来看，的确没有适宜他口味的。特写此文，兼做事件循环知识点总结。
常识筹备
我感觉网上的大多数相干材料要么太业余、细碎，让老手（甚至新手）抓不住重点，要么就是太简陋甚至有严重错误。另外，一个很显著的问题就是短少必要的相干常识介绍。我试试看能不能把事件循环这件事说分明。
1）JavaScript 与宿主
像 document.getElementById 这种函数是宿主提供的，不属于 JS 语言自身，此时的宿主个别是浏览器。另一个常见的宿主是 Node 环境，比方它提供的 fs 模块下的函数，都不属于语言自身。
JS 解释器被宿主环境调用，宿主会“植入”本人特有的 API。这个知识点写 JS 的人都晓得。须要特地指出的是 setTimeout/setInterval 函数，是绝大多数宿主会提供的函数，它不属于语言标准。这个函数会成为事件循环队列的生产者，后文开展讲。
2）JavaScript 与单线程
首先申明，此文不探讨 web worker。常说 JS 是单线程的，要正当了解这里的“单线程”。它是指 JS 执行环境（执行模型）是单线程，并不是说 JS 解释器是单线程，更不是说宿主环境是单线程。以浏览器宿主为例——
咱们发 Ajax 申请的时候，浏览器会应用其 HttpClient 模块进行网络申请，它是独立的线程。也就是说当你 send 一个申请时，理论的操作曾经交接给了宿主的其它线程（理论的实现也可能是过程，后文不再非凡阐明此类情况，这里为了防止杠精。后文针对对本文不重要的常识我也将讲得不那么谨严）。
UI 事件也相似，浏览器有独立的事件监听器接管解决来自操作系统的事件，比方用户点击了鼠标，浏览器中独立的线程监听到点击，并计算出点击的是 DOM 渲染后页面上的一个 <button>。
3）JavaScript 执行过程
JS 的执行过程中会创立个栈来寄存参数、作用域链、this 等，每个函数是在独立的栈帧中执行。函数的返回事实上是栈帧指针的变动。这里不开展讲了。你能够将一个个的回调函数当作整体了解，后文的图中我也只把它们画成一个个的方框，不探讨外部细节。我也不会刻意指出“执行上下文栈”、“调用栈”这些名词的含意。
事件循环
间接上图：
事件循环（Event Loop）的外围逻辑极其简略。首先要有一个事件队列（或者叫音讯队列，总之是一个队列），外面放着一个个事件，事件就是我方才说的小方框，能够了解为一个函数或者你晓得 Execution Context。主观了解即可。主线程中会有限循环地去取出并调用这个队列里的一个个“事件”。这就是事件循环的所有内容！
代码层面能够了解成：
while (true) {
// 每一轮循环为一个 tick
if (hasNextEvent()) {callNextEvent()
}
}我晓得这种水平的解释并不能满足你。当初结合实际的例子具体讲一下。
例子 1：UI 事件
假如咱们应用 Vue 书写了如下代码：
<button @click="myClickHandler"> 点我 </button> 这段代码会通过框架调用宿主浏览器提供的 API——比方 element.onclick ——向宿主的 UI 事件监听线程中注册一个回调函数。当用户点击该按钮时，UI 事件监听线程接管到来自操作系统的原始鼠标点击事件，剖析其点击的地位后发现对应到了 button 上，这时 button 上曾经注册了一个回调函数 myClickHandler，故该次用户点击的 UI 事件，变成了一个 Event Loop 中的事件。事件监听线程成为了事件队列的生产者。
后续主线程一直地从事件队列中取出事件执行，直到取了 myClickHandler。所以咱们会发现，如果在主线程阻塞的时候点击按钮，它不会立即响应，但也不会失落响应，而是过了一会再响应。这淡淡的提早感，就来自事件队列的期待。如果事件队列中没有其它事件，myClickHandler 就会在被放入队列的霎时同时被取出执行，便感触不到提早。
例子 2：Ajax 申请
假如你写了：
axios({method: 'get', url: 'http://bit.ly/2mTM3nY'})
.then(function (response) {console.log(response.data)
});类库 axios 会通过宿主浏览器提供的 Ajax API 唤起 Http 申请，网络线程负责解决它。当服务端胜利返回数据时，网络线程会将事件（例子中 then 里的匿名函数）放入主线程的事件队列里。网络线程也成为了事件队列的生产者。
后续的执行过程和 UI 事件一样，主线程会逐步执行到那个匿名函数，打印出返回的数据。
例子 3：setTimeout 和 setInterval
这个很罕用，我开展讲一下。把眼光聚焦到图里的调用栈。为了便于了解，我省去取事件的过程，把事件队列中的事件间接画在调用栈中，示意事件会被不间断地拿到调用栈中执行。
假如调用栈中正在执行的 JavaScript 代码如下：
button.onclick = function myClickHandler() { ...}
// ...5ms 后
setTimeout(function A() {}, 30)
// ...5ms 后
setInterval(function B() {}, 35)
// ...咱们按图示工夫点设置了一个 UI 事件和两个定时调度，同时咱们假如下面的代码会执行 25ms：
当初假如第 8ms 时用户点击了 button（上图画不开了，我只好离开画了，显然该事件产生在 setTimeout 和 setInterval 两头），此时会将 myClickHandler 事件送入 Event Loop 零碎期待执行。
随着工夫的连续，25ms 后上述 JavaScript 代码执行结束，myClickHandler 被取出执行。咱们假如它会执行 15ms。
工夫来到第 35ms，因为在第 5ms 时执行了 setTimeout(function A() {}, 30)，所以此时 A 被送入事件队列期待执行。然而此时正在执行 myClickHandler，所以始终等到 40ms 时，A 才被理论执行。咱们冀望提早 30ms 执行的回调被提早了 35ms。
40ms 时 A 开始执行，它是一个耗时工作，足足执行了 50ms 之久。咱们很容易晓得，定时事件会在这期间产生：
留神第 80ms 时，因为第 45ms 的事件 B 仍未被执行，此时定时调度线程会被动抛弃本次事件。接下来的事件应该很容易推想得悉了。第 45ms 被退出的事件 B 会在 90ms 时开始执行，80ms 时不会执行 B 事件。
假如 B 只须要 10ms 执行结束，第 100ms 时 B 会第一次执行结束。接下来事件队列会处于空置期，队列中没有须要执行的事件。到了第 115ms 时，事件 B 再次触发，并立刻被取出执行。这样一来，咱们在第 10ms 设置的定时器，冀望它每 35ms 执行一次，它却在 90ms、115ms… 的时刻执行。
构想一下，如果你应用 setInterval 做定时，而回调函数的执行工夫往往大于你设置的定时周期，会产生什么？是的，会丟帧，有一些时刻并未执行回调。因而，少数时候更举荐嵌套 setTimeout 来代替 setInterval 做定时。
最初絮叨一句，JavaScript 引擎自身并没有工夫的概念，定时调度能力来源于宿主环境。setTimeout 是宿主提供的设置定时的能力，调用该函数并不会把回调放入事件循环队列中，而只是将回调工作交给宿主的定时调度模块，宿主来决定何时将回调放入事件循环队列。
宏工作与微工作
看懂下面“例子 3”之后这个问题变得简略。在 ES6 之前是没有所谓“宏工作”与“微工作”的，JS 从语言标准层面也没有束缚事件循环的工作机制。大略是为了 ES6 Promise 的诞生，语言标准对事件循环的工作机制做了要求，并在事件队列之外引入“工作队列”的概念。
咱们把事件循环过程中，每一次从事件队列取出一个事件并执行的过程称为一个 Tick。工作队列就是加在 Tick 前面要解决的另一个循环：
while (true) {
// 每一轮循环为一个 tick
if (hasNextEvent()) {callNextEvent()
while (hasNextJob()) {callNextJob()
}
}
}有了“工作队列”后，后面说的“事件队列”中的事件就是宏工作，工作队列中的就是微工作。微工作的一个典型代表是 Promise。
你能够去网上搜更谨严的概念，我这里想讲的是它们在语言设计层面的价值。事件循环中一个 Tick 是用来实现一次残缺的事件的，就像你去银行排队办业务，你的业务办完了柜台就实现了一次 Tick，也就是实现一个宏工作。然而你的业务可能须要填单子，填单子的过程中你有些信息 A 不明确，于是给他人打电话征询，他说帮你查一查后回复你。你不须要始终等他回电话，这期间你齐全能够持续填单子前面的内容 B，此时的你便创立了一个微工作——等电话回复后再填内容 A。很显然你心愿等到电话、填完残缺的单子后才轮到下一位办理人。微工作的意义便如此！
所以说，宏工作与微工作让事件循环机制更粗疏了，各个异步工作自身，又能够被拆分成更细粒度不同的异步工作，这些异步工作不会乱序交叉执行。
举个例子，在宏工作中应用 Promise.resolve 创立微工作：
这些调用栈会把工作队列中的工作全执行完（如果微工作持续创立微工作，也会退出工作队列），而后开始执行下一个宏工作。
代码层面，setTimeout、UI 事件监听等，都是宏工作，Promise 是微工作。其它的你去网上查阅吧。这里提出一个问题：
执行上面的代码后，你的点击事件还会触发吗？或者说浏览器会被上面的代码卡死吗？
function foo() {setTimeout(foo, 0);
}
foo();如果换成这样呢？
function foo() {return Promise.resolve().then(foo);
}
foo();
