红宝书第二十八讲：内存泄漏分析与优化策略通俗指南

---

红宝书第二十八讲：内存泄漏分析与优化策略通俗指南

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、内存泄漏的常见场景

当程序 错误持有不再需要的对象引用，导致内存无法释放 ¹。以下典型场景：

1. 意外全局变量

function leak() {
    tempData = new Array(1000); // 忘记用let/var → 变成全局变量 
    // 即使函数结束也不会释放
}

2. 遗忘的定时器

const timer = setInterval(() => {
    const data = loadData(); //重复执行但不清理timer → data无法回收
}, 1000);
// 应在不需要时 clearInterval(timer)

3. 闭包不当使用

function createClosure() {
    const bigData = new Array(1e6); // 大数组
    return () => console.log(bigData); // 闭包长期持有引用
}
const closure = createClosure(); //即使不再调用, bigData依然存在

---

二、分析工具：Chrome DevTools

步骤：

1. 打开Chrome DevTools → Memory标签
2. 点击"Take heap snapshot"生成初始快照
3. 执行可疑操作后进行第二次快照
4. 对比两次快照(Delta列)查新增未释放对象

---

三、优化策略（根据资料2）

1. 静态分配（避免动态内存）

// ❌ 动态创建对象
function process() {
    const buffer = new Uint8Array(1024); //每次调用都新建
    // ...
}

// ✅ 预先分配复用
const staticBuffer = new Uint8Array(1024);
function optimizedProcess() {
    // 复用staticBuffer
}

2. 对象池技术（提高复用率）

class ObjectPool {
    constructor() {
        this.pool = [];
    }
    
    get() {
        return this.pool.pop() || new ExpensiveObject(); 
    }
    
    release(obj) {
        this.pool.push(obj); //回收对象供复用
    }
}

---

四、高级泄漏场景

DOM元素泄漏示例：

<div id="parent">
    <div id="child"></div>
</div>
<script>
    const parent = document.getElementById('parent');
    const child = document.getElementById('child');
    parent.removeChild(child); //DOM节点移除后仍被引用
    // 需释child引用 → child = null;
</script>

---

目录：总目录
上篇文章：红宝书第二十七讲：详解WebAssembly与asm.js如何实现高效执行
下篇文章：红宝书第二十九讲：详解编辑器和IDE：VS Code与WebStorm

脚注

---

1. 《JavaScript高级程序设计（第5版）》指出静态分配与对象池能减少内存碎片 ↩︎