内存管理

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

// ❌ 定时器泄漏
function startPolling() {
    setInterval(() => {
        const data = fetchData();
        updateUI(data);
    }, 1000);
}

// 组件卸载时忘记清除
// startPolling(); // 会一直运行

// ✅ 正确的定时器管理
class PollingService {
    constructor() {
        this.timerId = null;
        this.dataCache = new Map();
    }

    start(interval = 1000) {
        this.stop(); // 先停止现有的
        this.timerId = setInterval(() => {
            this.poll();
        }, interval);
    }

    async poll() {
        try {
            const data = await fetch("/api/data");
            this.dataCache.set(Date.now(), data);
            this.cleanupOldCache();
        } catch (error) {
            console.error("Polling failed:", error);
        }
    }

    cleanupOldCache() {
        const cutoff = Date.now() - 5 * 60 * 1000; // 5分钟前的数据
        for (const [timestamp] of this.dataCache) {
            if (timestamp < cutoff) {
                this.dataCache.delete(timestamp);
            }
        }
    }

    stop() {
        if (this.timerId) {
            clearInterval(this.timerId);
            this.timerId = null;
        }
    }

    destroy() {
        this.stop();
        this.dataCache.clear();
    }
}

3. DOM 引用泄漏

// ❌ DOM 引用未清理
class LeakyComponent {
    constructor() {
        this.cache = new Map();
    }

    render() {
        // 存储 DOM 引用
        const elements = document.querySelectorAll(".item");
        elements.forEach(el => {
            this.cache.set(el.id, {
                element: el,
                data: el.dataset,
            });
        });
    }

    // 忘记在组件销毁时清理
}

// ✅ 正确的 DOM 管理
class SafeComponent {
    constructor() {
        this.elements = new WeakMap(); // 使用 WeakMap
        this.eventListeners = new Map();
    }

    setupEventListeners() {
        const button = document.getElementById("myButton");

        const handler = () => this.handleClick();
        button.addEventListener("click", handler);

        // 存储以便清理
        this.eventListeners.set(button, {
            type: "click",
            handler,
        });
    }

    cleanup() {
        // 清理事件监听器
        for (const [element, { type, handler }] of this.eventListeners) {
            element.removeEventListener(type, handler);
        }
        this.eventListeners.clear();

        // WeakMap 会自动清理
    }
}

4. 闭包泄漏

// ❌ 不必要的闭包引用
function createHeavyClosure() {
    const largeData = new Array(1000000).fill("data");

    return function () {
        console.log("Closure created");
        // 即使不需要，largeData 也无法被回收
    };
}

// ✅ 优化闭包内存使用
function createOptimizedClosure() {
    const largeData = new Array(1000000).fill("data");

    // 只保留需要的数据
    const processedData = processData(largeData);

    // 帮助垃圾回收
    // largeData = null; // 解除对大数组的引用

    return function () {
        console.log("Processed:", processedData.length);
    };

    function processData(data) {
        // 处理数据，返回需要的结果
        return data.map(item => item.length);
    }
}

5. 缓存未清理

// ❌ 无限增长的缓存
class LeakyCache {
    constructor() {
        this.cache = new Map();
    }

    get(key) {
        if (!this.cache.has(key)) {
            const value = this.computeExpensiveValue(key);
            this.cache.set(key, value);
        }
        return this.cache.get(key);
    }

    computeExpensiveValue(key) {
        // 模拟耗时计算
        return key.split("").reverse().join("");
    }
}

// ✅ 有限缓存策略
class LRUCache {
    constructor(maxSize = 100) {
        this.maxSize = maxSize;
        this.cache = new Map();
        this.accessOrder = [];
    }

    get(key) {
        if (!this.cache.has(key)) {
            const value = this.computeValue(key);
            this.set(key, value);
            return value;
        }

        // 更新访问顺序
        this.updateAccessOrder(key);
        return this.cache.get(key);
    }

