JavaScript 性能 —— V8 引擎、内存管理与 GC

┌─────────────────────────────────────────┐
│              JavaScript 代码             │
└─────────────────┬───────────────────────┘
                  ↓
┌─────────────────────────────────────────┐
│              Parser (解析器)              │
│    生成 AST (抽象语法树)                   │
└─────────────────┬───────────────────────┘
                  ↓
┌─────────────────────────────────────────┐
│           Ignition (解释器)               │
│    生成字节码，快速启动                    │
└─────────────────┬───────────────────────┘
                  ↓
┌─────────────────────────────────────────┐
│          TurboFan (优化编译器)            │
│    生成优化机器码                         │
└─────────────────────────────────────────┘

// 源代码
const add = (a, b) => a + b;

// 生成 AST (简化)
{
  type: 'ArrowFunctionExpression',
  params: [{ type: 'Identifier', name: 'a' }, ...],
  body: { type: 'BinaryExpression', operator: '+', ... }
}

Bytecode:
LdaSmi [1]      // 加载立即数 1
Star r0         // 存储到寄存器 r0
LdaSmi [2]
Add r0
Return          // 返回结果

热点代码 → 机器码

function add(a, b) {
  return a + b;
}

// 调用 10000 次后，V8 认为这是"热点代码"
// 编译为机器码，下次调用直接执行机器码
for (let i = 0; i < 10000; i++) {
  add(i, i);
}

// JavaScript 是动态类型
function add(a, b) {
  return a + b;
}

add(1, 2);      // 数字相加
add('a', 'b');  // 字符串拼接
add([1], [2]);  // 数组合并

// 对象结构相同，共享隐藏类
const obj1 = { x: 1, y: 2 };
const obj2 = { x: 3, y: 4 };

// 对象结构不同，隐藏类不同
const obj3 = { x: 1 };
obj3.y = 2;  // 隐藏类变化，性能下降

// ✅ 好：属性顺序一致
function Point(x, y) {
  this.x = x;
  this.y = y;
}

// ❌ 差：属性顺序不一致
function BadPoint(x, y) {
  this.x = x;
  if (y) this.y = y;
}

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

const obj1 = { x: 1 };
const obj2 = { x: 2 };

getX(obj1);  // 记录 obj.x 在 offset 0
getX(obj2);  // 直接从 offset 0 读取

┌─────────────────────────────────────┐
│              New Space              │
│  (新生代，存活时间短的对象)           │
│  ┌──────────┐  ┌──────────┐        │
│  │ From     │  │ To       │        │
│  │ (使用中) │  │ (空闲)   │        │
│  └──────────┘  └──────────┘        │
└─────────────────────────────────────┘
          ↓ 晋升
┌─────────────────────────────────────┐
│              Old Space              │
│  (老生代，存活时间长的对象)           │
│  ┌────────────┐  ┌────────────┐    │
│  │ Old Pointer│  │ Old Data   │    │
│  │ Space      │  │ Space      │    │
│  └────────────┘  └────────────┘    │
└─────────────────────────────────────┘

1. From Space 满了
2. 复制活跃对象到 To Space
3. 释放 From Space
4. 交换 From/To

1. 标记：遍历所有对象，标记活跃对象
2. 清除：回收未标记对象
3. 整理：移动对象减少内存碎片

// 传统 GC：阻塞执行
// ===== GC 执行中，JS 暂停 =====

// 增量 GC：分批执行
// JS 执行 → GC 标记 → JS 执行 → GC 标记 → JS 执行 → 完成

// 1. 全局变量
function leak() {
  bigData = new Array(1000000);  // 泄漏到全局
}

// 2. 闭包
function createLeak() {
  const bigData = new Array(1000000);
  return function() {  // bigData 不会被回收
    return bigData[0];
  };
}

// 3. DOM 引用
const elements = [];
function addElement() {
  const div = document.createElement('div');
  elements.push(div);  // 引用 DOM
}
function removeElement() {
  elements.pop();  // 需要手动清除引用
}

// 4. 定时器
function leak() {
  setInterval(() => {
    // 引用外部变量
  }, 1000);
}

// 解决：clearInterval(timerId)

// 1. 避免创建不必要的对象
// ❌ 不好
const arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push({ index: i, value: i * 2 });
}

// ✅ 好：复用对象
const obj = {};
const arr = [];
for (let i = 0; i < 1000; i++) {
  obj.index = i;
  obj.value = i * 2;
  arr.push({ ...obj }); // 或 Object.assign({}, obj)
}

// 2. 使用 Map 替代 Object（大量键值对）
// Object: 原型链、字符串键
// Map: 任意类型键、更快的增删改查

// 3. 及时清理大数组
const bigArray = new Array(1000000);
bigArray = null;  // 释放引用

// 4. 虚引用（WeakMap/WeakSet）
const weakMap = new WeakMap();
weakMap.set(element, { data: 'some data' });
// element 被移除时，weakMap 自动清理

// ❌ 不好：类型不稳定
function sum(arr) {
  let total = 0;
  for (let i = 0; i < arr.length; i++) {
    total += arr[i];  // 可能是数字、字符串
  }
  return total;
}

// ✅ 好：类型稳定
function sum(arr) {
  let total = 0;  // 明确是数字
  for (let i = 0; i < arr.length; i++) {
    total += arr[i];  // V8 优化为数字加法
  }
  return total;
}

// ❌ 不好：数组包含多种类型
const arr = [1, 2, 'a', 3, null, {}];

// ✅ 好：同类型数组
const nums = [1, 2, 3, 4, 5];  // PACKED_SMI_ELEMENTS
const objs = [{}, {}, {}];      // PACKED_ELEMENTS

// ❌ 不好：动态增长
const arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push(i);
}

// ✅ 好：预分配
const arr = new Array(1000);
for (let i = 0; i < 1000; i++) {
  arr[i] = i;
}

// for 循环比 forEach 快（某些场景）
for (let i = 0; i < arr.length; i++) {
  process(arr[i]);
}

// 但现代 V8 优化后差距很小，可读性优先

// 录制性能
// 1. 打开 DevTools → Performance
// 2. 点击 Record
// 3. 执行操作
// 4. 点击 Stop
// 5. 分析：
//    - Main: 主线程活动
//    - GPU: GPU 使用
//    - Network: 网络请求

// 内存分析
// 1. Heap Snapshot: 拍照当前内存
// 2. Allocation Timeline: 追踪分配
// 3. Record Allocation Stats: 记录分配统计

console.time('loop');
for (let i = 0; i < 100000; i++) {}
console.timeEnd('loop');

console.profile('myProfile');
// 执行代码
console.profileEnd();