在写这篇文章之前，小编工作中从来没有问过自己这个问题，不就是写程式码，编译器将程式码编辑成计算机能识别的01程式码，有什么好了解的。其实不然，编译器在将JS程式码变成可执行程式码，做了很多繁杂的工作，只有深入了解背后编译的原理，我们才能写出更优质的程式码，了解各种前端框架背后的本质。为了写这篇文章，小编也是诚惶诚恐，阅读了相关的资料，也是一个学习了解的过程，难免有些问题，欢迎各位指正，共同提高。

题外话——重回孩童时代的好奇心

其实我们应该重回孩童时代，不应满足会用，只让程式码工作而已，我们应该弄清楚"为什么"，只有这样你才能拥抱整个JavaScript。掌握了这些知识后，无论什么技术、框架你都能轻松理解，这也前端达人公众号一直更新javaScript基础的原因。

不要混淆JavaScipt与浏览器

JavaScipt执行环境一般都有宿主环境和执行期环境。如下图所示：

宿主环境是由外壳程式生成的，比如浏览器就是一个外壳环境（但是浏览器并不是唯一，很多服务器、桌面应用系统都能也能够提供JavaScript引擎执行的环境）。执行期环境则有嵌入到外壳程式中的JavaScript引擎（比如V8引擎，稍后会详细介绍）生成，在这个执行期环境，首先需要建立一个程式码解析的初始环境，初始化的内容包含：

一套与宿主环境相关联络的规则JavaScript引擎核心（基本语法规则、逻辑、命令和算法）一组内建物件和API其他约定虽然，不同的JavaScript引擎定义初始化环境是不同的，这就形成了所谓的浏览器相容性问题，因为不同的浏览器使用不同JavaScipt引擎。不过最近的这条讯息想必大家都知道——浏览器市场，微软居然放弃了自家的EDGE(IE的继任者)，转而投靠竞争对手Google主导的Chromium核心(国产浏览器百度、搜狗、腾讯、猎豹、UC、傲游、360用的都是Chromium（Chromium用的是鼎鼎大名的V8引擎，想必大家都十分清楚吧），可以认为全是Chromium的马甲)，真是大快人心，我们终于在同一环境下愉快的编写程式码了，想想真是开心！

重温编译原理

编译程式一般步骤分为：词法分析、语法分析、语义检查、程式码优化和生成字节码。具体的编译流程如下图：

分词/词法分析（Tokenizing/Lexing）

所谓的分词，就好比我们将一句话，按照词语的最小单位进行分割。计算机在编译一段程式码前，也会将一串串程式码拆解成有意义的程式码块，这些程式码块被称为词法单元（token）。例如，考虑程式var a=2。这段程式通常会被分解成为下面这些词法单元：var、a、=、2、；空格是否作为当为词法单位，取决于空格在这门语言中是否具有意义。

解析/语法分析(Parsing)

这个过程是将词法单元流转换成一个由元素逐级巢状所组成的代表了程式语法结构的树。这个树称为“抽象语法树”（Abstract Syntax Tree,AST）。

词法分析和语法分析不是完全独立的，而是交错进行的，也就是说，词法分析器不会在读取所有的词法记号后再使用语法分析器来处理。在通常情况下，每取得一个词法记号，就将其送入语法分析器进行分析。

语法分析的过程就是把词法分析所产生的记号生成语法树，通俗地说，就是把从程式中收集的资讯储存到资料结构中。注意，在编译中用到的资料结构有两种：符号表和语法树。

符号表：就是在程式中用来储存所有符号的一个表，包括所有的字串变数、直接量字串，以及函式和类。

语法树：就是程式结构的一个树形表示，用来生成中间程式码。下面是一个简单的条件结构和输出资讯程式码段，被语法分析器转换为语法树之后，如

if( typeof a = =" undefined"){

a = 0;

}else{

a = a;

}

alert( a);

