从敲下一行JS代码到这行代码被执行，中间发生了什么？

正文

请到「今天看啥」查看全文

add ( a, b ) {
return a + b
}

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

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

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

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

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

• 代码生成(Code Genaration)

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

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

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

整个过程就是这么简单了。

V8 为什么那么快

JS的编译过程发生在执行前的那段时间，所以对JS引擎的性能要求特别高。

那么V8是如何做到的呢？

1、脚本流(script streaming)

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

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

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

2、字节码缓存

首次访问页面的时候，JS代码会被编译成字节码。当再次访问同一个页面的时候，会直接复用首次解析出来的字节码。这样就省去了下载，解析，编译的步骤，可以使chrome节省大约40%的时间。

请到「今天看啥」查看全文