内存管理与垃圾回收

// 一个典型的内存失控场景
// 每次切换路由都往全局数组里塞数据
const globalCache = [];

function loadPageData(page) {
  const data = new Array(100000).fill({
    page,
    payload: 'x'.repeat(1024)
  });
  // 只增不减 —— 内存永远不会被回收
  globalCache.push(data);
  return data;
}

// 用户切了 100 次路由之后……
// Heap Size: 10GB → 页面崩溃

// 原始值 → 栈内存（值本身存在栈中）
let a = 1;
let b = a; // 复制值
b = 2;
console.log(a); // 1 —— 互不影响

// 引用值 → 堆内存（栈中只存指针）
let obj1 = { name: '张玥' };
let obj2 = obj1; // 复制引用（指针）
obj2.name = '李雷';
console.log(obj1.name); // '李雷' —— 指向同一块堆内存

// 函数执行上下文 → 调用栈
function foo() {
  const local = { big: new Array(1e6) };
  return local.big.length;
}
// foo() 执行结束后，栈帧弹出
// local 失去引用，堆中的大数组等待被 GC 回收

/* 阶段一：分配内存 */
const num = 42; // 栈分配
const str = 'hello'; // 栈（短字符串）
const obj = { a: 1 }; // 堆分配
const arr = [1, 2, 3]; // 堆分配

/* 阶段二：使用内存（读 / 写） */
obj.a = 100;
arr.push(4);

/* 阶段三：释放内存 */
// 开发者无法手动释放，只能"解除引用"
// 让对象变得"不可达"，交给 GC 处理
let temp = { big: new Array(1e7) };
temp = null; // 解除引用，等待回收

// 引用计数基本逻辑（伪代码）
let obj = {}; // obj 引用计数 = 1
let ref = obj; // 计数 = 2
ref = null; // 计数 = 1
obj = null; // 计数 = 0 → 立即回收 ✅

// 致命缺陷：循环引用
function createCycle() {
  const a = {};
  const b = {};
  a.b = b; // b 的计数 +1
  b.a = a; // a 的计数 +1
  return 'done';
}
createCycle();
// 函数执行完毕，a 和 b 已无法从外部访问
// 但两者互相引用，计数永远 ≥ 1
// → 内存永远无法回收 ❌

// 老版本 IE 的经典泄漏：DOM + JS 循环引用
// element.onclick = function() { ... element ... }

/* 可达性分析的核心思想 */
// 从一组"根对象"（GC Roots）出发
// 能顺着引用链走到的对象 = 存活
// 走不到的 = 垃圾，可以回收

// GC Roots 包括：
// 1. 全局对象 window / globalThis
// 2. 当前调用栈上的局部变量
// 3. 闭包捕获的变量
// 4. DOM 树中的引用

/* 标记清除 Mark-Sweep */
// ① 从根遍历，标记所有可达对象
// ② 遍历堆，回收未被标记的对象
// 缺点：产生大量内存碎片

/* 标记整理 Mark-Compact */
// ① 标记可达对象
// ② 将存活对象向一端移动
// ③ 直接清理掉边界外的内存
// 优点：无碎片，但移动成本高

/* 新生代（Young Generation） */
// 容量小（约 1~16MB），分为 From / To 两个半区
// 算法：Scavenge（Cheney 复制算法）
// 1. 从 From 空间标记存活对象
// 2. 复制到 To 空间（并整理，无碎片）
// 3. 清空 From，From / To 角色互换

/* 对象晋升（Promotion） */
// 条件一：经历过一次 Scavenge 仍存活
// 条件二：To 空间使用超过 25%
// → 被移动到老生代

/* 老生代（Old Generation） */
// 容量大，存放生命周期长的对象
// 算法：Mark-Sweep + Mark-Compact
// 优化：增量标记 / 并发标记 / 惰性清理

/* 为什么要"增量"？ */
// 全量标记会长时间阻塞主线程
// 拆成许多小步，穿插在 JS 执行间隙
// 把一次 100ms 的停顿拆成 100 次 1ms

/* ① 意外的全局变量 */
function leak() {
  name = '张玥'; // 漏写 let/const → window.name
  this.data = new Array(1e6); // this 指向全局
}

/* ② 未清理的定时器 / 回调 */
const timer = setInterval(() => {
  doSomething(hugeData); // 永久持有 hugeData
}, 1000);
// 组件卸载时必须 clearInterval(timer)

