揭开 JavaScript 引擎的面纱

前言

最初，JavaScript 只能在 Web 浏览器中运行，但是随着 Node 的出现，现在 JavaScript 也可以在服务端运行。虽然我们可能知道应该在何时何地去使用它， 但是我们真的了解这些脚本执行的背后发生了什么吗？

如果您觉得自己对 JavaScript 引擎有了一些了解的话，可以先给自己鼓个掌，但不要急着关掉本文，我相信阅读完成后您仍然可以从中学到一些东西。

JavaScript 是一门高级语言，但是最终计算机能理解只有1和0。那么我们编写的代码是如何被计算机理解的呢？掌握所学编程语言的基础知识将让您能编写出更好的代码。在本文中，我们仅探讨一个问题：JavaScript 是如何工作的？

下面让我们进入正题~

JavaScript 引擎

这是本文将要探索的主要内容，它负责使计算机理解我们编写的 JS 代码。JavaScript 引擎是一种用于将我们的代码转换为机器可读语言的引擎。如果没有 JavaScript 引擎，您编写的代码对计算机来说简直是一堆“胡言乱语”。不仅仅是 JavaScript ，其他所有编程语言都需要一个类似的引擎，来将这些“胡言乱语”转换成对计算机有意义的语言。

目前有多种 JavaScript 引擎在可供使用。您可以在 Wikipedia 上查阅所有可用的 JavaScript 引擎。它们也被称为ECMAScript 引擎，这样叫的具体原因会在下文中提及。下面是一些我们日常可能会用到的 JavaScript 引擎：

Chakra, Microsoft IE/Edge

SpiderMonkey, FireFox

V8, Chrome

除此之外的其它引擎，可以自行搜索了解。接下来，我们将深入研究这些引擎，以了解它们是如何翻译 JavaScript 文件的。

JavaScript 引擎的内里

我们已经知道了引擎是必须的，由此可能不禁会想：

是谁发明了 JavaScript 引擎？

答案是，任何人都可以。它只是分析我们的代码并将其翻译的另一种语言的工具。V8是最受欢迎的 JavaScript 引擎之一，也是Chrome和NodeJS使用的引擎。它是用 C++（一种底层语言）编写的。但是如果每个人都创造一个引擎，那场面就不是可控范围内的了。

因此，为了给这些引擎确立一个规范，ECMA的标准诞生了，该标准主要提供如何编写引擎和 JavaScript 所有功能的规范。这就是新功能能在 ECMAScript 6、7、8 上实现的原因。同时，引擎也进行了更新以支持这些新功能。于是，我们便可以在开发过程中检查了浏览器中 JS 高级功能的可用性。

下面我们对 V8 引擎进行进一步的探索，因为基本概念在所有引擎中是一致的。

上图就是 JS Engine 内部的工作流程。我们输入的代码将通过以下阶段，

Parser

AST

Interpreter 生成 ByteCode

Profiler

Compiler 生成优化后的代码

别被上面的流程给唬住了，在几分钟后您将了解它们是协同运作的。

在进一步深入这些阶段之前，您需要先了解 Interpreter 和 Compiler 的区别。

Interpreter VS Compiler

通常，将代码转换成机器可读语言的方法有两种。我们将要讨论的概念不仅适用于 JavaScript ，而且适用于大多数编程语言，例如 Python，Java 等。

Interpreter逐行读取代码并立即执行。

Compiler读取您的整个代码，进行一些优化，然后生成优化后的代码。

让我们来看下面这个例子。

上面的示例循环调用了 函数1000次，该函数将两个数字相加并返回总和。

Interpreter接收上面的代码后，它将逐行读取并立即执行代码，直到循环结束。它的工作仅仅是实时地将代码转换为我们的计算机可以理解的内容。

如果这段代码接受者是Compiler，它会先完整地读取整个程序，对我们要执行的代码进行分析，并生成电脑可以读懂的机器语言。过程如同获取X（我们的JS文件）并生成Y（机器语言）一样。如果我们使用 Interpreter 执行Y，则会获得与执行X相同的结果。

从上图中可以看出，ByteCode只是中间码，计算机仍需要对其进行翻译才能执行。但是 Interpreter 和 Compiler 都将源代码转换为机器语言，它们唯一的区别在于转换的过程不尽相同。

Interpreter逐行将源代码转换为等效的机器代码。

Compiler在一开始就将所有源代码转换为机器代码。