共计 2550 个字符,预计需要花费 7 分钟才能阅读完成。
译者按这篇文章可以看做是对 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,什么不是,哪个部分是运行时,哪个部分是浏览器的和我们该怎样有效的使用事件循环。好好看看这个视频吧。