    set(key, value) {
        if (this.cache.size >= this.maxSize) {
            // 移除最近最少使用的项
            const lruKey = this.accessOrder.shift();
            this.cache.delete(lruKey);
        }

        this.cache.set(key, value);
        this.updateAccessOrder(key);
    }

    updateAccessOrder(key) {
        // 移除旧的记录
        const index = this.accessOrder.indexOf(key);
        if (index > -1) {
            this.accessOrder.splice(index, 1);
        }
        // 添加到末尾
        this.accessOrder.push(key);
    }

    cleanup(shouldCleanup) {
        for (const [key, value] of this.cache) {
            if (shouldCleanup(value)) {
                this.cache.delete(key);
                const index = this.accessOrder.indexOf(key);
                if (index > -1) {
                    this.accessOrder.splice(index, 1);
                }
            }
        }
    }
}

内存分析工具

1. Chrome DevTools Memory 面板

// 创建测试场景
function createMemoryTestScenario() {
    const leaks = [];

    // 1. 创建大量对象
    function createObjects() {
        for (let i = 0; i < 10000; i++) {
            leaks.push({
                id: i,
                data: new Array(1000).fill("x").join(""),
                timestamp: Date.now(),
            });
        }
        console.log(`Created ${leaks.length} objects`);
    }

    // 2. 创建 DOM 节点
    function createDOMNodes() {
        const container = document.getElementById("container");
        for (let i = 0; i < 1000; i++) {
            const div = document.createElement("div");
            div.className = "leaky-node";
            div.textContent = `Node ${i}`;
            container.appendChild(div);
        }
    }

    // 3. 创建闭包
    function createClosures() {
        const closures = [];
        for (let i = 0; i < 1000; i++) {
            const data = new Array(100).fill(i);
            closures.push(function () {
                // 引用外部数据
                return data.length;
            });
        }
        return closures;
    }

    return {
        createObjects,
        createDOMNodes,
        createClosures,
        clear: () => {
            leaks.length = 0;
            const container = document.getElementById("container");
            container.innerHTML = "";
        },
    };
}

// 在控制台使用：
// const test = createMemoryTestScenario();
// test.createObjects();
// test.createDOMNodes();
// 然后在 Memory 面板拍摄堆快照

2. Node.js 内存分析

// 使用 --inspect 标志启动 Node.js
// node --inspect app.js

// 内存监控
const monitorMemory = () => {
    const used = process.memoryUsage();

    console.log("内存使用情况:");
    console.log(`RSS:      ${Math.round(used.rss / 1024 / 1024)} MB`);
    console.log(`HeapTotal: ${Math.round(used.heapTotal / 1024 / 1024)} MB`);
    console.log(`HeapUsed:  ${Math.round(used.heapUsed / 1024 / 1024)} MB`);
    console.log(`External:  ${Math.round(used.external / 1024 / 1024)} MB`);

    // 检查内存泄漏
    if (used.heapUsed > 500 * 1024 * 1024) {
        // 超过 500MB
        console.warn("警告：堆内存使用过高！");
    }
};

// 定期检查
setInterval(monitorMemory, 30000);

// 使用 heapdump 模块
const heapdump = require("heapdump");

function takeHeapSnapshot() {
    const snapshotPath = `/tmp/heapdump-${Date.now()}.heapsnapshot`;
    heapdump.writeSnapshot(snapshotPath, (err, filename) => {
        if (err) console.error(err);
        else console.log(`堆快照已保存: ${filename}`);
    });
}

// 在内存增长时触发快照
let lastHeapUsed = 0;
setInterval(() => {
    const currentHeapUsed = process.memoryUsage().heapUsed;
    const growth = currentHeapUsed - lastHeapUsed;

    if (growth > 10 * 1024 * 1024) {
        // 增长超过 10MB
        console.log(`检测到内存增长: ${Math.round(growth / 1024 / 1024)} MB`);
        takeHeapSnapshot();
    }

    lastHeapUsed = currentHeapUsed;
}, 10000);

