JavaScript 垃圾回收机制

2. 新生代回收（Scavenge 算法）

特点：

• 空间小（1-8MB）
• 回收频繁（对象存活时间短）
• 使用复制算法

Scavenge 过程（Cheney 算法）：

初始状态：
From空间：[活跃对象][垃圾对象][活跃对象]
To空间：空

步骤1：标记 From 空间的活跃对象
步骤2：复制活跃对象到 To 空间
To空间：[活跃对象][活跃对象]

步骤3：交换 From 和 To
From空间：[活跃对象][活跃对象]
To空间：空（准备下次回收）

对象晋升（Promotion）

满足以下条件之一，对象会晋升到老生代：

• 经历一次 Scavenge 还存活
• To 空间使用率超过 25%
• 对象太大（直接进入老生代）

function createObjects() {
    // 新生代分配
    let temp = { x: 1 }; // 新生代

    // 长期持有 → 晋升到老生代
    window.globalObj = { y: 2 }; // 会被晋升

    // 大对象直接进入老生代
    let largeArray = new Array(1000000); // 老生代
}

3. 老生代回收

特点：

• 空间大（约 1.4GB 64 位系统）
• 回收不频繁（对象存活时间长）
• 使用标记-清除/标记-整理算法

回收过程：

// 老生代回收触发条件：
// 1. 老生代空间不足
// 2. 新生代晋升失败
// 3. 手动触发

// 主要算法：
// 1. 增量标记（Incremental Marking）- 减少停顿
// 2. 标记-清除（Mark-Sweep）
// 3. 标记-整理（Mark-Compact）- 减少碎片

标记-整理（Mark-Compact）：

整理前： [活跃][垃圾][活跃][垃圾][活跃]
标记后： [活跃]     [活跃]     [活跃]
整理后： [活跃][活跃][活跃]

4. 增量标记与三色标记法

问题：全停顿（Stop-The-World）

// GC 期间，JS 执行暂停
function criticalTask() {
    // 如果此时触发 GC，用户会感到卡顿
    updateUI();
    processData();
    // GC 停顿可能几百毫秒
}

解决方案：增量标记（Incremental Marking）

将标记过程分成多个小步骤，与 JS 执行交替进行。

// 传统：标记阶段完全阻塞
// [标记全部对象] → [执行JS] → [清除]

// 增量：标记与执行交错
// [标记一部分] → [执行JS] → [标记一部分] → [执行JS] → [清除]

三色标记法（Tri-color Marking）

• 白色：未访问（待回收）
• 灰色：已访问，但子节点未访问
• 黑色：已访问，且子节点已访问

初始：所有对象为白色
步骤：从根开始，标记为灰色
循环：
  1. 从灰色集合取一个对象
  2. 将其引用对象标记为灰色
  3. 自身标记为黑色
结束：灰色集合为空，回收白色对象

内存泄漏的常见场景与检测

1. 意外全局变量

function leak1() {
    leaked = "I'm global!"; // 没有 var/let/const
    this.leaked2 = "Also global"; // 严格模式下安全
}

// 解决方法：
("use strict"); // 严格模式禁止意外全局变量

2. 被遗忘的定时器/回调

// 泄漏示例
let data = getHugeData();
setInterval(() => {
    let node = document.getElementById('node');
    if (node) {
        node.innerHTML = JSON.stringify(data);  // 持有 data 引用
    }
}, 1000);

// 清理
let timerId = setInterval(...);
clearInterval(timerId);  // 不再需要时清除

3. DOM 引用

// 泄漏：JS 引用 DOM，DOM 移除后引用仍在
const elements = {
    button: document.getElementById("myButton"),
    image: document.getElementById("myImage"),
};

// 移除 DOM 但 JS 仍引用
document.body.removeChild(document.getElementById("myButton"));
// elements.button 仍引用已移除的 DOM 节点

// 解决方案：置为 null
elements.button = null;

4. 闭包滥用

// 不必要的闭包保持引用
function outer() {
    let largeData = new Array(1000000).fill("*");

    return function inner() {
        // 即使不使用 largeData，闭包也持有引用
        return "Hello";
    };
}

// 优化：需要时才引用
function outer() {
    return function inner() {
        let largeData = new Array(1000000).fill("*");
        // 使用后释放
        return process(largeData);
    };
}

5. 事件监听器

// 泄漏：添加后未移除
class Component {
    constructor(element) {
        this.element = element;
        this.handleClick = this.handleClick.bind(this);
        element.addEventListener("click", this.handleClick);
    }

    handleClick() {
        /* ... */
    }

    // 忘记移除监听器
    // remove() {
    //     this.element.removeEventListener('click', this.handleClick);
    // }
}

6. 控制台输出

// 控制台日志保持对象引用
let bigData = fetchHugeData();
console.log(bigData); // 控制台保持引用，直到清空

// 生产环境应避免：
if (process.env.NODE_ENV !== "production") {
    console.log(bigData);
}

