译者按

这篇文章可以看作是对Philip Roberts 2014年在JSConf演讲的
《What the heck is the event loop anyway?》的一个总结。

提议先看Philip Roberts的这个演讲然后再浏览本篇文章。这哥们儿的演讲言语诙谐风趣，内容通俗易懂，异常值得一看。

在这个视频中，Philip Roberts将JavaScript的挪用栈、回调行列和事宜轮回的内容讲的很清晰。所以你可以随便的跳过这篇文章，花上一个半小时去看视频。固然假如你情愿读一下我的这篇文章那也不是不可以。

什么是JavaScript

什么是JavaScript呢？枚举一些关键词就是：

• 他是单线程的、非壅塞的、异步的并发言语
• 他有一个挪用栈，一个事宜轮回，一个回调行列，另有一些api和别的东西

假如你像我一样(或许像Philip Roberts)对此懵逼的话，这些话自身并没不意味着什么。那我们就来理会一下。

JavaScript运转时

JavaScript运转时(像V8引擎)具有一个堆(内存分配用的)和栈(实行上下文)。然则他没有setTimeout、DOM等。这些是浏览器供应的Web APIs。

我们相识的JavaScript

浏览器中的JavaScript具有：

• 一个像V8引擎一样的运转时(供应客栈)
• 浏览器供应的Web APIs，比方：DOM、AJAX和setTimeout
• 一个为种种事宜回调预备的回调行列，比方：onClick、onLoad、onDone
• 一个事宜轮回

什么是挪用栈

JavaScript是单线程的，意味着他有一个零丁的挪用栈，意味着他一次能做一件事。挪用栈基本上就是一个纪录顺序实行位置的数据结构。假如顺序进入了一个函数，那就往这个栈内里塞些东西。假如顺序从一个函数中return了，那就从栈顶弹出一些东西。

当我们的顺序报错的时刻，我们会在控制台看到挪用栈信息。报错的时刻我们可以看到栈的状况(被挪用的谁人函数的)。

壅塞

这涉及到一个主要的题目：顺序运转的很慢的时刻发生了什么？换句话说，就是顺序壅塞了。壅塞并没有严厉的定义。实际上就是顺序实行慢。实行console.log不慢，然则一个从1到1,000,000,000的while轮回，图象处置惩罚或许收集要求这些操纵的实行就比较费时了。这些实行慢的东西堆在一起就发生了壅塞。

由于JavaScript是单线程的，我们提议一个收集要求就不得不一向比及他完毕。这在浏览器中就是个题目–当我们等这个要求的时刻，浏览器就发生了壅塞(我们不能做点击、提交表单等操纵)。处理这个题目的要领就是运用异步回调。

并发，看到这个词的时刻我们会发明上面有一个处所说的不对

JavaScript一次只能做一件事变的说法是不对的。准确的说法应该是：JavaScript的运转时一次只能做一件事。他不能一边发ajax要求一边运转别的代码，也不能在实行别的代码时刻运转一个定时器。然则我们可以并发的做这些事。由于浏览器不仅仅是一个运转时(还记得上面谁人渣渣画质的图吗？)。

挪用栈可以往Web APIs内里放东西，Web APIs可以在事宜完毕的时刻把回调函数放进回调行列，然后是事宜轮回。终究我们进入事宜轮回，这是这个历程中最简朴的部份，他有一个异常简朴的事情：看看挪用栈，瞅瞅回调行列，假如挪用栈余暇了，就把回调行列中的第一个函数取出来丢进挪用栈让他实行(这就回到了JavaScript的土地，回到了V8的内部)。

全部串起来

Philip搞了一个的堡垒的东西来可视化这个历程，这玩艺儿叫Loupe。这是一个可以把JavaScript运转时可视化的东西。

我们用它来看一个简朴的例子：在一个异步的setTimeout回调顶用console.log在控制台打些log出来。

全部历程究竟都发生了什么呢？我们来看一下：

1. 实行进入console.log('Hi');函数，因而这个函数被丢进了挪用栈里。
2. console.log('Hi');函数return了，因而他就被弹出了栈顶。
3. 实行进入setTimeout函数，因而这个函数被丢进了挪用栈里。
4. setTimeout是Web APIs的一部份，因而Web APIs处置惩罚了他，而且等了2秒
5. 继承实行剧本，进入console.log('EvenyBody')函数，把他也丢进挪用栈。
6. console.log('EvenyBody')函数return了，所以把他从栈顶弹出去
7. 2秒的定时已完成了，所以就把对应的回调函数放到回调行列里。
8. 事宜轮回搜检挪用栈是不是为空，假如非空的话，他就等着。由于挪用栈现在是空的，所以把回调行列中的回调函数丢进挪用栈。
9. console.log('There')函数返回了，因而把他从栈顶弹出去(译者按：原文为console.log(‘Everybody’)，应为誊写毛病)。

风趣的一点是：setTimeout(function(...), 0)的状况。setTimeout为0的时刻这个历程看起来能够不明显，除非斟酌到挪用栈的实行环境和事宜轮回的状况。基本上都邑推晚到挪用栈为空才实行。

斟酌UI衬着的机能的状况

为了回到了我们一样平常处置惩罚的UI层，我们须要斟酌衬着题目。浏览器遭到我们在JavaScript中所做操纵的影响，他能够每隔16.6ms重绘一次屏幕(60帧/秒)。然则挪用栈另有代码在实行的话，他实际上是没法做重绘的。

就像Philip说的一样：

当人人说不要”壅塞事宜轮回”的时刻，他们实际上是说：不要把消耗时间长的代码放进挪用栈，由于你要这么搞的话，浏览器就不能做他该做的事了，比如说给你搞一个美丽流通的UI。

Philip Roberts “What the Heck Is the Event Loop Anyway”

举个例子，转动的处置惩罚函数触发多了会让UI变得卡顿。趁便说一句，这是我听过的对防抖最清晰的诠释了，这就是你要做到的“不要壅塞事宜轮回”(那就是我们只在转动处置惩罚函数被触发x次后才实行那些耗时的操纵)。

结语

总之，这就是《What the heck is the event loop anyway?》的答案。Philip的演讲很好的帮我理解了什么是JavaScript，什么不是，哪一个部份是运转时，哪一个部份是浏览器的和我们该如何有用的运用事宜轮回。好好看看这个视频吧。