3. Performance API 监控

// 监控内存性能
class MemoryMonitor {
    constructor() {
        this.samples = [];
        this.maxSamples = 100;
        this.isSupported = "memory" in performance;
    }

    start() {
        if (!this.isSupported) return;

        this.intervalId = setInterval(() => {
            this.recordSample();
        }, 1000);
    }

    recordSample() {
        const memory = performance.memory;
        const sample = {
            timestamp: Date.now(),
            usedJSHeapSize: memory.usedJSHeapSize,
            totalJSHeapSize: memory.totalJSHeapSize,
            jsHeapSizeLimit: memory.jsHeapSizeLimit,
        };

        this.samples.push(sample);

        // 保持样本数量
        if (this.samples.length > this.maxSamples) {
            this.samples.shift();
        }

        // 检查内存泄漏
        this.checkForLeaks();
    }

    checkForLeaks() {
        if (this.samples.length < 10) return;

        const oldest = this.samples[0].usedJSHeapSize;
        const newest = this.samples[this.samples.length - 1].usedJSHeapSize;
        const growth = newest - oldest;

        if (growth > 10 * 1024 * 1024) {
            // 增长超过 10MB
            console.warn(`潜在内存泄漏：增长 ${Math.round(growth / 1024 / 1024)} MB`);
        }
    }

    getStats() {
        if (this.samples.length === 0) return null;

        const latest = this.samples[this.samples.length - 1];
        const min = Math.min(...this.samples.map(s => s.usedJSHeapSize));
        const max = Math.max(...this.samples.map(s => s.usedJSHeapSize));
        const avg =
            this.samples.reduce((sum, s) => sum + s.usedJSHeapSize, 0) / this.samples.length;

        return {
            current: Math.round(latest.usedJSHeapSize / 1024 / 1024),
            min: Math.round(min / 1024 / 1024),
            max: Math.round(max / 1024 / 1024),
            avg: Math.round(avg / 1024 / 1024),
            limit: Math.round(latest.jsHeapSizeLimit / 1024 / 1024),
        };
    }

    stop() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = null;
        }
    }
}

// 使用示例
const monitor = new MemoryMonitor();
monitor.start();

// 稍后获取统计信息
setTimeout(() => {
    console.log("内存统计:", monitor.getStats());
    monitor.stop();
}, 30000);

内存优化技巧

1. 对象池模式

// 对象池：复用对象，减少垃圾回收
class ObjectPool {
    constructor(createFn, resetFn, maxSize = 100) {
        this.createFn = createFn;
        this.resetFn = resetFn;
        this.maxSize = maxSize;
        this.pool = [];
        this.activeCount = 0;
    }

    acquire() {
        let obj;

        if (this.pool.length > 0) {
            obj = this.pool.pop();
        } else {
            obj = this.createFn();
        }

        this.activeCount++;
        return obj;
    }

    release(obj) {
        if (this.pool.length < this.maxSize) {
            this.resetFn(obj);
            this.pool.push(obj);
        }
        // 否则让对象被垃圾回收
        this.activeCount--;
    }

    clear() {
        this.pool.length = 0;
        this.activeCount = 0;
    }

    getStats() {
        return {
            poolSize: this.pool.length,
            activeCount: this.activeCount,
            total: this.pool.length + this.activeCount,
        };
    }
}

// 使用示例：粒子系统
class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = 0;
        this.vy = 0;
        this.life = 1.0;
        this.color = "#ffffff";
    }

    reset() {
        this.life = 1.0;
    }
}

class ParticleSystem {
    constructor() {
        this.pool = new ObjectPool(
            () => new Particle(0, 0),
            particle => particle.reset(),
            1000
        );

        this.particles = new Set();
    }