内存泄漏检测工具

1. Chrome DevTools

// 步骤：
// 1. 打开 Performance 面板
// 2. 录制操作，观察内存曲线
// 3. 使用 Memory 面板拍快照
// 4. 比较快照，查找未释放对象

2. 内存快照比较

// 操作前：拍快照1
// 执行可疑操作
// 操作后：拍快照2
// 比较：关注 #Delta（差异）

3. 性能监控

// 实时监控
setInterval(() => {
    const memory = performance.memory;
    console.log(`Used: ${memory.usedJSHeapSize}`);
    console.log(`Total: ${memory.totalJSHeapSize}`);
    console.log(`Limit: ${memory.jsHeapSizeLimit}`);
}, 5000);

优化建议与最佳实践

1. 及时释放引用

// 使用后置为 null
function processData(data) {
    const result = heavyCalculation(data);
    data = null; // 帮助 GC
    return result;
}

2. 使用弱引用（WeakMap/WeakSet）

// 强引用：阻止回收
const map = new Map();
let obj = { data: "large" };
map.set("key", obj); // 强引用
obj = null; // map 仍持有引用，obj 不会被回收

// 弱引用：不阻止回收
const weakMap = new WeakMap();
let obj2 = { data: "large" };
weakMap.set(obj2, "metadata"); // 弱引用
obj2 = null; // obj2 可被回收，weakMap 自动删除

3. 避免内存抖动

// 不好：频繁创建/销毁
function render() {
    for (let i = 0; i < 1000; i++) {
        let temp = new Array(1000); // 频繁分配
        // 使用 temp...
    }
}

// 好：复用对象
let pool = [];
function getFromPool() {
    return pool.pop() || new Array(1000);
}

function returnToPool(arr) {
    arr.length = 0; // 清空但不释放
    pool.push(arr);
}

4. 分块处理大数据

// 不好：一次性处理
function processAll(data) {
    // 处理 100万条数据 → 内存峰值高
}

// 好：分块处理
async function processInChunks(data, chunkSize = 1000) {
    for (let i = 0; i < data.length; i += chunkSize) {
        const chunk = data.slice(i, i + chunkSize);
        await processChunk(chunk);
        await new Promise(resolve => setTimeout(resolve, 0)); // 让 GC 有机会工作
    }
}

5. 使用对象池

class ObjectPool {
    constructor(createFn) {
        this.createFn = createFn;
        this.pool = [];
    }

    acquire() {
        return this.pool.pop() || this.createFn();
    }

    release(obj) {
        // 重置对象状态
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                delete obj[key];
            }
        }
        this.pool.push(obj);
    }
}

// 使用
const pool = new ObjectPool(() => ({}));
const obj1 = pool.acquire();
// 使用 obj1...
pool.release(obj1); // 放回池中

七、手动触发垃圾回收（谨慎使用）

// 非标准方法，主要用于调试
if (typeof gc === "function") {
    gc(); // V8 的 --expose-gc 标志
}

// 模拟垃圾回收触发
function triggerGC() {
    const max = 1000000;
    for (let i = 0; i < max; i++) {
        let obj = {};
        obj.self = obj; // 创建后立即丢弃
    }
}

Node.js 的特殊考虑

1. 调整内存限制

# 启动时设置
node --max-old-space-size=4096 app.js  # 4GB 老生代

2. 流式处理

// 不要一次性读取大文件
const fs = require("fs");
const readStream = fs.createReadStream("largefile.txt");
readStream.pipe(process); // 流式处理

3. 监控内存

const v8 = require("v8");
setInterval(() => {
    const heap = process.memoryUsage();
    const heapStats = v8.getHeapStatistics();

    console.log("Heap used:", heap.heapUsed);
    console.log("Heap total:", heap.heapTotal);
    console.log("External:", heap.external); // Buffer, Socket 等
}, 10000);

常见面试题

1. 引用计数 vs 标记清除

// 问题：为什么现代浏览器不用引用计数？
// 答案：无法处理循环引用

2. 闭包会导致内存泄漏吗？

// 问题：闭包一定会内存泄漏吗？
function createClosure() {
    let data = new Array(1000000);
    return function () {
        // 不使用 data，但闭包引用
        return "hello";
    };
}
// 答案：不一定会泄漏，但可能延长 data 的生命周期

3. WeakMap 的使用场景

// 问题：什么时候用 WeakMap？
// 答案：存储对象的元数据，不阻止对象被回收
const metadata = new WeakMap();
let obj = { id: 1 };
metadata.set(obj, { created: Date.now() });
obj = null; // metadata 中的条目自动删除

总结要点

• 算法演进：引用计数 → 标记清除 → 分代回收
• V8 策略：新生代（Scavenge） + 老生代（Mark-Sweep-Compact）
• 避免泄漏：及时清理引用、使用弱引用、注意闭包
• 性能优化：减少 GC 压力、避免内存抖动、对象池
• 监控工具：DevTools、内存快照、performance.memory