Event Loop到底是什么？

javascript程序员喜欢说各种高逼格的术语：“event-loop”,\"non-blocking\",\"callback\",\"asynchronous\",\"single-thre$ 1 : N 4 H Jaded\"和“concurrency”等（译者注：确实如此，一些所谓的面试官在自己对这些概念一+ e + I ? ; _ M l知半解的情况下也喜t U S !欢问这些概念）。

我们总是装出一胸有成竹的样子说着这样的话：“不要阻塞event loop”,\"你要确保你的代码以60FPS(frames-per-second)的速度去运行Z } g * J d T\"，“你这x D - D 8么搞法肯定是不行啦，那个函数是一个异步执行的callback啊”。

如果你2 N Y n = _是像我一: R [ W样的怂货，} = # ~你肯定会点点头，表示十分认同的样子。尽管你也不知h & L道他说得对不对，因为你不知道这些术语到底是啥意思。与此同时的事实是，找到一些讲述javascript如何被解释执行的好资料也是相对艰难的。（如今我花了18个月去j + # X 8 y做了这方面的研究），所以，我们一起学习一下吧。

在一些便利的可视化工具的帮助下，我们可以很直观地理解到javascript的运行时到底发生了什么。

演讲正文

大家好，感谢大家莅临side track(译者注：side track是啥？)。it is awesomen to see it packed out in here。大家请容许我伸伸懒腰，这样一来，我整个人看起来不至于那么僵硬。我想跟大家谈谈event loop－event loS b 5 j . _ ~ Hop到底是什么鬼, 尤其是javascript的event loop到底是什么鬼？

首先，请容许我自我介绍一下。就像他（指主持人）说的那样，我在AdnYet工作。AdnYet是美国的一个很不错的软件小厂。H 0 t = C H N如果大家在实时软件方面有需求的话，可以联系我们。我们最擅长这G d 8 ^ Z方面的研发了。

言归正传。18个月l 2 d x Y ` m 1前，我是一个专业的在职javascript开发者。我常常自问：“javascript是如何运行的呢？”。Q ^ u 4 8 $ o Z每到这个时~ 4 c w 2 - P -候，我的内心都没有一个很确定的答案。我听过v8团队，也听过v8作为javascript在chrome8 K F N : t { d F的运行时而存在。除此之外，我就一无所知了。我完全不知道v8具体意味着什么（应该是指v8在浏览器内核的中分工角色是什么），具体又是做什么的。我听过比如“single threadr w G ned”这些术语，我也知道我自己目前在用的就是叫“callback”。但是callback的运行原理是怎样的呢？为了对这些习以为常的概念进行深究，我开始了我的探索旅程。探索过程中，我一边确定探索主题，一边查阅资料和在浏览器上做试验。其过程用拟人手法可以简单描述为如下的对话形式：

• 我：“javascript，你是谁？”。
• javascript：“我？我是一门单线程，可并发的编程语言啊”。
• 我：“哦，算你狠（作无语状）”。
• javascript( , ;：“好吧，我说得更具体点吧。我有一个call sy r Ltack，一个eg ) f B W % (vent z _ I loop，一个calln 9 g M qback queue和其它的一些API之类的东西”。
• 我 e y ` 1 f a喃喃自语：“叼，我又不是学CS(computer scig X b _ - c 8ense)的Z 4 P，鬼知道你说的这些术语是什么。”