    emit(x, y, count) {
        for (let i = 0; i < count; i++) {
            const particle = this.pool.acquire();
            particle.x = x + Math.random() * 10 - 5;
            particle.y = y + Math.random() * 10 - 5;
            particle.vx = Math.random() * 2 - 1;
            particle.vy = Math.random() * 2 - 1;
            this.particles.add(particle);
        }
    }

    update(deltaTime) {
        for (const particle of this.particles) {
            particle.x += particle.vx * deltaTime;
            particle.y += particle.vy * deltaTime;
            particle.life -= 0.01 * deltaTime;

            if (particle.life <= 0) {
                this.particles.delete(particle);
                this.pool.release(particle);
            }
        }
    }

    getStats() {
        return this.pool.getStats();
    }
}

2. 使用 TypedArray 处理大数据

// 对于数值数据，使用 TypedArray 更高效
class EfficientBuffer {
    constructor(size) {
        // Float64Array 每个元素占8字节
        this.buffer = new Float64Array(size);
        this.length = 0;
    }

    add(value) {
        if (this.length >= this.buffer.length) {
            this.resize(this.buffer.length * 2);
        }
        this.buffer[this.length++] = value;
    }

    resize(newSize) {
        const newBuffer = new Float64Array(newSize);
        newBuffer.set(this.buffer.subarray(0, this.length));
        this.buffer = newBuffer;
    }

    // 批量操作
    addRange(values) {
        if (this.length + values.length > this.buffer.length) {
            this.resize(Math.max(this.buffer.length * 2, this.length + values.length));
        }
        this.buffer.set(values, this.length);
        this.length += values.length;
    }

    clear() {
        this.length = 0;
        // 不需要重置数组，重用即可
    }

    // 内存使用统计
    getMemoryUsage() {
        return this.buffer.byteLength;
    }
}

// 对比普通数组
const testArrayVsTypedArray = () => {
    const size = 1000000;

    console.time("普通数组");
    const arr = [];
    for (let i = 0; i < size; i++) {
        arr.push(Math.random());
    }
    console.timeEnd("普通数组");

    console.time("TypedArray");
    const typedArr = new Float64Array(size);
    for (let i = 0; i < size; i++) {
        typedArr[i] = Math.random();
    }
    console.timeEnd("TypedArray");

    // 内存对比
    console.log("普通数组内存（估算）:", size * 8, "字节");
    console.log("TypedArray 内存:", typedArr.byteLength, "字节");
};

3. 结构化克隆与传输

// 使用 Transferable 对象优化内存
async function processLargeDataWithTransfer() {
    // 创建大型数组
    const size = 10000000; // 1000万元素
    const data = new Float64Array(size);

    for (let i = 0; i < size; i++) {
        data[i] = Math.random();
    }

    // 在 Web Worker 中处理
    const worker = new Worker("data-processor.js");

    return new Promise(resolve => {
        worker.onmessage = event => {
            const result = event.data;
            console.log("处理完成，结果大小:", result.length);
            resolve(result);
            worker.terminate();
        };

        // 传输数据，而不是复制
        worker.postMessage({ data }, [data.buffer]);
        // data.buffer 现在变为不可用
        console.log("主线程数据已传输");
    });
}

// data-processor.js
self.onmessage = event => {
    const { data } = event.data;
    console.log("Worker 接收到数据大小:", data.length);

    // 处理数据
    const result = new Float64Array(data.length);
    for (let i = 0; i < data.length; i++) {
        result[i] = data[i] * 2;
    }

    // 返回结果
    self.postMessage({ result }, [result.buffer]);
};

4. WeakRef 和 FinalizationRegistry

// ES2021: WeakRef 和 FinalizationRegistry
class CacheWithWeakRef {
    constructor() {
        this.cache = new Map();
        this.registry = new FinalizationRegistry(key => {
            console.log(`对象 ${key} 已被垃圾回收`);
            this.cache.delete(key);
        });
    }

    set(key, value) {
        const weakRef = new WeakRef(value);
        this.cache.set(key, weakRef);

        // 注册终结器
        this.registry.register(value, key, weakRef);

        return weakRef;
    }

