解释JavaScript的事件循环

这个帖子关于什么

浏览器普遍将JavaScript作为脚本语言，这篇文章有利于你对JavaScript的事件驱动交互模型有一个基本的理解，和JavaScript中的事件驱动交互模型与其他语言例如Ruby，Python，Java中传统的请求-响应模型有什么不同，在这个帖子中，我会解释一些JavaScript并发模型的核心概念，包括事件循环和消息队列，希望能提高你对这门可能你写了很久但是没有完全理解的语言的理解

这个帖子为哪些人写的

这个帖子的目标是在客户端或者服务端使用JavaScript开发的开发者，如果你已经非常精通事件循环，那么这篇文章你会感到很熟悉，但是如果你不是这些人，我希望去提高你的基本理解，这样你就能�更好理解你每天读和写的代码

非阻塞I／O

在JavaScript中，几乎所有的I／O是非阻塞的，包括HTTP请求，数据库操作和硬盘读写；单线程操作要求运行时只能执行一个操作，提供一个回调函数然后去做其他事，当操作已经完成，一个消息伴随着一个回调函数进入消息队列。在未来的某个时候，消息从队列中移除并调用回调函数

然后开发者可能已经熟悉这个交互模型，开发者已经习惯于用户交互界面的工作方式，事件例如'mousedown'，'click'可以在任何时间触发，它和同步的，传统服务端应用运用的请求-响应模型是不同

让我们比较两段向www.google.com发起请求然后得到响应在控制台打印响应的代码，首先，Ruby使用Fataday：

response = Faraday.get 'http://www.google.com'
puts response
puts 'Done!'

这个执行过程是简单如下：

1. 执行get方法和线程等待直到收到响应
2. 从google收到响应然后返回给调用者储存在一个变量中
3. 变量的值（在这个例子中表示响应）输出到控制台
4. "Done!"输出到控制台

让我们在JavaScript使用Node的Request库来做同样的事：

request('http://www.google.com', function(error, response, body) {
  console.log(body);
});
console.log('Done!');

看起来只有一点不同，但是行为是非常不同的

1. 请求函数执行，传递一个匿名函数作为回调函数，当未来某个时间点响应是可用的时候执行回调函数
2. "Done!"立即输出到控制台
3. 未来某个时间，响应回来和执行回调函数，在控制台输出响应body

事件循环

解耦调用者和响应，允许JavaScript运行时在等待异步操作完成和触发回调函数的时候可以做其他事情，但是回调函数在内存中的哪里？回调函数的执行顺序？什么导致回调函数被执行？

JavaScript运行时包括一个消息队列，消息队列是一个储存着被处理的消息和相关回调函数的列表。这些消息在外部事件被响应的时候（例如一个鼠标被点击或者从一个HTTP请求收到响应的时候）给予一个已经提供的回调函数排进消息队列。设想一下，例如一个用户点击一个没有提供回调函数的按钮，那么没有消息会被排进消息队列

在一个循环中，这个队列查询下一条消息（每次查询表示为一个"tick"）然后当遇到一个消息的时候，这个消息关联的回调函数被执行

Paste_Image.png

这个回调函数调用充当调用栈的初始帧，由于JavaScript是单线程的，后续消息的查询和处理被停止，等待调用栈中所有的调用返回。后来的（同步的）函数调用在调用栈中增加一个新的调用帧（例如，函数初始调用函数是changeColor）

function init() {
  var link = document.getElementById("foo");
  link.addEventListener("click", function changeColor() {
    this.style.color = "burlywood";
  });
}
init();

在这个例子中，一个消息（和回调函数，changeColor）在用户点击在'foo'元素上的时候和'onclick'事件触发的时候被排进队列中。当这个消息从队列中排除的时候，他的回调函数changeColor被调用。当changeColor返回（或抛出一个错误）的时候，事件循环继续执行。只要函数changeColor存在，指定作为'foo'元素onclick的回调函数，后续点击在元素上将导致更多的消息（和关联的回调函数changeColor）排进队列

排队中额外的消息

