V8 垃圾回收

┌──────────────┐   ┌──────────────┐   ┌──────────────┐   ┌──────────────┐
│  引用计数    │ → │  标记清理    │ → │  分代回收    │ → │  增量/并发   │
│ (1960s)      │   │ (1960s)      │   │ (V8 默认)    │   │  (现代优化)  │
│  循环引用泄漏 │   │  全堆停顿    │   │  新生代/老生代│   │  减少 STW    │
└──────────────┘   └──────────────┘   └──────────────┘   └──────────────┘

问题：全堆扫描太慢

一次 Full GC 扫描整个堆 → 堆越大停顿越长 → 页面卡顿

解决：分代 + 不同策略

新生代（小而快，Scavenge 算法）→ 存活下来的晋升到老生代
老生代（大而稳，Mark-Sweep + Mark-Compact）→ 减少 Full GC 频率

┌───────────────────────────────────────────────────────┐
│                  新生代 (Young Generation)              │
│  ┌─────────────────┐       ┌─────────────────┐        │
│  │   From 空间      │       │    To 空间       │        │
│  │  (使用中)        │       │  (空闲/备用)     │        │
│  │  ● ● ○ ● ○ ●    │       │                 │        │
│  │  (●=存活 ○=垃圾) │       │                 │        │
│  └─────────────────┘       └─────────────────┘        │
│           │                         ▲                  │
│           │  ① 标记存活对象          │                  │
│           │  ② 复制存活对象 ─────────┘                  │
│           │  ③ 清空 From 空间                          │
│           ▼                                           │
│       From ↔ To 角色互换                               │
└───────────────────────────────────────────────────────┘

代价：永远浪费一半内存空间（To 空间始终空闲）
优势：只复制存活对象，速度极快（存活率通常 < 25%）

前提：新生代空间小 + 对象存活率低 = 复制成本可控

// 对象晋升条件：
// 1. 对象经历过一次 Scavenge 仍然存活
// 2. To 空间已用内存超过 25%（防止 To 空间溢出）

function createObjects() {
  let temp = { data: "short-lived" }; // 新生代，函数执行完就变成垃圾
  let keeper = { data: "long-lived" }; // 新生代，如果被外部引用则存活
  return keeper; // keeper 被外部引用，经历一次 GC 后晋升到老生代
}
const obj = createObjects(); // temp 被回收，keeper 晋升

┌───────────────────────────────────────────────────────┐
│               老生代 (Old Generation)                   │
│                                                       │
│  Mark-Sweep（标记清理）:                               │
│  ① 标记所有可达对象                                    │
│  ② 清除未标记对象 → 产生内存碎片                       │
│                                                       │
│  ┌───┐     ┌───┐     ┌───┐     ┌───┐                 │
│  │ A │     │ B │     │   │     │ C │  ← 碎片（空洞）  │
│  └───┘     └───┘     └───┘     └───┘                 │
│                                                       │
│  Mark-Compact（标记整理）:                             │
│  ① 标记所有可达对象                                    │
│  ② 将存活对象向一端移动 → 消除碎片                     │
│                                                       │
│  ┌───┐ ┌───┐ ┌───┐                                   │
│  │ A │ │ B │ │ C │           ← 紧密排列，无碎片        │
│  └───┘ └───┘ └───┘                                   │
└───────────────────────────────────────────────────────┘

┌───────────────────────────────────────────────────────┐
│                    主线程时间线                         │
│                                                       │
│  JS 执行 │  STW (GC)  │  JS 执行 │  STW (GC)  │ JS    │
│  ████████│  ██████████│  ████████│  ██████████│ ████  │
│          │  ↑ 停顿    │          │  ↑ 停顿    │       │
│          │  无法执行JS │          │  无法执行JS │       │
└───────────────────────────────────────────────────────┘

问题：堆越大，STW 越长 → 页面卡顿

增量标记（老生代）:
┌──────┐ ┌──┐ ┌──────┐ ┌──┐ ┌──────┐ ┌──┐ ┌──────┐
│  JS  │ │GC│ │  JS  │ │GC│ │  JS  │ │GC│ │  JS  │
└──────┘ └──┘ └──────┘ └──┘ └──────┘ └──┘ └──────┘
   JS 和 GC 交替执行，单次停顿从 100ms → 几毫秒

并发标记（老生代）:
┌──────────────────────────────────────┐
│             主线程 (JS)               │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│          后台线程 (GC 标记)           │  ← 不阻塞 JS
└──────────────────────────────────────┘

// ❌ 闭包导致的内存泄漏
function createHeavyClosure() {
  const largeArray = new Array(1000000).fill("data");
  return function () {
    // 闭包引用了 largeArray，即使只需要其中一项
    return largeArray[0];
  };
}
const getFirst = createHeavyClosure(); // largeArray 永远不会被回收

// ✅ 只保留需要的数据
function createLightClosure() {
  const firstItem = new Array(1000000).fill("data")[0];
  return function () {
    return firstItem; // 只引用一个值，大数组可以被回收
  };
}
const getFirstLight = createLightClosure(); // 大数组已被回收