    get(key) {
        const weakRef = this.cache.get(key);
        if (weakRef) {
            const value = weakRef.deref();
            if (value) {
                return value;
            } else {
                this.cache.delete(key);
            }
        }
        return null;
    }

    // 手动清理
    cleanup() {
        for (const [key, weakRef] of this.cache) {
            if (!weakRef.deref()) {
                this.cache.delete(key);
            }
        }
    }
}

// 使用示例
const cache = new CacheWithWeakRef();

// 添加大对象
const largeObject = {
    data: new Array(1000000).fill("x"),
    timestamp: Date.now(),
};

cache.set("largeData", largeObject);

// 模拟垃圾回收
setTimeout(() => {
    // 解除引用
    largeObject = null;

    // 强制垃圾回收（如果可用）
    if (global.gc) {
        global.gc();
    }

    // 稍后尝试获取
    setTimeout(() => {
        const retrieved = cache.get("largeData");
        console.log("检索结果:", retrieved); // 可能为 null
    }, 1000);
}, 1000);

最佳实践总结

1. 编码习惯

// 1. 及时解除引用
function processData(data) {
    const result = transform(data);

    // 处理完成后解除对原始数据的引用
    data = null;

    return result;
}

// 2. 避免内存泄漏模式
class SafeComponent {
    constructor() {
        this.handlers = new Map();
        this.timers = new Set();
        this.subscriptions = new Set();
    }

    addEventListener(element, event, handler) {
        element.addEventListener(event, handler);
        this.handlers.set({ element, event }, handler);
    }

    addInterval(callback, delay) {
        const id = setInterval(callback, delay);
        this.timers.add(id);
        return id;
    }

    subscribe(observable, callback) {
        const subscription = observable.subscribe(callback);
        this.subscriptions.add(subscription);
        return subscription;
    }

    destroy() {
        // 清理事件监听器
        for (const [{ element, event }, handler] of this.handlers) {
            element.removeEventListener(event, handler);
        }
        this.handlers.clear();

        // 清理定时器
        for (const id of this.timers) {
            clearInterval(id);
        }
        this.timers.clear();

        // 清理订阅
        for (const subscription of this.subscriptions) {
            subscription.unsubscribe();
        }
        this.subscriptions.clear();
    }
}

2. 监控策略

// 内存监控中间件
function createMemoryAwareMiddleware() {
    let memoryWarnings = 0;
    let lastWarningTime = 0;

    return function memoryMiddleware(req, res, next) {
        const memory = process.memoryUsage();
        const heapUsedMB = memory.heapUsed / 1024 / 1024;

        // 警告阈值
        if (heapUsedMB > 500) {
            const now = Date.now();

            // 避免频繁警告
            if (now - lastWarningTime > 60000) {
                console.warn(`高内存使用: ${Math.round(heapUsedMB)} MB`);
                memoryWarnings++;
                lastWarningTime = now;

                // 记录到监控系统
                if (memoryWarnings > 5) {
                    console.error("内存使用持续过高，考虑重启服务");
                }
            }
        }

        // 响应头中添加内存信息
        res.setHeader("X-Memory-Usage", Math.round(heapUsedMB));

        next();
    };
}

// Express 使用
const express = require("express");
const app = express();
app.use(createMemoryAwareMiddleware());

3. 性能与内存的平衡

// 内存与性能的权衡
class MemoryPerformanceTradeoff {
    constructor() {
        this.cache = new Map();
        this.cacheHits = 0;
        this.cacheMisses = 0;
        this.maxCacheSize = 1000;
    }

    // 使用缓存提高性能，但要控制内存
    computeWithCache(key, computeFunction) {
        if (this.cache.has(key)) {
            this.cacheHits++;
            return this.cache.get(key);
        }

        this.cacheMisses++;
        const result = computeFunction();

        // 控制缓存大小
        if (this.cache.size >= this.maxCacheSize) {
            // 简单的 LRU 策略
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }

        this.cache.set(key, result);
        return result;
    }

