译者按
这篇文章可以看做是对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出来。
整个过程到底都发生了什么呢?我们来看一下:
- 执行进入
console.log('Hi');
函数,因此这个函数被丢进了调用栈里。 console.log('Hi');
函数return了,因此他就被弹出了栈顶。- 执行进入
setTimeout
函数,因此这个函数被丢进了调用栈里。 setTimeout
是Web APIs
的一部分,因此Web APIs
处理了他,并且等了2秒- 继续执行脚本,进入
console.log('EvenyBody')
函数,把他也丢进调用栈。 console.log('EvenyBody')
函数return了,所以把他从栈顶弹出去- 2秒的定时已经完成了,所以就把对应的回调函数放到回调队列里。
- 事件循环检查调用栈是否为空,如果非空的话,他就等着。因为调用栈现在是空的,所以把回调队列中的回调函数丢进调用栈。
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,什么不是,哪个部分是运行时,哪个部分是浏览器的和我们该怎样有效的使用事件循环。好好看看这个视频吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。