并发模型

下面的内容解释了一个理论上的模型。现代 JavaScript 引擎着重实现和优化了描述的几个语义。

运行时

下图是 JavaScript 运行时的可视化描述：

从图中可以看出，其主要包含了栈、堆、队列等数据结构。

栈

用于函数执行的「调用栈」，英文名为「call stack」。

function foo( b ) {
  var a = 10;

  return a + b + 11;
}

function bar( x ) {
  var y = 3;

  return foo(x * y);
}

console.log(bar(7));

JavaScript 解释器会将每个函数调用形成一个栈帧。当调用 bar() 时，创建了第一个帧 ，帧中包含了 bar() 的参数和局部变量；当 bar() 调用 foo() 时，第二个帧就被创建，并被压到第一个帧之上，帧中包含了 foo() 的参数和局部变量。

|-----------|
|   foo()   |
|-----------|
|   bar()   |
|-----------|

当 foo() 返回时，最上层的帧就被弹出栈，剩下 bar() 函数的调用帧；当 bar() 返回的时候，栈就空了。

堆

用于表示一个大部分非结构化的内存区域，对象会被分配到这里。

队列

待处理的消息队列，每一个消息都有一个为了处理这个消息相关联的函数。

在事件循环期间的某个时刻，运行时总是从最先进入队列的消息开始处理。这个消息会被移出队列，并将其作为输入参数调用与之关联的函数。为了使用这个函数，在调用时会为其创建一个新的栈帧，周而复始。

函数的处理会一直进行直到调用栈再次为空，然后事件循环将会处理队列中的下一个消息（如果还有的话）。

事件循环

之所以称为「事件循环」，是因为它经常被类似如下的方式来实现：

while ( queue.waitForMessage() ) {
  queue.processNextMessage();
}

如果当前没有任何消息，queue.waitForMessage() 会用同步方式等待消息到达。

执行至完成

只有在一个消息被完整地执行后才会去执行其它消息。当你分析你的程序时，这点提供了一些优秀的特性，包括每当一个函数运行时，它不能被抢占，并且在其他代码运行之前完全运行（且可以修改此函数操作的数据）。这与 C 语言不同，例如，如果函数在线程中运行，则可以在任何位置终止然后在另一个线程中运行其他代码。

这个模型的一个缺点在于，当一个消息需要很长时间才能完成时 web 应用无法处理用户的交互，比如点击或滚动。浏览器用「程序需要过长时间运行」的对话框来缓解这个问题。一个比较好的做法是使消息处理缩短，可能的话就将一个消息裁剪成多个消息。

添加消息

在浏览器里，当一个事件出现且有一个事件监听器被绑定时，消息会被随时添加；如果没有事件监听器，事件会丢失。所以，点击一个附带点击事件处理函数的元素会添加一个消息，其它事件亦然。

调用 setTimeout() 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入，时间参数的值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout() 消息必须等待其它消息处理完。因此，第二个参数仅仅表示最少的时间而非确切的时间。

零延迟

零延迟并不是意味着回调会立即执行。在零延迟调用 setTimeout() 时，并不是过了给定的时间间隔后就马上执行回调函数。其等待的时间基于队列里正在等待的消息数量。在下面的例子中，"this is just a message" 将会在回调获得处理之前输出到控制台，这是因为延迟是要求运行时处理请求所需的最小时间，但不是有所保证的时间。

(function() {
  console.log('this is the start');

  setTimeout(function cb() {
    console.log('this is a msg from call back');
  });

  console.log('this is just a message');

  setTimeout(function cb1() {
    console.log('this is a msg from call back1');
  }, 0);

  console.log('this is the end');
})();

// "this is the start"
// "this is just a message"
// "this is the end"
// note that function return, which is undefined, happens here
// "this is a msg from call back"
// "this is a msg from call back1"

多运行时间通信

一个 web worker 或者一个跨域的 <iframe> 都有自己的栈、堆和消息队列。两个不同的运行时只能通过 window.postMessage() 方法进行通信。如果后者侦听到 message 事件，则此方法会向其他运行时添加消息。

宏任务与微任务

宏任务

微任务

永不阻塞

JavaScript 的一个非常有趣的特性是事件循环模型，与许多其他语言不同，它永不阻塞。 处理 I/O 通常通过事件和回调来执行，所以当一个应用正等待 IndexedDB 查询返回或者一个 XHR 请求返回时，它仍然可以处理其它事情，如用户输入。

例外是存在的，如 alert() 或者同步 XHR，但应该尽量避免使用它们。注意，例外的例外也是存在的（但通常是实现错误而非其它原因）。