后来，我听闻了v8，并且也知道，除了v8和chrome? d ) 6 z `，外界还有其它各种javascript的运行时和浏览器。我就跑去问v8了。

• 我：“v8，v8，你是不是有一个call stack，一个event loop，一个callback queue和其它的一些API之类的东西”。
• v8:\"我有一个call stack和一个heap，你说的& ^ t其它那些东西我就不知道了。\"
• 我：“乜你甘得意噶”。

基本上就是这样，18个月过去了。经过这18个月的上下求索，我2 N i e E现在终于搞清楚了。n 9 @ : S u而这18个月研究所得出的干货，就是我今天要分享给你们的东西e C ) U r了。@ $ ` K ) N我希j ~ _ Q n S K ,望这些干货能够帮助到那些javascriptC 4 新手去理解“相比于其它编程语言，为什么ja1 Q @ . x 1 z f avascript显得那么怪异呢？”，“为什么callback让我们又爱又恨，但是又不可或缺呢？”。如果你是经验丰富的javascript开发者，希望这次分享能为你提供一个视角去理解你当前所用的运行时是如何工作的。而后，你能够更好地G , b 4 S q C N [编排你的代码。

当我们把ChW | M _ i s xrome中的javascript运行时平台v8单独拎出来看的话，我们发现它是很好的javascript运行时学习对象。v8主要包含两部分：heap和callstack。heap，是内存分配所发生的地方。call stack就是你的stack frame所在3 b g _ z W w .的地方。但是，| , 0 W { 5 n如果你把v8的源码下载下来，然z V ` c y后在里面全局搜索一下“setTimeout”，“DO& v *M”或者“HTTP request”等字眼，你会发现，它F d 6 / W S ^们根本就不在d H * q X `v8的源码里面。这是一路研究下来最让我意外的发现。当我们提到异步机制时第一反应所想到的东西竟然不在那个你自以为是的v8里面。知道真相的你，不知道眼泪有没有掉下来呢？

18个月的探索下来，我发现我所要研究的主题所涉及到的真的真的是一张很大的知识网。正因为知识网之巨大，之有价值，我才特别地希望你跟我一道学习学习。这样一来，你就会明白各种围绕v8零散的知识点是什么？我们已经有了一个v8。现在，给你介绍一个由浏览器提供实现的，叫“webd n t L = f API”的东西，比如DOM，AJAX和 time out(setTimeout和setInterval# 6 5 W % B T)之类的东西就是归属于“web API”这里面的。同时，我们还有神神秘秘的event loop和callback queue。我相信你之前也肯I = F ) ` i ~定听x R G . X说过这些术语，但也许你不太. s X懂得这些术语是如何关联起来，有机组成一个知识网的。我打算从最基础，最常见的一些术语开始讲。你们的一部分人可能已经了理解透，另外一部分可能并没有。我觉得大部分人应该是属于后者的。如果你是前者，那么忍受一下我的唠叨吧。

again,javascript是一门single threaW O ( G ) m Mded的编X l / ^ k程语言。这个single threade: 3d的编程语言的runtime有一个single call stack。一个时间段中，call stack只能做一件事。一个时间段中，程序只能执行一片代码片段，这就是所谓的“single thr9 i k w 9 | 4 @eaded”的意思。“single threaded”，“single call stack”和“do one thing at a time”这三者的关系如下：

single threaP V b N z ^ Dded === single cb Z { - G S G  Jall stack === do one thing at a time

现在，让我们开始尝试通过可视化将我们脑海里面零散理解组织起来。如果我们有你们左边的代码（M Z s & X d Q演讲者指向屏幕的ppt）：

function multiply(a,b){
    return a * b;
}

function s} I { N Oquare(n) {
    return multiply(n,n);
}

function printSquare(n) {
    var squared = squa@ + y @ [ :re(n);O g g 6 6 J 
    cw u a t 4 & Wonsole.log(squared);
}

printSquare(4);

这里面一个叫multiply的函数，负责将两个数字相乘。一个叫square的函数，负责调用multiply来实现一个数的平方。然后有一个叫printSquare的函数负责将调4 m ? X用squ7 r * ^ } % @are的结果用console.lR B _ 2 I W Gog方法打印出来。最后，我们在文件的底部开始调用print函数? - o ] 5 7。

这些代码应该没写错吧？理解起来没问题吧？嗯K N C ^ 4 7，那我们开始把它跑起来。我们上一个p| J | h Ipt。可以这么说，call stack基本上是一种用来+ ( [ & . V @告诉我们当前是执行到程序的哪里的数据结构。如果我们执行到一个函数调用，那么我们w 5 =就把一些东西放到栈顶，如果我们从一个函数里面return出去，那么我们就把栈顶的那些东西pop出来。这就是call stack能做的事情。当你运行这个文H z &件的时候，` = ] ^我可以把这个文件本身当作是整个程序的main函数。所以，一开始，我们把main函数放进去。从文件的顶部1 P ^ ) w (开始看，接下来是一些函数声明，they are just like defining the state of the world。最后，我们来到了printSquare函数的调用。一提到函数调用，我们得马m f / }上2 K n G j W k F a把它push 到call stack的顶部。而在执行printSquare函数的过程中，首先遇到了squar* u K ]e函数调用，所以，我们马上又把sq, | N p nuare函数push到call stack的顶部。而在执行square过程中，它又调用multiply函数。与此类推，我们又把multiply函数) M Wpush进去。现在call stack顶部的是multiply函数，那么我们就先执行它。它对A和B执行乘法操作后，就把结果return出去。一旦我们遇到return语句，我们就把call stack顶部的函数pop出来。所以，我们把multiply函数pop走，现在程序返回到square函数，因为遇到了return语句，与此类推，我们把square从call stack顶部pop走，回到了printSqun # n Yare函数。最后，我们调用console.log把结果打印出来。很w k m ( L i - #明显，这里已经没有return了，我们到了函数的底部了。通过这种可视化y V r U (的方式来讲) x ] V k + ) s &解，不知道你们明白了没？（yes,Phil（译者注：演讲者自己用女生的声明模仿观众说了这话v ] ) / ) c））。即使你之前脑! ] # $ Z n 6 0 y海里面没有call stack这个清晰4 A 2 D $ @ L u g的概念，但是如果你做过浏览器端的开发的话，那% 9 u j I E A么你已经遇k l s U G _ 4到过它了。在举个例子，如果我们有一下代码：

function ba* N : hr(){
    throw new Erw H mror(\'Oops\');
}
function bar(){
    Foo+ U M ] ?(p K d)
}
function baz(){
    bar()
}

baz()

如果我们把以上代码在Chrome浏览f h 6上运行的话，我们在console就会看到打印出来的stack trace。是的，stack trace就是执行出错的时候call stack的当前状态。

从上往下看，我们依此看到：

unaugth# 1  : 1 S % Q error: Oops
Foo
bar
baz
ano= D l snymous

最后的那个anonymous function就是我们的g ] Q c Y #main函数u h F 2 x 4。

同样的，你也许听过这样的术5 = !语“blowing the stacZ $ Kk”，那下面就是一个例子：

function Foo(){
    Foo()
}

在这个例子当中，main函数调用了Foo函数，然后在Foo函数又调用了Foo函数，与此类推。当我们执行这段代码的时候，chrome会说，递归调用FoI y D ^ 9o函数16000次可能不是你的本意，我现在报个错，杀死掉进程，好让你定位到bug的所在。

所以，虽然我可能会让你看到了call stack的新的一面，但是其实在实际的开发Q m , v N B *中你多少对它已经有点印象了。

我们讲完了call stack。接下来的? { b H M r大主题就是blocking（阻塞）。我们将会讨论什么是blocking和blocking的行为表现是如何的。

实际上- { V u ) e M，对于blocking和非blocking这两个概念并没有十分严格的定义。 在我看来，blocking就是指执行得十分缓] u & ` / p C慢的代码而已 。举个例子，console.log不慢，但是如果执行一个1到100亿的循环后去做console.loa P [ 9g，那么我们可以说这个console.log是很慢^ y ] F W 7 5的。网络请求是慢的，图片请求也是慢的。当一个被push进call st` & _ 8 6 I @ack的函数执行@ d L ; q起来很慢的话，我们就可以说这个函数是blocking的。 这就是我们平时提到的blocking的实T G 4 5 + Z V际含义。在这里，我们有一个] h d L ; ? 2 -用伪代码写成的小例子。

var foo = $.getSync(\'//foo.com\');
 var bar = $.getSync(\'//bar.com\');
 var qux = $.getSync(\'//e j E Kqux.com\');
 
 console.log(foo);
 console.log(bar);
 console.log(qux);

里面有个jQuery AJAX请求风格的getSync方法。如果这些getSync方法执行起来w j J I d G都是同步的，那么会发生什么呢？我们暂时先忘记异步callback其实本质也是同步的这个事实。按照我们的写法，执行起{ Y 6 u _ g Q来的结果将会是这样的：我们调用了getSync方法，然后接下里就是等待。因为我] V ^ *们正在发起了网络请求，而网络请求是于计算机硬件相关联的，它们往往是很慢的。好在，我们的第一个网络请求终于完成了。我} ! V j @ 9们接着r } # } 6发起第二个网络请求，然后我们接下来还是等待。第二个网络请求完了，我们马上发起第三个......B k f k与此类推。只要其中的6 V s一个网络请求永远都不会完成的话，那么我觉得我现在可以回家洗洗L z D h U z睡了。最终，这三个网络请求的blocking行为完成了，call s] i ;tack得以清空掉，u W q x q Y I &是吧？所以，如果在一个single threaded的编程语言里面，你是不能像ruby那样使用线程的话，那么，就会出现像这个例子所演示的情形那样－我们发起了! w x一个网络请求，; a 6 R在它完成之前，我们只有干等待。除此之外，我们无i . 4 s | a计可施啊。为什么我们将这种8 l {结果当作一a 4 j f d ^个问题而存在呢？T - / 8 T ~ P ,一切的一切都是因为我们的代码跑在浏览器端K 6 -。

下面我再举一个例子进行说明。

这是chrome浏览器，而这是我们上一个例子用过的代码。我们假设浏览器没有为我们提供同步的AJAX请求（好吧，事实上是有提供的），那么我们就使用一个耗时5秒的大循环来模拟一下这种同步请求。接下里，我们打开console，我们将会看到发生了什么。我们看到，当我们在请求foo.com的时候，我们对界面做的什么操作都没有得到响应。即使是我刚才点击过的按钮还是处于凹c ` t陷的状态，还没完成它的重新渲染。是r a : U T d M的，浏览器被阻塞住了，它被卡得像便秘的屎一样，一动不动。在这些网络请求完F * *成k 6 I O ^之前，浏览器做不了任何事情。浏览器虽然知道了我在界面进行3 Q .了一些操作，但是它自己对于我的操作无法作出响应，也即是说它无法进行有效的界面渲染。这是因为，@ n , 6 , i H C 5我们的call stack到目前为止还是没有处于清空状态，所以浏览器无法对界面进行重渲染，也执行不了其它代码。界面被卡住了，我们十分不开心，是吧？

作9 2 B为开发者，如果我们想用户i ] Q =看到一个好看的，流畅的界面的话，那么我们就不能阻塞call stack。我们应该怎么去解决这个问题呢？好吧，最简单的解决方案就是异步callba; . 6 u 8 Ack方案。在浏览器中，几乎没有哪个函数是blocking的，在nodejs里面也是一样的。所有会阻塞call stack的函数都会被改成异步的。“将函数改成异步”基本是是这样的模式：我们需要执行某些代码，与此同! 6 M F时，我们会提供一个call! A ; u I o -back给当前的运行时。当需要执行的代码完成了，运行时就会执行我们提供的callback。如果你见过javascript，那么你也就见过了异步callback的样子了。

下面是一个简单的例子：

conR D l ! @ j K ` ?sole.log(\'hi\');

setTimeout(fuq 1 i m 4 V $ C nction(){
    console.log(\'there\');
},5000);

console.log(\'JSConfEU\');

我们用这个简单的例子提醒一下大家我们讲到哪里。我们conso6 ( ile.log \"hi\",然后执行setTimeout。但是这个setTimeout的执行会把console.log入队到未来某个时刻去执行。我们跳过这个lo8 | b A 6 a Fg，转而去log“JSConfq j [ : g r N OEU”。5秒钟之后，我们会看到一个“there”的l: Q F V N ( { `og，是吧？这个过程没问题吧？不错。基本上，我们都知道这就是set| U k s 7 k D @Timeout要做的事情。显然，异步callback是跟我们之前见到的call stack有关的。那么是如何相关法呢？我们先把代码跑起来。首先console.log(\'hi\')入栈，然后是seT E E 9 * E m / %tTimeout。我们知道这个setTimeout是不会马上执行的，s 8 x } B ? S而是会在5秒钟之后才执行。我们不能把它推入到栈中。因为我们目前还没有找到恰当的方式去描述它，所以就暂时假设它无缘无故消失了。当然，我们在后面会回来讲它的。setTimeout无缘无故消失后，我们就将console.log0 I P ` 0 (\'JSConfEU\')入栈，然后log“JSConfEU”。最后，call stack被清空了。5秒钟之后，console.log(\'there\')神奇地出现在call stack上面了。这是怎么回事呢？这时候该是event loop和concu^ - A + frrency出场的时候了] l 6 P。是的，我已经反反复复跟你说，javascript在一个时间段里面只能做一件事件。打个比方，你不能在执行其它代码的时候让它（G ~ p译者注：它指的是javascript运行时）发起一个AJAX请求。你不能在执行其它代码的时候执行setTimeout。而我们之所以能以并行的方式去做事情，那是因为浏览器的能力远在javascript运行时之上（译者注：浏览器是javascrip+ M L 5 ) } !t运行时的超集，javascript运行时之外还有别的东西）。记住下面这种图：

确实，javascript运行时在一个时间段里面只能做一件事，但是浏览器给了我们其它的东西。它给了我们一个叫webAPI的东西，这些都是一些有效的线程。你可以调用它们，它们能够知道并发的发生，并承接住这 { + D ( G - n F些并发。如果你是后端开发人员。这张图所阐述的机制跟noV X , z L 1 Tdejs差不多。在nodejs里面，webAPI得换成了c++ API了。当然，还有一些被c++隐藏起来的线程。既然，我们已经有了这张图，我们不妨以“浏览器”这个全局的视角来看看这段代码是如何被执行的。

跟之前演示的那样，执行console.log“hi”，把“hi”打印到控制台，接下来，来看看当我们调用setTimeout的时候到底发生了什么。我们把J t 5 0 Y一个callback函数和需要延迟的毫秒数传入到setTimeout调用中。现在，对于我们来说，setTimeoout就是一个由浏览器提供给我们的API。9 J t Y a y它的实现源码并不在vg # z8的源码里面。这是正在运行中的javascript运行时之外的东西。浏览器会另外给你设定一个倒计时。浏览器中的这部分代码负责为你倒数时间。这也就是说，setTimeout调用已经完成了，我们二话不说+ { j J n就把它从call stack中pop出去。接着是log“JSConfEo 9 b ( B w x 8U”。我们已经在webAPI中启动了一个5秒中倒计时。

现在，webAPI不L S y 5 v P 0能直接修改你的代码。它不g * # : ^ ` . y能在自己准备好的时候直接将一些代码块推入t ] h e M { 3 !到call stack中。如果它真的这么干的话，这些代码块就会随机地插入到你当前代码的中间} q ] H [ 1 u c h，这岂不是乱套了。到了这里，是时候让task queue或者说callback queue（译者注：之后统一采用“task queue”的- 6 S p叫法）参与进来了。任何一个web API一旦它完成了自己的任务后，就会把相关联的callback推入到task queue中。最终的最终，我们终于凑齐了讲解了event loop，本次演讲的题] z E目：“what the heck is thE i ;e event lV s , y $ 0oop?”的所有要素了。

那到底什么是event loop呢？event loop就好像是whole equation（整个方程？）中的一个最简单的小片段。它有一个简单的* % n = , . m G任务。那就是同时监视call stack和task queue。如果call stack当前处于清空状态的话，那么event loop就会把task queue的排在第一个东西（callback）pop出来，推入到call stack中去运行。 回归到这个演示中来。我们看到当c j + H K H L前call stac+ i P { r ^ F +k是为空的，而且有个一cW t r t Fallback在task queue上。看到自己来活了，event loop马上就运作起来( f $ [的。它把这个callback推入到call stack中。时刻记住& 0 8 % ` 3 k ?，call stack是javascript的地盘，它背靠v8这颗大树。它的地盘它做主。于是乎，这个刚出现的callbackh . e M f 6 9 g Y马上就被执行了-consolX p j ! de. ) ilog(\'there\')被执行了，在控制台，“there”被打印出来。到这，call stack被清空了，我V K 6们的代码彻彻g U w +底底被执行完了。大家理解了没呢？everyow a $ne，where me？（译X n b者注：意思是大家都没睡着吧，看到我吗？）完美！

好的，我们已经看到了ev[ S U U uent loop的基本工作流程了。在你跟异步编程打交道的过程中，你遇到的众多情景中的其中一个是这样的：人家不跟你说明到底啥原因，就是让你用0毫秒去调用setTimeout。这时D ? 8 $ n U { ] p候你可能心里在想：“稍等，你让我在0毫秒后执行这个函数。我为什么要把我的代码包裹在一个0毫米的setTimeout里. # x 2面呢？这样做意义何在呢？”。当你第一次遇到这种情况的时候，应该跟我一? M ? i ` ; r样，肯定很困惑。我们都知道这种写法肯定是做了什么，但是不知道其中的具体原因。这里也不卖关6 ` p ;子了，具体原因就是人们想要把代码延迟到call stack清空后才执行。那么下面我们来演示一下用0毫秒去调用setTimeout% f 5 Q 7 1 ,的情况。如果你写过javascripZ O + mt代码，你就会知道跟上面的例子（非0毫秒去调用setTime^ o i aout）的结果是一样的。 我们将会看到依次打印“hi”和“JSCA i R ? f T 6onfEU”，“there”将会在最后打印。下面我们看看具体的演示。在call stack以0毫秒去调用setTimeout，setTimeout马上就会从call stack中pop走。接着它的callM 0 A W a j ` T 8back会7 % N z M # @马上被webAPIpush到task queue中。请记住我说过关于event loop的话。I H V nevey c #nt loop必须等到当前call stack清空之后才能把task queuR m i n G V 1e中的callback推入到call stap T p / . S M /ck去的。所以，当前没有清空的call stack会继续执行a T b I a a & ]。于是乎，我们先看到打印\"hi! ) g C Z L\",然后看到打印“JSConfEU”，此时call stack已经清空了，是时候event loop参与进来的，最后调用了你的callback。不管基于何总原因，我们都可以把代码的执行延迟到call stack最后一帧或者等到call stack清空后再执行。上面提到的以0毫秒去调用s~ I uetTd H N l U m { 7 (imeout只是这8 / B T B _ e种做法的一个示例而已。所有的webAPI都. g _ % v是以相同的原理在工作。现在假设我们要准备着callback向一个URL发起一个AJAX请求。这代码的执行原理跟l y + F上面提到的setTimeout都是一样的。oops，对不起。consolP ? Qe打印“hi”，然后浏览器使用webA$ E 8 G d rPI发起了AJAX请求。记住，真正实现发起AJAX请求的源代码不在javascript的运行时中，而是在浏览器对webAPI的实现源码里面。所以，我们保存着allback，把小菊花转起来，默默等待。然后，继续执行我们在call stack中代码。直到AJAX请求完成或者永远都完成不了。现在咱们假设这个AJAX请求完成了，那么它对应的callback会马上被推入到task queue中，因为此时call stack清空了，所以，它被event loop选中了，推N R r F入到call stw e * v _ Aack中跑起来了。javascript的异步调用背后所发生的事情大` ( * x F `概就是这么多了。

下面，让我们来跑一个疯狂的，复杂的示例吧。我希望这段代码能够跑起来。可能你们不知道吧，这次演讲的所有PPT我都是在keynote上完成了。单单是当前这张幻灯片就有大概500个动画步骤（代码爆炸，化为灰烬，观众大笑）。

译者注：外国友人很少会把PPT称为“PPT”，正统的叫法应该“Slides（片子）”或是“Deck”，前者意指单张或几张PPT页，后者意指一整套PPT报告（就像a deck of cards)。

哇，真糸得意。我在这里给出个链接。嗯....大伙们，我放得够大吗？大家能看见吗？好的。基本l & - h ^ * [ ! 这次演讲思路和PPT都是沿用了今年初SM m S W M s } # Tcotlan JS上的东西。在那次演讲之后，我损坏了大半部分的PPT。然后，自己又没有耐心去重做那些PPT。因为用keynote做PPT真的是一件（坐到）屁股疼的事情。所以，我选择了一条捷径。我自己写了一个工具用来可视化javascript的运行时机制。这个V N N工具叫做loop。下面，我们用这个新工具把这个例子跑起来吧。

console.log(\'Started\');

$.on(\'button\', M s O ; % }\'c: H e &lick\I . 0 % M k w 9 %', function onClick(){
    consol{ g K _ # { ! 8e.log(\'Clicked\');
});

setTimeout(function onTimeout(){
    console.log(\'Timeout finishedx 8 v l { Y U\');
}, 5000);

console.k 2 C 8log(\'Done\');

这个例子基本上跟前面的例子差不多，只不过我没有使用shim过的XHR。使用shim过的XHR来演示完全可行，只不W i ! D q ?过我这里没有这么干而已。正如你所看到的那样，我们的代码u L ] 4是就是为了log点东西出来。首D w N F n f ~先，$.onl ] V H()是对addEventListener的一个封装，然后是以5000毫秒调用setTimeout。最后，log一个“Done”。下面我们真正把代码跑起来，看看到底发生了什么。

代码开始后，打印个“Stm p 3 A + l 5 1 ,arted”后，刚入栈的$.on()和setTimeout都会马上被pop出去，然后$ x , J s 9 0加入到webAPI的地盘中去。call stack中的代码继续执行。5000毫秒到了，我们就把callback推入到task queue中去。; . m a _ e 1此 t h / y m U p时ck 4 z = @ Nall stack处于清空状态，所以callback会被推入到call stack去执行。最后打印出“Timeout finished”，代码执行完毕。如果我点击一下页面的按钮，那* X { ^么浏览器就会触发webAPI的执行，把点击事件的e W ( 2callback推入到task queue中去。call stack为空，然后把callback推入到call stack中执行。如果我们连续点击100多次，我们能看到会发生什么。在我点击按钮之后，click的callback不会被马上执行，而是推入到task queue。当event loop开始安排task queueZ g a 0 z T的时候，click的callback才能被处理到。是吧？我还有好几个例子。我们将通过这些例子来谈谈你跟异步API打交道过程可能遇到的但是& @ L 5 L = M | 2没有去深究的东西。我将会使用这个loop的工具来进行演示。

首先第一个例子是以1秒的延迟调用setTimeout四次，每次都是在1秒后打印“hi”：

setTimeout(fu$  F ! 5 7 ?nction onTimeout(){I 9 # * R y I W %
    consoleS _ } 5 C X.log(\'hi: S g x\');
}, 1000);

setTimeout(function onTimeout(; i d H  ,){
    console.log(\'hi\L l * P');. P 5 . u Y h
}, 1000);

setTimeout(function on % *Timeout(){
    consoc e ! @ p  j Nle.log(\'hi9 x l H u _U G Z 7');
}, 1000);

setTimeout(function onTimeout(){
    consU 7 % a = 5 6 K -ole.log(\'hi\');
}, 1000);

等到所0 ^ 6 O p J @ g有的callback被入队到task queue之时，没有任何一个callback被执行。此时，第四个callback还没有执行，时间已经超出了它所要求延迟的1秒了。是吧。这个例子说明的是javascript} 6 % ^ I 2 M ?中的time out的实质含义。我们传入延迟时间（以毫秒为单位）代表的正是可执行的最小时间，而不是确切的时间。浏览器并不能保证在你传入的延迟时间内执行你的callback。以0毫秒调用setTimeout也是一样的。你的callba* 0 Y pck不会马上，立即被执行，而是被承诺为尽快地执行。是吧。

下面这个例子，我想来谈论一下callback。callback这个概念的定义取决于跟谁说和它们如何被解析的。 caS A X tllback这个概念可以有两种定义。第一种是，凡是被别的函数所调用的函数都可以称之为callback；第二种是，X o a `更加明确地指那种提供给异步操作的，最终会被推入到task queue的函数 。下面这一点代码会演示一下着两者的不同：

// 同步版本
[1,2,3,4]b = / f [ ) E C E.forEach(function(i){
    console.log(i);
});

// 异步版本
function asyncForEach(array, cb){
    array.forEach(function(i){
        setTimeout(cb.bind(null,i), 0);
    })
};

asyncForEach([1,2,3,4],function(i){
    console.log(i);
});

对于同步版本的代码，我们在数组上调用了forEaD Q T $ [ch方法，forEach接受一个I N Q 2 @ + j , )函数作为参数，尽管这个函数不是被异步执行的，但是它是跑在当前的call stack中，你也可以称这个函数为callback。我将会运行这段示例代码，让我3 I d % s 7 T b h们看看这两者之间的差异到底f : , [ B 8 N是什么。首先，同步版本的代码先运行了。整个代码块将会推入到call stack中，8 + 2 ` 8 z它就在这里占用并阻塞着call stack，是吧？直到当前call stack清空，才轮到异步版本的代码执行。是的，执行速度降下来了。实y z o d & L O f际上，我们将好几个callr t r I e 2 ?back推入到了task queue中了。等到当前call stack清空了，我们才能依次地从task queue中把callback弹出来，推入到call stack 中运行，最终打印出所遍历的元素。在这个例子中，conw # Y H M sole.log()4 V e ^ l @ | G的执行足够快，所以使用异步方式来遍历数组的好~ n M a R u G处并没有体现出来。假设，你现在在遍历数组的过程中对数组的元素做一些比较R t w耗时的操作的时候，那么，异步方D , t式的写法的好处就会体现出来。我好像有在哪里写过这种例子，噢，不，我应该记错了，我没有这样的例子。好吧i @ q j } i { V，我们改造? U + a &一下上面这个例子来进行说明：

function delay() {
// just do the slow thing    
}

// 同步版本
[1,2,3,4].forEac_ & dh(function(i){
    console.log(o [ t P p J S =\"Processing sync\"} W t K j );
    delay();
});

// 异步版本
function asyncForEach(array, cb){
    array.forEach(function(i){
        s1 A Q 7 E 6 l 3 SetTimeout(cbL # b J D ,.bind(null,i), 0);
    })
};

asyncForEach([1,2,3,4],function(i){
    console.log(\"Processing async\");
    delay();
});

好的，现在我打算打开一个模拟浏览器repaint或者说render的开关。这个开关是我这个早上比较匆忙整合都这个lf z joop工具的。目前，我没有提到的一点是所有的这一切（call stack, webAPI,task queue和event loop）是如何界面渲染打交道的。好吧，我貌似提到过，但是没有去深入解释它。可以这么说，浏览器的运行是受你当前正在执行的javascript代码所约束的。理想状态下，浏览器想要以1秒60帧的速度1 n h l 8（也就是花16毫秒去完成一帧的渲染）去渲染屏幕的y m { P K : ! a 6。60FPS是浏览器所能达到的刷新界面的最快的速度了。这里再次强调，60FPS这种理想状态是受正在执行的ja+ | (vascript代码所约束的。如果当前call stack不为空的话，实际上浏览器是g P ! f ` S无法进行界面重绘的。 你可以把界面渲染理解为一个有callback与之对应的异q s M 2 S J # X @步操作。这% I 9 r N Y 2 K种render callback也是需要等待call stack清空之后才能执行的。render callback与普通的入队到task queue的callback相比( B，不同之处在于，render callback比普通的callback的优先级要高。每隔16毫秒，浏览器就会往render queue上入队一个render callback。这些render callback必须等到当前的call stack清空才能被执行。这里所提到的“render queue”是因为要解释界面渲染机制而模拟出来的。这就好像，每隔1秒，render queue就会问浏览器：“我可以做界面渲染了吗？”。浏览器回答：“是的，你可以。”，然后又再下一秒进行如此类推的对话。

是的，因为当前我们的代码并没有做一些阻塞call stack的事情。如果我把上面的这个同步版本的代码跑起来的话，你可以看到，当我们通过同步执行的loop对数组进行很耗时的遍历的时候，我们的界面渲染工作是被阻塞掉的。一旦界面渲染工作被阻塞掉的话，那么你就不能在界面上对文本进行选中，你也不能看到任何点击之后的界面反应。是吧，这种情况我们在早先的那个例子又看到过。虽然，在同步版本中也会阻塞当前call stack。但是因为time out的时间为0，所以阻塞的时间是相当的短的。而在此之后，在执行两个个数组元素的操作的缝隙，我们给了render queue一个时机去执行render callback。这是因为故意把对数组元素进行操作的callback编排为异步callback。它们最终被入Q = b q队到taE y A T X bsk qV d ; uueue中去。鉴于render queue的优先级比task queue高，所有render callback能跟操作数组元素的callback交替进行，从而避免了界面较长时间里面无法得到刷新。不知道大家理解% a = s ! d -不？虽然，上面引入render queue是为了可视化地解释界面渲染的工作原理。但是基本上它能正确地指出一个事实。那就是，当人们说“不要阻塞event loop”的J | ,时候，他们实际在说“不要一些耗时的代码放在call stad T d C m U y Dck上，以免它们长期占用call stack”。因为，一旦你这么做了，call stackQ _ 9 M长时间内得} Y q 9 ) n b H &不到清空，那么浏览器也就没法完成一些它们需要急* v y ( H t , ? L着做的事情了－比如说，创建一( s i s 8 9 l (个流畅o n m : { E的界面浏览体验。这也是为什么当你用javascript在做一些图片处理工作或者动画而又没有h U $好好地编排你的代码的时候，界面上的很多东西都j i : F 3会变得很慢G - n 9 G _ p D的原因。

下面就是一个因为javascript代码没有得到很好编排Z B C M / ( &而导致界面变慢的例子。这是一个处理scroll事件的例子。

DOM中的scroll事件的触发o x c 3 8 w =是很频繁的。怎么个频` N i Y v b l L繁法呢？我相信它们的触发速度跟最佳界面刷新率60FPS是一样的，= S Y j l 6 5也是16毫秒触发一次x u /。假如，我有以下代码。我在document对3 , f r ^ ] i象上对scroll事件做了监听，同时监听的callback主要负责做一些动画或者其它一些耗时的活。当我们滚动页面的时候，那么就会有大量的callback涌入到task queue中，是吧 ？

最后浏览器都必须处理一个个地处理这些callback。每个callback执行起来都是挺慢的。这个时候Z X A 6 * f，你不是阻塞call stack，你是直接用callbackk T ~“淹没”了task queue。这种情况跟将触发大量callback背* l i J ] G p d后的情况进行可视化很像。当然，通过debounce来减少callback的执行从而增加call stM 1 G = 0 $ F Tack的空闲时间，这种方式也是可行的。但是，我采用的另外一种方式。我将这些event callback全数推入tasL L 4 C _k queue，但是我们每隔几秒钟或者等用户停止滚动后的一小段时间后就做一些耗时的操作，这种方式也是] p L K x )可行的。我会有另外一个专门来讲述这个可视化loop工具的实现原理的演讲。这实现原理大体是这样的：当代码运行在运行时的时候，我通过使用一个叫EspA + f [ t #rima的javask Y M & ? 7 [crO t t : N t v ~ipt parser来执行这段代码来降低代码的执行速度。具体通过往里面插入一段耗时半秒中的大while循环来达到的。把Esprima放在了web worker上，同时在上面完成了可视化这段代码执行流程所需要做的所有事情。我的那个完整的演讲将会深入探究其中细节。对于这次演讲的到来，我感到十分的兴奋。到那个时候，我将会跟大家好好唠唠这事，届时就功德圆满了。好吧，就这样。谢谢大家。