红宝书第二十八讲:内存泄漏分析与优化策略通俗指南
资料取自《JavaScript高级程序设计(第5版)》。
查看总目录:红宝书学习大纲
一、内存泄漏的常见场景
当程序 错误持有不再需要的对象引用,导致内存无法释放 1。以下典型场景:
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
步骤:
- 打开Chrome DevTools → Memory标签
- 点击"Take heap snapshot"生成初始快照
- 执行可疑操作后进行第二次快照
- 对比两次快照(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
脚注
该回答部分内容基于通用技术知识补充
- 《JavaScript高级程序设计(第5版)》指出静态分配与对象池能减少内存碎片 ↩
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。