0011 浏览器执行JS

浏览器如何执行JavaScript代码？JavaScript代码被执行分为哪几个阶段？

以前在B站录制的2个关于 V8 的小视频：

0009 V8 编译与优化

0010. V8 GC

0. 前言

JavaScript 是弱类型语言，在运行时才能确定变量类型。

从代码执行前是否需要编译的角度来看，编程语言分为解释型语言（ Interpreted Language）和编译型语言（Compiled Language）。JavaScript属于解释型语言，常用的 Python 也是解释型语言。而编译型语言，包含大学课本中的 C、Java等 ，C通过编译器编译成二进制文件可直接在CPU上执行。

编译型语言在代码运行前编译器直接将对应的代码转换成机器码（也就是二进制文件），可直接运行在硬件上；解释型语言在代码运行前解释器将目标语言翻译为低级语言（比如汇编语言，C语言是高级语言），再将其编译为机器码，其运行通常依赖于虚拟机（下文会提及JS运行的虚拟机，常见的是V8）。解释型语言和编译型语言的区别在于，运行时是否需要转换。所以，编译型语言执行效率更高，解释型语言的执行速度要慢于编译型语言，但编译型语言的编译加执行的时间比解释型语言解释加执行的时间多。。解释型编程语言更适合制作跨平台应用（因虚拟机的存在，几乎可以抹平平台差异）。

但是，也有语言会同时使用编译和解释的方式来执行，比如Java，它先编译为bytecode，然后再运行在Java虚拟机上。

众多的浏览器带来了很多种JS引擎，例如 JavaScriptCore、chakra、V8 等。其中最热门的是 V8 是 Chrome 的内核，Node.js 也是基于 V8 引擎研发的，V8引入了 Java 虚拟机和 C++ 编译器等技术。

1. V8 执行 JS 经历的阶段

JS代码 ——＞ AST（词法分析、语法分析） ——＞ 字节码 ——＞ 机器码

1-1. Parse 阶段

Parse 阶段：V8 引擎负责将 JS 代码转换成 AST（抽象语法树）；

JS代码在通过词法分析、语法分析后，会生成AST树。

词法分析：将 JS 代码逐个字符解析成单个令牌（Token）。

语法分析：用 token 生成一棵抽象语法树（AST）。生成树时，并不会把所有的token都添加到树上，而是去除不必要的token后，根据语法规则生成AST。

var a = 1;

// 词法分析生成五个词法单元：

// var, a , =, 1, ;

// 语法分析生成AST树，通常可用JSON形式表示，如下:

在线 将代码生成AST树，我们通常可以使用 AST Explorer 这个在线网址。

"type": "Program",

"start": 0,

"end": 10,

"body": [

"type": "VariableDeclaration",

"start": 0,

"end": 10,

"declarations": [

"type": "VariableDeclarator",

"start": 4,

"end": 9,

"id": {

"type": "Identifier",

"start": 4,

"end": 5,

"name": "a"

},

"init": {

"type": "Literal",

"start": 8,

"end": 9,

"value": 1,

"raw": "1"

],

"kind": "var"