JavaScript 引擎架构

JavaScript 引擎是将 JS 代码转换为机器码并执行的程序，不同引擎架构各异但核心流程相似。

主流 JS 引擎

通用架构模型

┌─────────────────────────────────────────────┐
│              JavaScript 引擎                  │
├─────────────────────────────────────────────┤
│  ┌─────────┐  ┌─────────┐  ┌─────────────┐  │
│  │ Parser  │→ │ AST     │→ │ Interpreter │  │
│  │ (解析器) │  │ (语法树) │  │  (解释器)   │  │
│  └─────────┘  └─────────┘  └──────┬──────┘  │
│                                   ↓         │
│  ┌─────────┐  ┌─────────┐  ┌─────────────┐  │
│  │  JIT    │← │ Profiler│← │ Bytecode   │  │
│  │ Compiler│  │ (分析器) │  │ (字节码)    │  │
│  └────┬────┘  └─────────┘  └─────────────┘  │
│       ↓                                     │
│  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Optimized   │  │ Memory Management    │  │
│  │ Machine Code│  │ (GC & Heap)         │  │
│  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────┘

核心组件

1. 解析器（Parser）

将源代码转换为抽象语法树。

// 源码
const x = 1 + 2;

// Parser 输出 AST
{
  type: 'Program',
  body: [{
    type: 'VariableDeclaration',
    declarations: [{
      type: 'VariableDeclarator',
      id: { type: 'Identifier', name: 'x' },
      init: {
        type: 'BinaryExpression',
        operator: '+',
        left: { type: 'Literal', value: 1 },
        right: { type: 'Literal', value: 2 }
      }
    }]
  }]
}

2. 解释器（Interpreter）

快速生成字节码并执行，负责启动速度。

// 字节码示例（伪代码）
LdaGlobal [1]      // 加载全局变量
Star r0            // 存储到寄存器
Add r0, [2]        // 执行加法
Star [3]           // 存储结果

3. JIT 编译器

将热点代码编译为优化机器码。

// 编译流程
字节码 → 中间表示(IR) → 优化 → 机器码

4. 垃圾回收器（GC）

自动管理内存分配与回收。

// 内存区域
┌──────────────────────────────────────┐
│              Heap (堆)                 │
├────────────────┬─────────────────────┤
│  New Space     │    Old Space         │
│  (新生代)       │    (老生代)           │
│  2-8MB         │    较大               │
├────────────────┼─────────────────────┤
│  Semi-space    │  Pointer Space      │
│  From/To       │  Data Space         │
└────────────────┴─────────────────────┘

V8 架构详解

┌────────────────────────────────────┐
│              V8 架构                │
├────────────────────────────────────┤
│  Parser (解析器)                    │
│       ↓                            │
│  AST (抽象语法树)                    │
│       ↓                            │
│  Ignition (解释器) → 字节码          │
│       ↓                            │
│  TurboFan (优化编译器) → 机器码       │
│       ↓                            │
│  Orinoco (并发GC)                   │
└────────────────────────────────────┘

Ignition 解释器

• 低内存字节码
• 快速启动
• 收集类型反馈

TurboFan 编译器

• 基于类型反馈优化
• 生成高效机器码
• 支持反优化

SpiderMonkey 架构

┌────────────────────────────────────┐
│         SpiderMonkey 架构           │
├────────────────────────────────────┤
│  Parser → AST                       │
│      ↓                              │
│  BytecodeEmitter → 字节码           │
│      ↓                              │
│  Baseline Interpreter (快速解释)     │
│      ↓                              │
│  IonMonkey (优化编译器)              │
└────────────────────────────────────┘

多级 JIT

1. Baseline：快速编译，基础优化
2. IonMonkey：深度优化编译

JavaScriptCore 架构

┌────────────────────────────────────┐
│       JavaScriptCore 架构           │
├────────────────────────────────────┤
│  Parser → AST                       │
│      ↓                              │
│  LLInt (低级解释器)                  │
│      ↓                              │
│  Baseline JIT                       │
│      ↓                              │
│  DFG JIT (数据流图)                  │
│      ↓                              │
│  FTL JIT (更快链接)                  │
└────────────────────────────────────┘

四级执行

1. LLInt：解释执行
2. Baseline JIT：快速编译
3. DFG JIT：中级优化
4. FTL JIT：高级优化

架构对比

不同引擎对相同代码的优化策略不同，性能表现可能差异较大。

要点总结

• 引擎核心：解析器、解释器、JIT编译器、GC
• V8 使用 Ignition + TurboFan
• SpiderMonkey 使用 Baseline + IonMonkey
• JSC 使用四级执行管道