/* ③ 未解绑的 DOM 事件监听 */
element.addEventListener('click', handler);
// element 被移除后，监听器仍持有引用
// → element.removeEventListener('click', handler)

/* ④ 闭包持有大对象 */
function outer() {
  const massive = new Array(1e7).fill('x');
  return () => massive.length; // 闭包捕获 massive
}
// 只要返回的函数还被引用，massive 就永不释放

/* ⑤ 游离 DOM 引用 */
const cache = [];
cache.push(document.getElementById('node'));
// 即使 node 从 DOM 树移除，cache 仍持有它

/* ⑥ 控制台打印与 Map 缓存 */
console.log(bigObject); // DevTools 会保持引用
const map = new Map();
map.set(domNode, data); // 强引用，节点无法回收

/* 方法一：Performance 面板看趋势 */
// 1. 打开 DevTools → Performance
// 2. 勾选 Memory 复选框
// 3. 录制 → 反复执行可疑操作 → 停止
// 4. 观察 JS Heap 曲线
// 锯齿形 → 正常（GC 在回收）
// 阶梯形 → 泄漏（每次操作后基线抬升）

/* 方法二：Heap Snapshot 三快照法 */
// ① 操作前：拍快照 A
// ② 执行可疑操作 10 次
// ③ 手动触发 GC（垃圾桶图标）
// ④ 拍快照 B，再操作 10 次，拍快照 C
// ⑤ 选 Comparison 视图，对比 B 与 C
// Delta 持续为正的对象 = 泄漏嫌疑

/* 方法三：Allocation Timeline */
// 实时记录内存分配栈
// 蓝色条 = 仍存活，灰色条 = 已回收
// 直接点开蓝条查看分配位置

/* 方法四：performance.memory（仅 Chrome） */
console.log(performance.memory);
// { usedJSHeapSize, totalJSHeapSize, jsHeapSizeLimit }

/* WeakMap：键必须是对象，且为弱引用 */
const wm = new WeakMap();

let node = document.querySelector('#card');
wm.set(node, { visits: 0 });
// node 被移除 DOM 并解除外部引用后
// WeakMap 中的条目会自动消失 → 不泄漏 ✅

// 对比 Map：强引用，会阻止回收 ❌
const strongMap = new Map();
strongMap.set(node, data); // node 被永久持有

/* WeakSet：存对象集合，不阻止回收 */
const visited = new WeakSet();
function walk(el) {
  if (visited.has(el)) return;
  visited.add(el);
  // ... 遍历逻辑
}

/* WeakRef：不阻止回收的引用 */
const ref = new WeakRef(someBigObject);
// 需要时尝试取回，可能已被回收
const obj = ref.deref();
if (obj) { /* 仍然存活 */ }

/* FinalizationRegistry：回收后的回调 */
const registry = new FinalizationRegistry((id) => {
  console.log(`资源 ${id} 已被回收`);
});
registry.register(bigObj, 'bigObj-1');

/* ① 复用对象，减少频繁分配 */
// 反例：每帧创建新对象
function render() {
  const pos = { x: 0, y: 0 }; // 每次都新建
}
// 正例：复用同一个对象
const posPool = { x: 0, y: 0 };

/* ② 及时解除引用 */
let bigData = await fetchLargeData();
process(bigData);
bigData = null; // 尽早释放

/* ③ 虚拟列表替代全量渲染 */
// 10000 条数据只渲染可视区域的 20 条

/* ④ 分片处理大任务，避免长任务 */
function chunkProcess(list, size = 1000) {
  let i = 0;
  function step() {
    const end = Math.min(i + size, list.length);
    for (; i < end; i++) processItem(list[i]);
    if (i < list.length) requestIdleCallback(step);
  }
  step();
}

/* ⑤ 用 TypedArray 处理数值密集型数据 */
const buffer = new Float64Array(1000000);
// 相比普通数组，内存占用更低、无装箱开销

/* ⑥ 避免隐式类型转换与对象形状突变 */
// 反例：动态增删属性，破坏 Hidden Class
const p = {}; p.a = 1; p.b = 2; delete p.a;
// 正例：构造函数中一次性声明所有属性
function Point(x, y) { this.x = x; this.y = y; }