JavaScript工做原理（一）：引擎，运行时，调用堆栈

概述

几乎每一个人都已经据说过V8引擎这个概念，并且大多人都知道JavaScript是单线程的，而且使用回调队列。

这篇文章中，咱们将详细介绍这些概念，并解释JavaScript实际运行的原理。经过了解这些详细信息，将可以编写更好的非阻塞应用程序，以正确利用所提供的API。

JavaScript引擎

最流行的JavaScript引擎莫过于Google的V8引擎，V8使用C++开发，Chrome浏览器和Node.js都是基于V8引擎的，简略的示意图：

V8引擎包含两个主要组件：
内存堆(Memory Heap)：负责内存分配
调用栈(Call Stack)：代码执行时，维护堆栈帧(Stack Frames)

运行时

几乎全部的JavaScript开发者都使用过setTimeout这样的API，然而这些APIs不是由V8引擎提供的。那这些APIs是哪来的呢？

尽管咱们已经有了V8引擎，但实际上咱们还须要更多的接口或功能。咱们把那些由浏览器提供的接口称为Web APIs，好比DOM，AJAX，setTimeout等等。

接下来是事件循环（event lool）和回调队列（callback queue）。

调用栈（Call Stack）

JavaScript是一种单线程编程语言，这意味着它只有一个调用栈。所以，在同一时间它只能作一件事。

调用栈是一个数据结构，它会记录代码执行的位置。例如咱们执行进入一个函数，咱们会把这个函数放在堆栈的顶部，函数执行结束返回以后，咱们把这个函数从堆栈中移除。这就是调用栈的功能。

简单代码示例：

function multiply(x, y) {
    return x * y;
}

function printSquare(x) {
    var s = nultiply(x, x);
    console.log(s);
}

printSquare(5);

当引擎执行这段代码时，调用栈为空，以后运行以下：

每一个Step叫作堆栈帧（Stack Frame）。

调用栈就是经过堆栈帧来追踪异常，堆栈帧基本就是调用栈出现异常时候的状态。示例代码以下：

function foo() {
    throw new Error('SessionStack will help you resolve crashes :)');
}

function bar() {
    foo();
}

function start() {
    bar();
}

假设上面代码保存在foo.js文件，执行上面代码在Chrome浏览器中，Error的堆栈信息会以下图打印出来：

单线程执行代码是没法充分利用CPU资源，使得运行效率低。因为JavaScript只有一个调用栈，若是运行效率变低，那应该怎么解决呢？

并发和事件循环

想像一下若是调用栈里面有些函数的执行须要大量的时间，例如在浏览器中进行复杂的图片转化，状况会怎么样，为何会有问题？

问题就是调用栈中的函数在执行的过程当中，浏览器是不能作其它事情的，也就是会被调用栈中的函数阻塞，此时浏览器不能渲染和运行其它代码，彻底被卡住了。这样就很难实现流畅的UIs体验。

并且另一个问题也会由此发生，若是浏览器在调用栈中执行不少这样复杂且耗时的函数时，浏览器也会失去响应，出现假死状态。

这绝对不是咱们要的用户体验。

怎么才能执行复杂且耗时的代码，而且不会阻塞UI的渲染和致使浏览器假死呢？解决方案就是异步调用。异步调用会在第二篇系列文章（V8引擎和5招优化）中解释。