V8是如何执行一段JS代码的？

关注

原创最新推荐文章于 2026-01-26 17:13:32 发布 957 阅读 AI 写同款· GEO 优化 ›

【016】描述一下 V8 执行一段JS代码的过程前言首先需要明白的是，机器是读不懂 JS 代码，机器只能理解特定的机器码，那如果要让 JS 的逻辑在机器上运行起来，就必须将 JS 的代码翻译成机器码，然后让机器识别。JS属于解释型语言，对于解释型的语言说，解释器会对源代码做如下分析: 解释器进行词法分析和语法分析根据语法分析结果生成抽象语法树生成字节码 1.ATS抽象语法树的生成抽象语法树生成经过词法解析和语法解析。词法解析就是解... 阅读详情

汇编器编译器解释器
解释执行和解释执行
什么是V8？
V8执行Js代码的过程

汇编器编译器解释器

众所周知，计算机只能理解机器语言，而我们平时编程用的通常是高级语言，所以源代码通常都要经过层层转换最终变成机器语言运行。

早期只有汇编语言没有高级语言，不同的设备有一套自己的对应不同机器语言指令集的汇编语言，也就是说，汇编语言不能在不同CPU架构(intel ARM MIPS)之间移植。同一个软件为了让不同类型的处理器架构都能兼容要写好几套代码，实在太不方便了，我们需要一种屏蔽了计算机架构细节的语言，能适应多种不同CPU架构的语言，专心处理业务逻辑，所以后来发展出了跨平台的高级语言。诸如 C C++ Java JavaScript。

汇编时代

高级语言时代

随着计算机发展，编译器也越来越复杂，发展了很多分支，像是本地编译器、交叉编译器等，这里就不多说了。

那么源码一定要经过编译才能运行吗？

解释器的出现给出了一种不用编译就能运行的能力

先静态编译到可执行的文件，然后运行可执行的文件来执行程序，而解释器提供了一种边编译边运行的动态运行方法，而也正因为通过解释器运行的代码是边编译边运行的，所以运行的速度比静态编译的那种慢很多。

所以程序运行的方式分为编译执行和解释执行。

解释执行和解释执行

解释执行：需要先将输入的源代码通过解析器编译成中间代码，之后直接使用解释器解释执行中间代码，然后直接输出结果。

第二种是编译执行。采用这种方式时，也需要先将源代码转换为中间代码，然后我们的编译器再将中间代码编译成机器代码。通常编译成的机器代码是以二进制文件形式存储的，需要执行这段程序的时候直接执行二进制文件就可以了。还可以使用虚拟机将编译后的机器代码保存在内存中，然后直接执行内存中的二进制代码。

什么是V8

JavaScript引擎是执行JavaScript代码的程序或解释器。javaScript引擎可以实现为标准解释器或即时编译器，它以某种形式将JavaScript编译为字节码。

那么除了v8引擎，你还知道那些js引擎

V8 - 开源，由Google开发，用C ++编写
Rhin- 由Mozilla基金会开源，完全用Java开发
SpiderMonkey 第一个JavaScript引擎，Netscape Navigator，Firefox
JavaScriptCore 苹果公司为Safari开发
KJS 最初由Harri Porten为KDE项目的Konqueror网络浏览器开发
Chakra** (JScript9) Microsoft Edge
Chakra** (JavaScript) Microsoft IE9-IE11
Nashorn 作为OpenJDK的一部分，由Oracle Java语言和工具组编写
JerryScript 一个物联网的轻量级引擎

V8 是用 C++ 写的，使用了即时编译技术，工作模式如下图

在这个过程中，V8同时使用了Parser（解析器）、Ignition（解释器）和TurboFan（编译器）来执行Js代码。V8是被设计用来提高网页浏览器内部JavaScript执行的性能，那么如何提高性能呢？

为了提高性能，v8会把js代码转换为高效的机器码，而不在是依赖于解释器去执行。v8引入了 JIT在运行时把js代码进行转换为机器码。这里的主要区别在于V8不生成字节码或任何中间代码。

v8曾经有两个编译器(v5.9之前)

full-codegen — 一个简单且速度非常快的编译器，可以生成简单且相对较慢的机器码 Crankshaft — 一个更复杂的（Just-In-Time）优化编译器，生成高度优化的代码

