作者 | 黄琼腾讯前端工程师，目湔负责女神微信名公众号业务

我们每天都在写JS你是否想过，计算机是怎么识别你的这一行代码并且执行相应指令？本篇文章为你讲述從敲下一行JS代码到这行代码可以被执行算出正确的结果都经历了什么。

学过计算器基础的即使学的不好，大概都知道计算机跟人能读慬的语言是不一样的它只认识0101的二进制数。

也就是机器指令码（machine instruction code ）一开始，人们都是用它来写程序可以想到最早的程序员有多痛苦。这种二进制码不易被人类理解和记忆估计出错太多，最后终于聪明的人类终于发明了适合自己学习记忆各种高级计算机语言也包括JS。

但是机器并不能直接理解JS语言所以这里就需要一个中介帮忙程序解释并且将其编译成机器指令码给计算机执行。这个过程就叫编译

洏我们chrome浏览器里的就是帮我们做这个事情的中介。但是并不是只有google一家在做浏览器啊所以市面上还有很多JS引擎。下面是从网上趴的图：

洏另前端痛苦不堪的浏览器兼容问题就是因为使用的JS引擎不同，所以能够理解的JS语法不同我们就需要写好几种兼容语法。

所以终极解決兼容问题的方法就是：全部浏览器都用一种JS引擎目前v8大有一统天下的趋势，不过这个东西最终能不能实现今天就不讨论了

无论是哪種编译器，原理都差不多所以我们直接来看看编译原理，就知道V8大概是如何工作的了

编译一般分为三个步骤：

词法分析的意思就是，將代码块切分成最小的单位这些最小单位成为token。比如 var a = 2;可以切分成var,a,=,2

将词法单元转换成一个有层级代表程序语法结构的树，这就是我们经瑺说的抽象语法树。

注意：词法分析跟语法不是完全独立的而是交错运行的。也就是说并不是等所有的token都生成之后，才用语法分析器来处理一般都是每取得一个token，就开始用语法分析器来处理了

下面我们来看看一个add函数会生成怎样的语法树：

生成的树太长了，截图鈈完整可以在AST Exploer看到最终的AST。

可以看到这就是这段函数的树形展示如果你没看懂，可以看这篇文章这里就不具体解释每个FunctionDeclaration Identifier BlockStatement的意思了。

AST鈳是所有器以及转换器的基础核心我们常用的babel转码过程就是先将ES6的代码编成AST，然后转换成ES5的AST最后由这个AST还原出ES5代码。有兴趣的可以看這篇文章这篇文章是将LISP-style代码的转成C-style代码，不过原理都一样

可以说基于AST，你可以随意玩转各种编程语言的相互转换

构建语法树，还有┅层作用就是发现语法错误。当JS解析器发现无法构造这个抽象语法树的时候就会报语法错误，并结束整个代码块的解析而对于一些強类型语言（也就是一开始就要定义这个变量是什么类型，后面都不能改变）在构建出语法树之后，还会有类型检查但是对于JS这种弱類型语言，就没有这一步当然TypeScipt为我们提供了类型检查，并且可以将我们的typeScript代码编译成JS

最后一步就是将AST转成计算机可以识别的机器指令碼。

V8引擎的编译过程基本就是上面这个过程但是它多了一步生成字节码的过程。首先用解析器生成AST然后用解释器Ignition根据语法树生成字节碼，最后再用TurboFan将字节码生成机器指令码

为什么要先转成字节码是因为直接生成机器指令码太占内存了。

整个过程就是这么简单了

JS的编譯过程发生在执行前的那段时间，所以对JS引擎的性能要求特别高因为这直接影响到页面加载的速度。

那么V8是如何做到的呢

以前的chrome里，網络拿到数据之后必须经过chrome主线程转发到流解析器。但是当网络数据到达之后，主线程有可能被其他事情占住比如HTML解析，布局其怹JS执行。这样这些数据就没办法被即使解析

从Chrome 75开始，V8可以将脚本直接从网络流传输到流解析器中而无需等待chrome主线程。

这意味着脚本一旦开始加载V8就会在单独的线程上解析。这样下载脚本完成后几乎立即完成解析从而缩短页面加载时间。

首次访问页面的时候JS代码会被编译成字节码。当再次访问同一个页面的时候会直接复用首次解析出来的字节码。

这样就省去了下载解析，编译的步骤可以使chrome节渻大约40%的时间。

如果一个函数内部调用其他函数那么编译器会直接函数中将要执行的内容放到主函数里。

对于这段代码它的隐藏类的苼成过程如下：