    // 根据命中率调整缓存策略
    adjustStrategy() {
        const hitRate = this.cacheHits / (this.cacheHits + this.cacheMisses);

        if (hitRate > 0.8) {
            // 命中率高，增加缓存大小
            this.maxCacheSize = Math.min(this.maxCacheSize * 2, 10000);
        } else if (hitRate < 0.3) {
            // 命中率低，减少缓存大小
            this.maxCacheSize = Math.max(Math.floor(this.maxCacheSize / 2), 100);
        }

        // 重置统计
        this.cacheHits = 0;
        this.cacheMisses = 0;
    }

    getStats() {
        return {
            cacheSize: this.cache.size,
            maxCacheSize: this.maxCacheSize,
            hitRate: this.cacheHits / (this.cacheHits + this.cacheMisses) || 0,
            estimatedMemory: this.cache.size * 100, // 估算值
        };
    }
}

4. 自动化内存测试

// 内存泄漏自动化测试
class MemoryLeakTest {
    constructor() {
        this.baselineMemory = null;
        this.testIterations = 100;
        this.allowedGrowth = 10 * 1024 * 1024; // 允许增长10MB
    }

    async test(operation, cleanup) {
        console.log("开始内存泄漏测试...");

        // 记录基线内存
        this.baselineMemory = this.getMemoryUsage();
        console.log("基线内存:", this.formatMemory(this.baselineMemory));

        // 执行操作多次
        for (let i = 0; i < this.testIterations; i++) {
            await operation(i);

            // 每次迭代后强制垃圾回收（如果可用）
            if (global.gc) {
                global.gc();
            }

            // 定期报告
            if (i % 10 === 0) {
                const current = this.getMemoryUsage();
                console.log(`迭代 ${i}: ${this.formatMemory(current)}`);
            }
        }

        // 执行清理
        if (cleanup) {
            await cleanup();
        }

        // 最终内存检查
        const finalMemory = this.getMemoryUsage();
        const growth = finalMemory.heapUsed - this.baselineMemory.heapUsed;

        console.log("测试完成");
        console.log("最终内存:", this.formatMemory(finalMemory));
        console.log("内存增长:", this.formatMemory({ heapUsed: growth }));

        if (growth > this.allowedGrowth) {
            console.error("⚠️  检测到潜在内存泄漏！");
            return false;
        } else {
            console.log("✅ 内存使用正常");
            return true;
        }
    }

    getMemoryUsage() {
        if (typeof performance !== "undefined" && performance.memory) {
            return performance.memory;
        } else if (process && process.memoryUsage) {
            return process.memoryUsage();
        }
        return { heapUsed: 0, heapTotal: 0 };
    }

    formatMemory(memory) {
        return {
            heapUsed: `${Math.round(memory.heapUsed / 1024 / 1024)} MB`,
            heapTotal: `${Math.round(memory.heapTotal / 1024 / 1024)} MB`,
        };
    }
}

// 使用示例
const testSuite = new MemoryLeakTest();

// 测试某个函数
await testSuite.test(
    async iteration => {
        // 执行可能泄漏内存的操作
        const data = new Array(1000).fill("test");
        global.temp = data; // 模拟泄漏
        // global.temp = null; // 修复泄漏
    },
    async () => {
        // 清理操作
        global.temp = null;
    }
);

关键要点总结：

• 理解内存生命周期：分配 → 使用 → 释放
• 掌握垃圾回收机制：标记-清除、分代回收
• 识别常见内存泄漏：全局变量、定时器、DOM 引用、闭包
• 使用合适的工具：Chrome DevTools、Node.js 分析工具
• 实施优化策略：对象池、TypedArray、传输对象
• 建立监控体系：实时监控、预警、自动化测试
• 平衡性能与内存：缓存策略、懒加载、资源回收