1
// 源码
2
const x = 1 + 2;
3

4
// 词法分析后的 Token 流
5
[
6
  { type: "Keyword", value: "const" },
7
  { type: "Identifier", value: "x" },
8
  { type: "Punctuator", value: "=" },
9
  { type: "Numeric", value: "1" },
10
  { type: "Punctuator", value: "+" },
11
  { type: "Numeric", value: "2" },
12
  { type: "Punctuator", value: ";" },
13
];

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

6
// AST 结构（简化）
7
{
8
  type: 'FunctionDeclaration',
9
  id: { type: 'Identifier', name: 'add' },
10
  params: [
11
    { type: 'Identifier', name: 'a' },
12
    { type: 'Identifier', name: 'b' }
13
  ],
14
  body: {
15
    type: 'BlockStatement',
16
    body: [{
17
      type: 'ReturnStatement',
18
      argument: {
19
        type: 'BinaryExpression',
20
        operator: '+',
21
        left: { type: 'Identifier', name: 'a' },
22
        right: { type: 'Identifier', name: 'b' }
23
      }
24
    }]
25
  }
26
}

1
// 外层代码立即解析
2
function outer() {
3
  // inner 函数体延迟解析（首次调用时才解析）
4
  function inner() {
5
    console.log("lazy parsed");
6
  }
7

8
  // 调用时才触发完整解析
9
  inner();
10
}

1
┌─────────────────────────────────────────┐
2
│ JavaScript 源码                          │
3
│ const x = 1 + 2;                        │
4
└─────────────────┬───────────────────────┘
5
                  ↓
6
┌─────────────────────────────────────────┐
7
│ 字节码（简化表示）                        │
8
│ Ldar a0          // 加载参数 a           │
9
│ Add a1, [0]      // 加上参数 b           │
10
│ Return           // 返回结果             │
11
└─────────────────┬───────────────────────┘
12
                  ↓
13
┌─────────────────────────────────────────┐
14
│ 机器码（x64）                            │
15
│ mov rax, [rbp-0x10]                     │
16
│ add rax, [rbp-0x18]                     │
17
│ ret                                     │
18
└─────────────────────────────────────────┘

1
// 源码
2
function sum(a, b) {
3
  return a + b;
4
}
5

6
// 生成的字节码（简化）
7
// 参数 a 在寄存器 a0, b 在寄存器 a1
8
Ldar a0           // 加载 a 到累加器
9
Add a1, [0]       // 累加器 + b，结果存入累加器
10
Return            // 返回累加器值

1
// 源码：条件语句
2
function abs(x) {
3
  if (x >= 0) {
4
    return x;
5
  }
6
  return -x;
7
}
8

9
// 字节码（简化）
10
Ldar a0           // 加载 x
11
Star r0           // 存入 r0
12
LdaSmi [0]        // 加载立即数 0
13
TestGreaterThanOrEqual r0  // 比较 x >= 0
14
JumpIfFalse [10] // 条件为假跳转到地址 10
15
Ldar a0           // 返回 x
16
Return
17
Ldar a0           // 加载 x
18
Neg               // 取负
19
Return

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

5
// 第一次调用：整数
6
add(1, 2); // 记录：a 是 Smi，b 是 Smi，结果是 Smi
7

8
// 第二次调用：还是整数
9
add(3, 4); // 确认：参数类型稳定
10

11
// 第三次调用：字符串
12
add("a", "b"); // 类型变化！触发去优化

1
FeedbackVector for add:
2
┌────────────────────────────────────────┐
3
│ Slot 0: BinaryOp (+)                   │
4
│   ├── 类型: Smi + Smi → Smi            │
5
│   └── 调用次数: 2                       │
6
├────────────────────────────────────────┤
7
│ Slot 1: CallCount                      │
8
│   └── 调用次数: 3                       │
9
└────────────────────────────────────────┘

1
const obj = { x: 1, y: 2 };
2

3
function getX(o) {
4
  return o.x; // 第一次：查找属性位置
5
  // 后续：直接使用缓存的位置
6
}
7

8
getX(obj); // 缓存：obj 的 x 在 offset 0
9
getX(obj); // 命中缓存，直接访问

1
// 原始代码
2
function add(a, b) {
3
  return a + b;
4
}
5
function compute(x) {
6
  return add(x, 10);
7
}
8

