深入理解 JavaScript 引擎：V8 原理与性能优化的底层解析#

1
JavaScript 源代码
2
       ↓
3
   Parser（解析器）
4
       ↓
5
   AST（抽象语法树）
6
       ↓
7
   Ignition（解释器）
8
       ↓
9
   Bytecode（字节码）
10
       ↓
11
   TurboFan（优化编译器）
12
       ↓
13
   Machine Code（机器码）

1
1. 解析：Source Code → AST
2
2. 基线编译：AST → Bytecode（Ignition）
3
3. 执行：解释执行 Bytecode
4
4. 优化编译：Bytecode → Optimized Machine Code（TurboFan）
5
5. 去优化：如果假设不成立，回退到 Bytecode

1
// 创建对象
2
const obj = { x: 1 };  // 创建 HiddenClass A
3

4
obj.y = 2;  // 过渡到 HiddenClass B（包含 x 和 y）
5

6
obj.z = 3;  // 过渡到 HiddenClass C（包含 x, y, z）

1
// ✅ 优化写法
2
class Point {
3
  constructor(x, y) {
4
    this.x = x;  // 总是先初始化 x
5
    this.y = y;  // 再初始化 y
6
  }
7
}
8

9
// ❌ 避免这样写
10
const p = new Point(1, 2);
11
p.z = 3;  // 动态添加属性，创建新的 HiddenClass

1
function getX(obj) {
2
  return obj.x;
3
}
4

5
const p1 = { x: 1 };
6
const p2 = { x: 2 };
7

8
getX(p1);  // 单态（Monomorphic）- 最快
9
getX(p2);  // 仍然是单态，因为 p1 和 p2 有相同的 HiddenClass
10

11
const p3 = { y: 1, x: 2 };  // 不同的属性顺序，不同的 HiddenClass
12
getX(p3);  // 变成多态（Polymorphic）- 较慢

1
┌─────────────────────────────────────┐
2
│           新生代（Young Generation）  │
3
│  ┌──────────────┬──────────────┐    │
4
│  │   From 空间   │   To 空间     │    │
5
│  │   (使用中)    │   (空闲)      │    │
6
│  └──────────────┴──────────────┘    │
7
│  使用 Scavenge 算法回收              │
8
├─────────────────────────────────────┤
9
│           老生代（Old Generation）    │
10
│  使用 Mark-Sweep-Compact 算法回收    │
11
├─────────────────────────────────────┤
12
│         大对象区（Large Object）      │
13
│  超过 1MB 的对象直接分配在这里         │
14
└─────────────────────────────────────┘

1
1. 新对象分配到 From 空间
2
2. From 空间满时触发 GC
3
3. 存活对象复制到 To 空间
4
4. From 和 To 交换
5
5. 未复制的对象被回收

1
// ❌ 闭包引用导致的内存泄漏
2
function createClosure() {
3
  const largeArray = new Array(1000000).fill('x');
4
  return function() {
5
    // 即使只使用 length，largeArray 也不会被释放
6
    return largeArray.length;
7
  };
8
}
9

10
// ✅ 正确的写法
11
function createClosure() {
12
  const largeArray = new Array(1000000).fill('x');
13
  const length = largeArray.length;  // 提取需要的值
14
  return function() {
15
    return length;  // 只持有 length
16
  };
17
}
18

19
// ❌ 全局变量缓存
20
const cache = {};  // 永不释放
21

22
// ✅ 使用 WeakMap
23
const cache = new WeakMap();  // 键是对象时，不会阻止垃圾回收

1
function add(a, b) {
2
  return a + b;
3
}
4

5
add(1, 2);    // 推测为数字相加，生成整数加法机器码
6
add('a', 'b'); // 类型变化，去优化（Deoptimization）

1
// ❌ try-catch 阻止优化
2
function hotFunction() {
3
  try {
4
    return doSomething();
5
  } catch (e) {
6
    return null;
7
  }
8
}
9

10
// ✅ 将 try-catch 移到非关键路径
11
function wrapper() {
12
  try {
13
    return hotFunction();
14
  } catch (e) {
15
    return null;
16
  }
17
}
18

19
function hotFunction() {
20
  return doSomething();  // 可以被优化
21
}

1
// ❌ 阻止优化
2
function bad() {
3
  with (obj) {
4
    x = 1;
5
  }
6
}
7

8
// ❌ 阻止优化
9
function bad2() {
10
  eval('var x = 1');
11
}