了解JavaScript引擎

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

前言

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

若是您以为本身对 JavaScript 引擎有了一些了解的话，能够先给本身鼓个掌，但不要急着关掉本文，我相信阅读完成后您仍然能够从中学到一些东西。

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

下面让咱们进入正题~

JavaScript 引擎

这是本文将要探索的主要内容，它负责使计算机理解咱们编写的 JS 代码。JavaScript 引擎是一种用于将咱们的代码转换为机器可读语言的引擎。若是没有 JavaScript 引擎，您编写的代码对计算机来讲简直是一堆“胡言乱语”。不只仅是 JavaScript ，其余全部编程语言都须要一个相似的引擎，来将这些“胡言乱语”转换成对计算机有意义的语言。

目前有多种 JavaScript 引擎在可供使用。您能够在 Wikipedia 上查阅全部可用的 JavaScript 引擎。它们也被称为 ECMAScript 引擎，这样叫的具体缘由会在下文中说起。 下面是一些咱们平常可能会用到的 JavaScript 引擎：

1. Chakra, Microsoft IE/Edge
   SpiderMonkey, FireFox
   V8, Chrome

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

JavaScript 引擎的内里

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

是谁发明了 JavaScript 引擎？

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

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

下面咱们对 V8 引擎进行进一步的探索，由于基本概念在全部引擎中是一致的。

上图就是 JS Engine 内部的工做流程。咱们输入的代码将经过如下阶段：

1. Parser
   AST
   Interpreter 生成 ByteCode
   Profiler
   Compiler 生成优化后的代码

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

在进一步深刻这些阶段以前，您须要先了解 Interpreter 和 Compiler 的区别。

Interpreter VS Compiler

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

1. Interpreter 逐行读取代码并当即执行。
   Compiler 读取您的整个代码，进行一些优化，而后生成优化后的代码。

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

function add(a, b) {  
 return a+b  
}  
for(let i = 0; i < 1000; i++) {  
 add(1 + 1)  
}

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

1. 一、Interpreter 接收上面的代码后，它将逐行读取并当即执行代码，直到循环结束。 它的工做仅仅是实时地将代码转换为咱们的计算机能够理解的内容。
   二、若是这段代码接受者是 Compiler，它会先完整地读取整个程序，对咱们要执行的代码进行分析，并生成电脑能够读懂的机器语言。过程如同获取 X（咱们的JS文件）并生成 Y（机器语言）同样。若是咱们使用 Interpreter 执行 Y，则会得到与执行 X 相同的结果。

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

1. Interpreter 逐行将源代码转换为等效的机器代码。
   Compiler 在一开始就将全部源代码转换为机器代码。

当您阅读完上面的推荐文章后，您可能已经了解到 Babel 其实是一个 JS Compiler ，它能够接收您编写的新版本 JS 代码并向下编译为与浏览器兼容的 JS 代码（旧版本的 JS 代码）。

Interpreter 和 Compiler 的优缺点

1. 一、Interpreter 的优势是无需等待编译便可当即执行代码。这对在浏览器中运行 JS 提供了极大的便利，由于全部用户都不想浪费时间在等待代码编译这件事上。可是，当有大量的 JS 代码须要执行时会运行地比较慢。还记得上面例子中的那一小段代码吗？代码中执行了1000次函数调用。函数 add 被调用了1000次，但他的输出保持不变。可是 Interpreter 仍是逐行执行，会显得比较慢。
   二、在一样的状况下，Compiler 能够经过用2代替循环（由于 add 函数每次都是执行1 + 1）来进行一些优化。Compiler 最终给出的优化代码能够在更短的时间内执行完成。
   综上所述，Interpreter 能够当即开始执行代码，但不会进行优化。 Compiler 虽然须要花费一些时间来编译代码，可是会生成对执行时更优的代码。

好的，Interpreter 和 Compiler 必要知识咱们已经了解了。如今让咱们回到主题——JS 引擎。

所以，考虑到编译器和解释器的优缺点，若是咱们同时利用二者的优势，该怎么办？ 这就是 JIT(Just In Time) Compiler 的用武之地。它是 Interpreter 和 Compiler 的结合，如今大多数浏览器都在更快，更高效地实现此功能。同时 V8 引擎也使用此功能。

在这个过程当中，

1. 一、Parser 是一种经过各类 JavaScript 关键字来识别，分析和分类程序各个部分的解析器。它能够区分代码是一个方法仍是一个变量。
   二、而后，AST(抽象语法树) 基于 Parser 的分类构造树状结构。您可使用 AST Explorer 查看该树的结构。
   三、随后将 AST 提供给 Interpreter 生成 ByteCode。如上文所述，ByteCode 不是最底层的代码，但能够被执行。在此阶段，浏览器借助 V8 引擎执行 ByteCode 进行工做，所以用户无需等待。
   四、同时，Profiler 将查找能够被优化的代码，而后将它们传递给 Compiler。Compiler 生成优化代码的同时，浏览器暂时用 ByteCode 执行操做。而且，一旦 Compiler 生成了优化代码，优化代码则将彻底替换掉临时的 ByteCode。
   五、 经过这种方式，咱们能够充分利用 Interpreter 和 Compiler 的优势。Interpreter 执行代码的同时，Profiler 寻找能够被优化的代码，Compiler 则建立优化的代码。而后，将 ByteCode 码替换为优化后的较为底层的代码，例如机器代码。

这仅意味着性能将在逐渐提升，同时不会有阻塞执行的时间。

关于 ByteCode

做为机器代码，ByteCode 不能被全部计算机理解及执行。它仍然须要像虚拟机或像 Javascript V8 引擎这样的中间件才能将其转换为机器可读的语言。 这就是为何咱们的浏览器能够在上述5个阶段中借助 JavaScript 引擎在 Interpreter 中执行 ByteCode 的缘由。

因此您能够会有另外一个问题,

JavaScript 是一门解释型语言吗?

JavaScript 是但不彻底是一门解释型语言。Brendan Eich 最初是在 JavaScript 的早期阶段建立 JavaScript 引擎 “ SpiderMonkey” 的。该引擎有一个 Interpreter 来告诉浏览器该怎么执行代码。 可是如今咱们的引擎不只包括了 Interpreter，还有 Compiler。 咱们的代码不只能够被转换成 ByteCode，还能够被编译输出优化后的代码。 所以，从技术上讲，这彻底取决于引擎是如何实现的。

JavaScript 引擎的总体工做原理就是这样。相信您无需学习 JavaScript 也能够理解。 固然，您甚至能够在不知道 JavaScript 如何工做的状况下编写代码。 可是，若是咱们了解一些幕后的知识，或许能让咱们编写出更好的代码。

本文地址：https://www.linuxprobe.com/javascript-engine-understand.html