v8充分多进程，主进程负责获取代码，编译生成机器码，有专门负责优化的进程，，还有一个监控进程负责分析那些代码执行比较慢，以遍Crankshaft 做优化，最后还有一个就是GC进程，负责内存垃圾回收。

V8执行Js代码的过程

1 Parser生成抽象语法树

在Chrome中开始下载Javascript文件后，Parser就会开始并行在单独的线程上解析代码。这意味着解析可以在下载完成后仅几毫秒内完成，并生成AST。

函数

编译AST后

AST还广泛应用于各类项目中，比如Babel、ESLint，以及我们面试常说手写loader,那么AST的生成过程是怎么样的呢？

我们首先看一下Babel的实现：

// 解析 
let esprima = require('esprima') 
// 转换 
let estraverse = require('estraverse') 
// 生成 
let escodegen = require('escodegen') 
 
let code = `function code () {}` 
 
// 解析 
let ast = esprima.parseScript(code) 
// 转换 
estraverse.traverse(ast, { 
  enter (node) { 
    console.log('enter' + node.type) 
    if (node.type === 'enterIdentifier') { 
      node.name = 'hello' 
    } 
  }, 
  leave (node) { 
    console.log('enter' + node.type) 
  } 
}) 
// 生成 
let newCode = escodegen.generate(ast)

我们常说的生成AST不管是Babel 还是vue中都是解析这一步:

解析步骤接收代码并输出 AST。这个步骤分为两个阶段：词法分析（Lexical Analysis）和语法分析（Syntactic Analysis）。

词法分析：将代码(字符串)分割为token流，即语法单元成的数组语法分析：分析token流(上面生成的数组)并生成 AST 转换

var name = "react"
//转成token后为

[
    {
        "type": "Keyword",
        "value": "var"
    },
    {
        "type": "Identifier",
        "value": "name"
    },
    {
        "type": "Punctuator",
        "value": "="
    },
    {
        "type": "String",
        "value": "\"react\""
    },
    {
        "type": "Punctuator",
        "value": ";"
    }
]

从上面可以看出，var name = "ivweb"; 这样一段代码，会有关键字"var"、标识符"name"、赋值运算符"="、字符串"ivweb"、分隔符";"，共5个token。

2.Ignition生成字节码

解释器 Ignition 根据语法树生成字节码。TurboFan 是 V8 的优化编译器，TurboFan 将字节码生成优化的机器代码。

如果想知道为什么会有两种执行模式?点击查看视频 [](Franziska Hinkelmann: JavaScript engines - how do they even? | JSConf EU 2017)

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

您可以将 V8 的字节码看作是小型的构建块（bytecodes as small building blocks），这些构建块组合在一起构成任何 JavaScript 功能。V8 有数以百计的字节码。比如 Add 或 TypeOf 这样的操作符，或者像 LdaNamedProperty 这样的属性加载符，还有很多类似的字节码。V8还有一些非常特殊的字节码，如 CreateObjectLiteral 或 SuspendGenerator。头文件 bytecodes.h 定义了 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 将不会解释它

ps 如果要查看 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 <Map(HOLEY_ELEMENTS)>
 - length: 1
           0: 0x2ddf8db91611 <String[1]: x>
Handler Table (size = 16)

3.执行代码及优化

Ignition执行上一步生成的字节码，并记录代码运行的次数等信息，如果同一段代码执行了很多次，就会被标记为 “HotSpot”（热点代码），然后把这段代码发送给编译器TurboFan，然后TurboFan把它编译为更高效的机器码储存起来，等到下次再执行到这段代码时，就会用现在的机器码替换原来的字节码进行执行，这样大大提升了代码的执行效率。另外，当TurboFan判断一段代码不再为热点代码的时候，会执行去优化的过程，把优化的机器码丢掉，然后执行过程回到Ignition。

其实字节码配合解释器和编译器是很火的一种技术，例如 Python 和 Java 的虚拟机也是基于这种技术，我们把这种技术称为即时编译(JIT)。

这么多语言和工作引擎都使用了“字节码 + JIT”技术，其具体工作流程如下：