JavaScript JIT 编译优化

JIT（Just-In-Time）编译是 JavaScript 高性能执行的核心，通过运行时编译实现接近静态语言的执行效率。

JIT 编译原理

为什么需要 JIT

解释执行：启动快，执行慢
编译执行：启动慢，执行快
JIT编译：启动较快，执行快（热点优化）

两类 JIT 编译器

V8 优化管道

┌──────────┐
│ 源代码    │
└────┬─────┘
     ↓
┌──────────┐
│  Parser  │  → AST
└────┬─────┘
     ↓
┌──────────┐
│ Ignition │  → 字节码（快速启动）
│ (解释器)  │
└────┬─────┘
     ↓ (热点检测)
┌──────────┐
│ TurboFan │  → 优化机器码（高效执行）
│(优化编译器)│
└────┬─────┘
     ↓ (类型不稳定)
┌──────────┐
│ 去优化    │  → 回退字节码
└──────────┘

热点代码检测

内联缓存（Inline Cache）

function getX(obj) {
  return obj.x;
}

// V8 会缓存 obj 的形状（Hidden Class）
const point = { x: 1, y: 2 };
getX(point); // 缓存命中，优化路径

const rect = { x: 10, width: 100 };
getX(rect); // 相同形状，继续命中

优化触发条件

• 函数被多次调用
• 循环体多次执行
• 代码路径稳定

// 热点代码示例
function sum(arr) {
  let total = 0;
  for (let i = 0; i < arr.length; i++) {
    total += arr[i];
  }
  return total;
}

// 多次调用触发优化
for (let i = 0; i < 10000; i++) {
  sum([1, 2, 3]); // 稳定类型，优化生效
}

优化策略

1. 内联（Inlining）

// 优化前
function add(a, b) {
  return a + b;
}
function calculate(x) {
  return add(x, 10);
}

// 优化后（内联）
function calculate(x) {
  return x + 10; // add 被内联
}

2. 逃逸分析

function createUser(name) {
  const user = { name }; // 对象未逃逸
  return user.name;       // 可以优化为直接返回 name
}

// 优化后（栈分配，无需堆内存）
function createUser(name) {
  return name;
}

3. 循环优化

// 优化前
for (let i = 0; i < arr.length; i++) {
  // 每次迭代都访问 length
}

// 优化后
for (let i = 0, len = arr.length; i < len; i++) {
  // length 只读取一次
}

反优化（Deoptimization）

触发条件

function process(value) {
  return value * 2;
}

// 优化假设：value 是整数
for (let i = 0; i < 10000; i++) {
  process(i); // 触发优化
}

// 类型变化 → 反优化
process('hello'); // 触发反优化，回退字节码执行

避免反优化

// ❌ 类型不稳定
function bad(arr) {
  let sum = 0;
  for (let v of arr) {
    sum += v; // v 可能是数字或字符串
  }
  return sum;
}

// ✅ 类型稳定
function good(arr) {
  let sum = 0;
  for (let v of arr) {
    sum += v | 0; // 强制整数
  }
  return sum;
}

Hidden Class 优化

对象形状一致性

// ❌ 不同形状，优化失效
const obj1 = { x: 1, y: 2 };
const obj2 = { y: 1, x: 2 }; // 属性顺序不同

// ✅ 相同形状
const obj1 = { x: 1, y: 2 };
const obj2 = { x: 3, y: 4 }; // 相同 Hidden Class

属性初始化

// ❌ 动态添加属性
function Point(x, y) {
  this.x = x;
  if (y) this.y = y; // 形状不一致
}

// ✅ 构造时初始化所有属性
function Point(x, y) {
  this.x = x;
  this.y = y || 0; // 始终有 y 属性
}

编写优化友好代码

数组操作

// ✅ 连续数组，优化友好
const arr = [1, 2, 3, 4, 5];
arr.push(6);

// ❌ 稀疏数组，优化失效
const sparse = [];
sparse[1000] = 1; // 大量空洞

函数优化

// ❌ arguments 对象修改
function bad() {
  arguments[0] = 1; // 阻止优化
}

// ✅ 使用 rest 参数
function good(...args) {
  args[0] = 1; // 可优化
}

使用 --trace-opt 和 --trace-deopt 标志运行 Node.js 可查看优化详情。

要点总结

• 保持类型稳定，避免触发反优化
• 对象属性初始化要完整
• 数组避免稀疏
• 使用 --allow-natives-syntax 调试优化