如果一个函数调用在你的代码中是异步的（例如setTimeout），这个提供的回调函数将作为一个不同的队列消息的一部分最后执行，在事件循环未来的一些tick中，例如

function f() {
  console.log("foo");
  setTimeout(g, 0);
  console.log("baz");
  h();
}
function g() {
  console.log("bar");
}
function h() {
  console.log("blix");
}
f();

由于setTimeout非阻塞的特性，它的回调函数将至少0毫秒后在未来被执行，并且不是作为这个消息的一部分被处理。在这个例子中，setTimeout是被调用， 传递一个回调函数g和0毫秒的延迟。当指定的时间到了（在这个例子中，几乎马上就到），一个分离的消息包含回调函数g将被排进消息队列。控制台活动的结果将看起来像这样，"foo"，"baz"，"blix"然后事件循环的下一个tick："bar"。如果在同样的调用帧setTimeout发起两次调用----传递同样的值作为第二个参数----他们的回调函数将按照调用顺序排进消息队列

Web Workers

使用Web Workers让你卸下分离执行线程的昂贵操作，释放主线程去做其他事。Worker包括一个分离的消息队列，事件循环和实例化的从原始线程分离的独立的内存空间。Worker和主线程之间的通信通过消息传递，消息传递看起来非常像传统的，我们之前已经见过的事件模型

Paste_Image.png

首先，我们的Worker：

// our worker, which does some CPU-intensive operation
var reportResult = function(e) {
  pi = SomeLib.computePiToSpecifiedDecimals(e.data);
  postMessage(pi);
};
onmessage = reportResult;

其次，HTML中Script标签中主要的代码块

// our main code, in a <script>-tag in our HTML page
var piWorker = new Worker("pi_calculator.js");
var logResult = function(e) {
  console.log("PI: " + e.data);
};
piWorker.addEventListener("message", logResult, false);
piWorker.postMessage(100000);

在这个例子中，主线程产生一个Worker并且注册logResult回调函数在"message"事件上。在Worker中，reportResult函数注册到它自己的"message"事件中。当Worker线程收到来自主线程的消息，worker将消息和相应的回调函数排进队列。当从队列中排除的时候，一个消息被传递回主线程，一个新的消息（伴随着logResult回调函数）被排进队列。使用这种方式开发者可以委托运算密集行操作给分离的线程，释放主线程继续处理消息和处理事件

关于闭包的一些笔记

JavaScript的支持闭包允许你注册回调函数，当执行时，有权访问函数创建的环境，甚至回调函数的执行创建一整个新的调用栈。这是特别有趣的知识，回调函数被调用作为不同消息的一部分而不是他们创建的那个消息，思考下面的例子：

function changeHeaderDeferred() {
  var header = document.getElementById("header");
  setTimeout(function changeHeader() {
    header.style.color = "red";
    return false;
  }, 100);
  return false;
}
changeHeaderDeferred();

在这个例子中，changeHeaderDeferred函数被执行包括变量variable。函数setTimeout被调用，导致一个消息（加上changeHeader回调函数）被添加到消息队列大约100毫秒后。changeHeaderDeferred函数然后返回false，结束处理第一个消息----但是header变量仍然被通过闭包引用着，并且不会被垃圾回收。当第二个消息被处理（changeHeader函数），它有权访问header变量在外部的函数作用域。一旦第二个消息（changeHeader函数）被处理，header变量将会被垃圾回收

顺带一说

JavaScript的事件驱动交互模型不同于已经习惯的许多程序中的请求-响应模型----但是就如你所见，它不是什么黑科技。使用一个简单的消息队列和事件循环，JavaScript使开发者能围绕着异步触发的回调函数来构建系统，当等待外部事件发生的时候释放运行时去处理并发操作。然而，这仅仅是一种接近并发的方法。在这篇文章的第二部分我将和那些已经创建的在MRI Ruby（使用线程和GIL），EventMachine（Ruby），Java（线程）来比较JavaScript的并发性模型

额外阅读

• The JavaScript Event Loop: Concurrency in the Language of the Web
• Concurrency model and Event Loop@MDN
• An intro to the Node.js platform, by Aaron Stannard
• Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014

原文

The JavaScript Event Loop: Explained