// ❌ Detached DOM 泄漏
let detached = document.createElement("div");
document.body.removeChild(detached); // DOM 从页面移除
// 但 detached 变量仍然引用这个 DOM 节点，无法被回收

// ✅ 及时解除引用
let detached2 = document.createElement("div");
document.body.removeChild(detached2);
detached2 = null; // 解除引用，GC 可以回收

// WeakRef：弱引用，不阻止 GC 回收目标对象
let target = { data: "important" };
let weakRef = new WeakRef(target);

console.log(weakRef.deref()); // { data: 'important' } — 对象还在

target = null; // 解除强引用
// GC 之后才可能回收 { data: 'important' }，但回收时机不确定

console.log(weakRef.deref()); // 可能仍返回对象；只有 GC 真正回收后才返回 undefined
// 注意：这不是同步可见的结论，不能据此判断对象是否已释放

// FinalizationRegistry：对象被回收后的回调
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`对象 ${heldValue} 已被 GC 回收`);
  // 清理外部资源（关闭 WebSocket、释放 GPU 纹理等）
});

function createResource(name) {
  const resource = { name, data: new ArrayBuffer(1024 * 1024) };
  registry.register(resource, name); // 注册回调
  return resource;
}

let res = createResource("myResource");
res = null; // GC 回收时会触发回调

排查步骤：
┌──────────────┐   ┌──────────────┐   ┌──────────────┐
│  1. 拍快照    │ → │  2. 操作     │ → │  3. 再拍快照  │
│  (Heap Snap)  │   │  (复现问题)  │   │  (Heap Snap)  │
└──────────────┘   └──────────────┘   └──────────────┘
                          │
                          ▼
                  ┌──────────────┐
                  │  4. 对比快照  │
                  │  (Comparison) │
                  └──────────────┘

// 用代码模拟内存泄漏，用于学习排查
class LeakDemo {
  constructor() {
    this.cache = [];
  }
  addData() {
    this.cache.push(new Array(10000).fill("leak"));
    // cache 只增不减 → 内存泄漏
  }
}
const demo = new LeakDemo();
setInterval(() => demo.addData(), 100);
// 在 DevTools Memory 面板中拍两次快照，对比就能看到 LeakDemo 实例在增长

// ❌ 渲染 10000 个 DOM 节点 — 内存占用大
<ul>
  {items.map(item => <li key={item.id}>{item.text}</li>)}
</ul>

// ✅ 虚拟列表 — 只渲染可视区域的 20 个节点
// 内存占用减少 500 倍
<VirtualList
  height={400}
  itemCount={10000}
  itemSize={40}
  renderItem={({ index, style }) => (
    <li style={style}>{items[index].text}</li>
  )}
/>

// ❌ 一次性加载 100MB JSON — 峰值内存翻倍
const response = await fetch("/huge-data.json");
const data = await response.json(); // 解析过程峰值 200MB+

// ✅ 流式处理 — 内存占用恒定
const response = await fetch("/huge-data.json");
const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = decoder.decode(value);
  processChunk(chunk); // 逐块处理，不需要全部加载到内存
}

// ❌ Map 持有 DOM 引用 — DOM 移除后内存泄漏
const metadata = new Map();
metadata.set(domElement, { clickCount: 10 });
document.body.removeChild(domElement); // domElement 仍被 Map 引用

// ✅ WeakMap — DOM 移除后自动释放
const metadata = new WeakMap();
metadata.set(domElement, { clickCount: 10 });
document.body.removeChild(domElement); // domElement 可被 GC 回收
// metadata 中对应的条目也会自动消失

// V8 堆空间布局（简化）
class Heap {
  // 新生代
  NewSpace new_space_;         // Scavenge 算法，From/To 两半

  // 老生代
  OldSpace old_space_;         // Mark-Sweep / Mark-Compact
  CodeSpace code_space_;       // 编译后的机器码
  MapSpace map_space_;         // Hidden Class（隐藏类/Map）

  // 大对象空间
  LargeObjectSpace lo_space_;  // 超过一定大小的对象直接放这里
  // ...
};

// 三色标记法：
// 白色 (White): 未被标记，GC 结束后仍为白色对象会被回收
// 灰色 (Gray):  已被标记，但其引用的对象还未被标记
// 黑色 (Black): 已被标记，其引用的对象也已被标记

// 增量标记的核心：标记工作可以暂停和恢复
// 暂停时记录"当前灰色对象"，恢复时从灰色对象继续标记
// 写屏障确保 JS 修改引用时不会丢失标记

// 伪代码
void IncrementalMarking::Step() {
  // 每次只标记一小批对象（时间片 < 1ms）
  while (has_more_gray_objects() && time_slice_not_exceeded()) {
    Object* gray = next_gray_object();
    mark_references(gray);  // 标记 gray 的所有引用
    gray->set_color(BLACK); // gray 变成黑色
  }
}