并发模型
下图是 JavaScript 运行时的可视化描述:
从图中可以看出,其主要包含了栈、堆、队列等数据结构。
用于函数执行的「调用栈」,英文名为「call stack」。
JavaScript 解释器会将每个函数调用形成一个栈帧。当调用 时,创建了第一个帧 ,帧中包含了 bar()
的参数和局部变量;当 bar()
调用 foo()
时,第二个帧就被创建,并被压到第一个帧之上,帧中包含了 foo()
的参数和局部变量。
当 返回时,最上层的帧就被弹出栈,剩下 bar()
函数的调用帧;当 bar()
返回的时候,栈就空了。
堆
待处理的消息队列,每一个消息都有一个为了处理这个消息相关联的函数。
在事件循环期间的某个时刻,运行时总是从最先进入队列的消息开始处理。这个消息会被移出队列,并将其作为输入参数调用与之关联的函数。为了使用这个函数,在调用时会为其创建一个新的栈帧,周而复始。
函数的处理会一直进行直到调用栈再次为空,然后事件循环将会处理队列中的下一个消息(如果还有的话)。
之所以称为「事件循环」,是因为它经常被类似如下的方式来实现:
如果当前没有任何消息,queue.waitForMessage()
会用同步方式等待消息到达。
执行至完成
只有在一个消息被完整地执行后才会去执行其它消息。当你分析你的程序时,这点提供了一些优秀的特性,包括每当一个函数运行时,它不能被抢占,并且在其他代码运行之前完全运行(且可以修改此函数操作的数据)。这与 C 语言不同,例如,如果函数在线程中运行,则可以在任何位置终止然后在另一个线程中运行其他代码。
在浏览器里,当一个事件出现且有一个事件监听器被绑定时,消息会被随时添加;如果没有事件监听器,事件会丢失。所以,点击一个附带点击事件处理函数的元素会添加一个消息,其它事件亦然。
调用 setTimeout()
函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入,时间参数的值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息,消息会被马上处理。但是,如果有其它消息, 消息必须等待其它消息处理完。因此,第二个参数仅仅表示最少的时间而非确切的时间。
零延迟
零延迟并不是意味着回调会立即执行。在零延迟调用 setTimeout()
时,并不是过了给定的时间间隔后就马上执行回调函数。其等待的时间基于队列里正在等待的消息数量。在下面的例子中,"this is just a message"
将会在回调获得处理之前输出到控制台,这是因为延迟是要求运行时处理请求所需的最小时间,但不是有所保证的时间。
一个 web worker 或者一个跨域的 <iframe>
都有自己的栈、堆和消息队列。两个不同的运行时只能通过 window.postMessage()
方法进行通信。如果后者侦听到 事件,则此方法会向其他运行时添加消息。
JavaScript 的一个非常有趣的特性是事件循环模型,与许多其他语言不同,它永不阻塞。 处理 I/O 通常通过事件和回调来执行,所以当一个应用正等待 IndexedDB 查询返回或者一个 XHR 请求返回时,它仍然可以处理其它事情,如用户输入。
例外是存在的,如 alert()
或者同步 XHR,但应该尽量避免使用它们。注意,例外的例外也是存在的(但通常是实现错误而非其它原因)。