9
// 内联后
10
function compute(x) {
11
  return x + 10; // add 函数被内联
12
}

1
function createPoint(x, y) {
2
  return { x, y }; // 对象逃逸（返回给外部）
3
}
4

5
function compute(x, y) {
6
  const point = { x, y }; // 对象未逃逸
7
  return point.x + point.y;
8
}
9

10
// 逃逸分析后，可以标量替换
11
function compute(x, y) {
12
  // const point = { x, y };  // 消除对象分配
13
  return x + y; // 直接使用标量
14
}

1
// 源码
2
// return a + b * c;
3

4
计算图:
5
    Load(a)    Load(b)    Load(c)
6
        |          |          |
7
        |      Multiply------+
8
        |          |
9
        +---Add----+
10
            |
11
         Return

1
function process(arr) {
2
  let sum = 0;
3
  for (let i = 0; i < arr.length; i++) {
4
    sum += arr[i];
5
  }
6
  return sum;
7
}
8

9
// 假设：arr 是连续的整数数组（SMI Array）
10
// 优化：
11
// 1. 内联 length 访问
12
// 2. 消除边界检查（如果已验证）
13
// 3. 使用 SIMD 指令加速

1
// 热点函数
2
function hot(arr) {
3
  return arr[0] + arr[1];
4
}
5

6
// 大量调用，已优化
7
for (let i = 0; i < 100000; i++) {
8
  hot([1, 2]); // 整数数组，优化为 SMI 操作
9
}
10

11
// 类型改变，触发去优化
12
hot(["a", "b"]); // 字符串数组！
13

14
// 后续调用回到解释器
15
hot([3, 4]); // 不再是优化代码

1
// 创建两个"形状"相同的对象
2
const p1 = { x: 1, y: 2 };
3
const p2 = { x: 3, y: 4 };
4

5
// 它们共享同一个隐藏类
6
// 隐藏类: { x: offset 0, y: offset 1 }

1
// 不同顺序创建不同隐藏类
2
const p1 = { x: 1, y: 2 }; // 隐藏类 A
3
const p2 = { y: 1, x: 2 }; // 隐藏类 B（不同！）

1
// 不好：类型不稳定
2
function process(value) {
3
  if (typeof value === "number") {
4
    return value * 2;
5
  }
6
  return value + value; // 字符串拼接
7
}
8
process(1); // number
9
process("hello"); // string - 触发去优化！
10

11
// 好：类型稳定
12
function processNumber(value) {
13
  return value * 2;
14
}
15
function processString(value) {
16
  return value + value;
17
}

1
// 不好：动态添加属性
2
function Point(x, y) {
3
  this.x = x;
4
  if (y !== undefined) {
5
    this.y = y; // 有时没有 y
6
  }
7
}
8

9
// 好：固定形状
10
function Point(x, y = 0) {
11
  this.x = x;
12
  this.y = y; // 始终有 y
13
}

1
// 不好：改变对象形状
2
const obj = { a: 1 };
3
obj.b = 2; // 添加属性，创建新隐藏类
4
delete obj.a; // 删除属性，再创建新隐藏类
5

6
// 好：提前定义所有属性
7
const obj = { a: 1, b: null };
8
obj.b = 2; // 不改变隐藏类

1
// 不好：混合类型数组
2
const arr = [1, 2, "a", {}]; // 存储为对象数组
3

4
// 好：同质数组
5
const arr = [1, 2, 3, 4]; // 存储为 SMI 数组
6
const arr2 = [1.1, 2.2, 3.3]; // 存储为 double 数组

1
# Node.js 查看字节码
2
node --print-bytecode script.js
3

4
# 查看优化信息
5
node --trace-opt script.js
6

7
# 查看去优化信息
8
node --trace-deopt script.js

1
Performance 面板:
2
├── 查看函数执行时间
3
├── 识别热点函数
4
└── 分析 GC 暂停
5

6
Memory 面板:
7
├── 堆快照
8
├── 分配时间线
9
└── 内存泄漏检测

1
// 使用 performance.now() 测量
2
const start = performance.now();
3
for (let i = 0; i < 1000000; i++) {
4
  process(arr);
5
}
6
const end = performance.now();
7
console.log(`耗时: ${end - start}ms`);
8

9
// 使用 console.time
10
console.time("process");
11
for (let i = 0; i < 1000000; i++) {
12
  process(arr);
13
}
14
console.timeEnd("process");