如果JavaScript直译器在构造语法树的时候发现无法构造，就会报语法错误，并结束整个程式码块的解析。对于传统强型别语言来说，在通过语法分析构造出语法树后，翻译出来的句子可能还会有模糊不清的地方，需要进一步的语义检查。语义检查的主要部分是型别检查。例如，函式的实参和形参型别是否匹配。但是，对于弱型别语言来说，就没有这一步。

经过编译阶段的准备， JavaScript程式码在内存中已经被构建为语法树，然后 JavaScript引擎就会根据这个语法树结构边解释边执行。

程式码生成

将AST转换成可执行程式码的过程被称为程式码生成。这个过程与语言、目标平台相关。

了解完编译原理后，其实JavaScript引擎要复杂的许多，因为大部分情况，JavaScript的编译过程不是发生在构建之前，而是发生在程式码执行前的几微妙，甚至时间更短。为了保证效能最佳，JavaScipt使用了各种办法，稍后小编将会详细介绍。

神秘的JavaScipt编译器——V8引擎

由于Google的V8编译器的出现，由于效能良好吸引了相当的注目，正式由于V8的出现，我们目前的前端才能大放光彩，百花齐放，V8引擎用C++进行编写， 作为一个 JavaScript 引擎，最初是服役于 Google Chrome 浏览器的。它随着 Chrome 的第一版释出而释出以及开源。现在它除了 Chrome 浏览器，已经有很多其他的使用者了。诸如 NodeJS、MongoDB、CouchDB 等。最近最让人振奋前端新闻莫过于微软居然放弃了自家的EDGE(IE的继任者)，转而投靠竞争对手Google主导的Chromium核心(国产浏览器百度、搜狗、腾讯、猎豹、UC、傲游、360用的都是Chromium（Chromium用的是鼎鼎大名的V8引擎，想必大家都十分清楚吧），看来V8引擎在不久的将来就会一统江湖，下面小编将重点介绍V8引擎。

当 V8 编译JavaScript 程式码时，解析器(parser)将生成一个抽象语法树(上一小节已介绍过)。语法树是 JavaScript 程式码的句法结构的树形表示形式。直译器 Ignition 根据语法树生成字节码。TurboFan 是 V8 的优化编译器，TurboFan将字节码(Bytecode)生成优化的机器程式码(Machine Code)。

V8曾经有两个编译器

在5.9版本之前，该引擎曾经使用了两个编译器：

full-codegen - 一个简单而快速的编译器，可以生成简单且相对较慢的机器程式码。

Crankshaft - 一种更复杂的（即时）优化编译器，可生成高度优化的程式码。

V8引擎还在内部使用多个执行绪：

主执行绪：获取程式码，编译程式码然后执行它

优化执行绪：与主执行绪并行，用于优化程式码的生成

Profiler执行绪:它将告诉执行时我们花费大量时间的方法，以便Crankshaft可以优化它们

其他一些执行绪来处理垃圾收集器扫描

字节码

字节码是机器程式码的抽象。如果字节码采用和物理 CPU 相同的计算模型进行设计，则将字节码编译为机器程式码更容易。这就是为什么直译器（interpreter）常常是暂存器或堆叠。 Ignition 是具有累加器的暂存器。

您可以将 V8 的字节码看作是小型的构建块（bytecodes as small building blocks），这些构建块组合在一起构成任何 JavaScript 功能。V8 有数以百计的字节码。比如 Add 或 TypeOf 这样的操作符，或者像 LdaNamedProperty 这样的属性载入符，还有很多类似的字节码。 V8还有一些非常特殊的字节码，如 CreateObjectLiteral 或 SuspendGenerator。标头档案bytecodes.h（https://github.com/v8/v8/blob/master/src/interpreter/bytecodes.h） 定义了 V8 字节码的完整列表。

在早期的V8引擎里，在多数浏览器都是基于字节码的，V8引擎偏偏跳过这一步，直接将jS编译成机器码，之所以这么做，就是节省了时间提高效率，但是后来发现，太占用内存了。最终又退回字节码了，之所以这么做的动机是什么呢？

（主要动机）减轻机器码占用的内存空间，即牺牲时间换空间 提高程式码的启动速度 对 v8 的程式码进行重构，降低 v8 的程式码复杂度每个字节码指定其输入和输出作为暂存器算子。Ignition 使用暂存器 r0，r1，r2，... 和累加器暂存器（accumulator register）。几乎所有的字节码都使用累加器暂存器。它像一个常规暂存器，除了字节码没有指定。 例如，Add r1 将暂存器 r1 中的值和累加器中的值进行加法运算。这使得字节码更短，节省内存。

许多字节码以 Lda 或 Sta 开头。Lda 和 Stastands 中的 a 为累加器（accumulator）。例如，LdaSmi [42] 将小整数（Smi）42 载入到累加器暂存器中。Star r0 将当前在累加器中的值储存在暂存器 r0 中。

以现在掌握的基础知识，花点时间来看一个具有实际功能的字节码。

function incrementX(obj) {

return 1 + obj.x;

}

incrementX({x: 42}); // V8 的编译器是惰性的，如果一个函式没有执行，V8 将不会解释它

如果要检视 V8 的 JavaScript 字节码，可以使用在命令列引数中新增 --print-bytecode 执行 D8 或Node.js（8.3 或更高版本）来打印。对于 Chrome，请从命令列启动 Chrome，使用 --js-flags="--print-bytecode"，请参考 Run Chromium with flags。

$ node --print-bytecode incrementX.js

...

[generating bytecode for function: incrementX]

Parameter count 2

Frame size 8

12 E> 0x2ddf8802cf6e @ StackCheck

19 S> 0x2ddf8802cf6f @ LdaSmi [1]

0x2ddf8802cf71 @ Star r0

34 E> 0x2ddf8802cf73 @ LdaNamedProperty a0, [0], [4]

28 E> 0x2ddf8802cf77 @ Add r0, [6]

36 S> 0x2ddf8802cf7a @ Return

Constant pool (size = 1)

0x2ddf8802cf21: [FixedArray] in OldSpace

- map = 0x2ddfb2d02309

- length: 1 0: 0x2ddf8db91611

Handler Table (size = 16)

我们忽略大部分输出，专注于实际的字节码。

这是每个字节码的意思，每一行：

LdaSmi [1]

LdaSmi [1] 将常量 1 载入到累加器中。

Star r0

接下来，Star r0 将当前在累加器中的值 1 储存在暂存器 r0 中。

LdaNamedProperty a0, [0], [4]

LdaNamedProperty 将 a0 的命名属性载入到累加器中。ai 指向 incrementX() 的第 i 个引数。在这个例子中，我们在 a0 上查询一个命名属性，这是 incrementX() 的第一个引数。该属性名由常量 0 确定。LdaNamedProperty 使用 0 在单独的表中查询名称：

- length: 1

0: 0x2ddf8db91611

可以看到，0 对映到了 x。因此这行字节码的意思是载入 obj.x。

那么值为 4 的算子是干什么的呢？ 它是函式 incrementX() 的反馈向量的索引。反馈向量包含用于效能优化的 runtime 资讯。

现在暂存器看起来是这样的：

Add r0, [6]

最后一条指令将 r0 加到累加器，结果是 43。 6 是反馈向量的另一个索引。

Return 返回累加器中的值。返回语句是函式 incrementX() 的结束。此时 incrementX() 的呼叫者可以在累加器中获得值 43，并可以进一步处理此值。

V8引擎为啥这么快？

内联（Inlining）：

内联特性是一切优化的基础，对于良好的效能至关重要，所谓的内联就是如果某一个函式内部呼叫其它的函式，编译器直接会将函式中的执行内容，替换函式方法。如下图所示：

如何理解呢？看如下程式码

function add(a, b) {

return a + b;

}

function calculateTwoPlusFive() {

var sum;

for (var i = 0; i sum =add(2+5);

}

}

var start = new Date();

calculateTwoPlusFive();

var end = new Date();

var timeTaken = end.valueOf() - start.valueOf();

console.log("Took " + timeTaken + "ms");

由于内联属性特性，在编译前，程式码将会被优化成

function add(a, b) {

return a + b;

}

function calculateTwoPlusFive() {

var sum;

for (var i=0;i sum = 2 + 5;

}

}

var start = new Date();

calculateTwoPlusFive();

var end = new Date();

var timeTaken = end.valueOf() - start.valueOf();

console.log("Took " + timeTaken + "ms");

如果没有内联属性的特性，你能想想执行的有多慢吗？把第一段JS程式码嵌入HTML档案里，我们用不同的浏览器开启（硬件环境：i7,16G内存,mac系统），用safari开启如下图所示，17秒：

如果用Chrome开启，还不到1秒，快了16秒！

隐藏类（Hidden class）：

例如C++/Java这种静态型别语言的每一个变数，都有一个唯一确定的型别。因为有型别资讯，一个物件包含哪些成员和这些成员在物件中的偏移量等资讯，编译阶段就可确定，执行时CPU只需要用物件首地址 —— 在C++中是this指标，加上成员在物件内部的偏移量即可访问内部成员。这些访问指令在编译阶段就生成了。

但对于JavaScript这种动态语言，变数在执行时可以随时由不同型别的物件赋值，并且物件本身可以随时新增删除成员。访问物件属性需要的资讯完全由执行时决定。为了实现按照索引的方式访问成员，V8“悄悄地”给执行中的物件分了类，在这个过程中产生了一种V8内部的资料结构，即隐藏类。隐藏类本身是一个物件。

考虑以下程式码：

function Point(x, y)

{

this.x = x; this.y = y;

}

var p1 = new Point(1, 2);

如果new Point(1, 2)被呼叫，v8引擎就会建立一个引隐藏的类C0，如下图所示：

由于Point没有定于任何属性，因此“C0”为空

一旦“this.x = x”被执行，v8引擎就会建立一个名为“C1”的第二个隐藏类。基于“c0”,“c1”描述了可以找到属性X的内存中的位置（相当指标）。在这种情况下，隐藏类则会从C0切换到C1,如下图所示：

每次向物件新增新的属性时，旧的隐藏类会通过路径转换切换到新的隐藏类。由于转换的重要性，因为引擎允许以相同的方式建立物件来共享隐藏类。如果两个物件共享一个隐藏类的话，并且向两个物件新增相同的属性，转换过程中将确保这两个物件使用相同的隐藏类和附带所有的程式码优化。

当执行this.y = y，将会建立一个C2的隐藏类，则隐藏类更改为C2。

隐藏类的转换的效能，取决于属性新增的顺序，如果新增顺序的不同，效果则不同，如以下程式码：

function Point(x, y)

{

this.x = x; this.y = y;

}

var p1 = new Point(1, 2);

p1.a = 5;

p1.b = 6;

var p2 = new Point(3, 4);

p2.b = 7;

p2.a = 8;

你可能以为P1、p2使用相同的隐藏类和转换，其实不然。对于P1物件而言，隐藏类先a再b,对于p2而言，隐藏类则先b后a，最终会产生不同的隐藏类，增加编译的运算开销，这种情况下，应该以相同的顺序动态的修改物件属性，以便可以复用隐藏类。

内联快取（Inline caching）

正常访问物件属性的过程是：首先获取隐藏类的地址，然后根据属性名查询偏移值，然后计算该属性的地址。虽然相比以往在整个执行环境中查询减小了很大的工作量，但依然比较耗时。能不能将之前查询的结果快取起来，供再次访问呢？当然是可行的，这就是内嵌快取。

内嵌快取的大致思路就是将初次查询的隐藏类和偏移值储存起来，当下次查询的时候，先比较当前物件是否是之前的隐藏类，如果是的话，直接使用之前的快取结果，减少再次查询表的时间。当然，如果一个物件有多个属性，那么快取失误的概率就会提高，因为某个属性的型别变化之后，物件的隐藏类也会变化，就与之前的快取不一致，需要重新使用以前的方式查询杂凑表。

内存管理：

内存的管理组要由分配和回收两个部分构成。V8的内存划分如下：

Zone：管理小块内存。其先自己申请一块内存，然后管理和分配一些小内存，当一块小内存被分配之后，不能被Zone回收，只能一次性回收Zone分配的所有小内存。当一个过程需要很多内存，Zone将需要分配大量的内存，却又不能及时回收，会导致内存不足情况。堆：管理JavaScript使用的资料、生成的程式码、杂凑表等。为方便实现垃圾回收，堆被分为三个部分： 年轻分代：为新建立的物件分配内存空间，经常需要进行垃圾回收。为方便年轻分代中的内容回收，可再将年轻分代分为两半，一半用来分配，另一半在回收时负责将之前还需要保留的物件复制过来。年老分代：根据需要将年老的物件、指标、程式码等资料储存起来，较少地进行垃圾回收。大物件：为那些需要使用较多内存物件分配内存，当然同样可能包含资料和程式码等分配的内存，一个页面只分配一个物件。垃圾回收：

V8 使用了分代和大资料的内存分配，在回收内存时使用精简整理的算法标记未引用的物件，然后消除没有标记的物件，最后整理和压缩那些还未储存的物件，即可完成垃圾回收。为了控制 GC 成本并使执行更加稳定, V8 使用增量标记, 而不是遍历整个堆, 它试图示记每个可能的物件, 它只遍历一部分堆, 然后恢复正常的程式码执行. 下一次 GC 将继续从之前的遍历停止的位置开始. 这允许在正常执行期间非常短的暂停. 如前所述, 扫描阶段由单独的执行绪处理.

热点函式直接编译成机器码(优化回退):

V8 为了进一步提升JavaScript程式码的执行效率，编译器生直接生成更高效的机器码。程式在执行时，V8会采集JavaScript程式码执行资料。当V8发现某函式执行频繁(行内函数机制)，就将其标记为热点函式。针对热点函式，V8的策略较为乐观，倾向于认为此函式比较稳定，型别已经确定，于是编译器，生成更高效的机器码。后面的执行中，万一遇到型别变化，V8采取将JavaScript函式回退到优化前的编译成机器字节码。如以下程式码：

function add(a, b){

return a + b

}

for(var i=0; i add(i, i);

}

add('a', 'b');//千万别这么做！

再来看下面的一个例子：

// 片段 1

var person = {

add: function(a, b){

return a + b;

} };

obj.name = 'li';

// 片段 2

var person = {

add: function(a, b){

return a + b;

},

name: 'li'

};

以上程式码实现的功能相同，都是定义了一个物件，这个物件具有一个属性name和一个方法add()。但使用片段2的方式效率更高。片段1给物件obj添加了一个属性name，这会造成隐藏类的派生。给物件动态地新增和删除属性都会派生新的隐藏类。假如物件的add函式已经被优化，生成了更高效的程式码，则因为新增或删除属性，这个改变后的物件无法使用优化后的程式码。

从例子中我们可以看出：

函式内部的引数型别越确定，V8越能够生成优化后的程式码。

结束语

物件属性的顺序：始终以相同的顺序例项化物件属性, 以便可以共享隐藏类和随后优化的程式码.动态属性：在例项化后向物件新增属性将强制隐藏类更改, 并任何为先前隐藏类优化的方法变慢. 所以, 使用在建构函式中分配物件的所有属性来代替.方法：重复执行相同方法的程式码将比只执行一次的程式码(由于内联快取)执行得快.阵列：避免键不是增量数字的稀疏阵列. 稀疏阵列是一个杂凑表. 这种阵列中的元素访问消耗较高. 另外, 尽量避免预分配大型阵列, 最好按需分配, 自动增加. 最后, 不要删除阵列中的元素, 它使键稀疏.接下来小编将和大家继续分享作用域的内容，敬请期待...

更多精彩内容，请微信关注”前端达人”公众号！