JavaScript常见的内存泄露问题 - JavaScript学习系列文章

多前端同学可能觉得这是浏览器或引擎该操心的事, 但理解内存管理能帮你写出更高效的代码, 还能避免各种内存泄漏的坑.一、常见的内存泄露场景1) 意外的全局变量:functionleaky() {leak 这是一个全局变量;// 本意是 let leak ...this.anotherLeak 这也是全局的;// 在非严格模式下this 指向 window}// 解决方法使用严格模式 use strict2) 被遗忘的定时器和回调:// 定时器泄漏let someData getHugeData();setInterval(() {let node document.getElementById(node);if(node) {node.innerHTML JSON.stringify(someData);}},1000);// 即使移除 DOM 节点定时器还在引用 someData 和 node// 事件监听泄漏functionsetup() {let btn document.getElementById(myButton);btn.addEventListener(click, onClick);}functiononClick() {console.log(clicked!);}// 如果 btn 被移除但没解绑事件相关内存无法释放3) 闭包的不当使用:functionouter() {let bigArray newArray(1000000).fill(*);returnfunctioninner() {console.log(inner);// 即使不用 bigArray它也会被保留因为闭包保留了整个作用域链};}let hold outer();// bigArray 无法被回收4) DOM引用未清理:let elements {button:document.getElementById(myButton),div:document.getElementById(myDiv)};functionremoveDiv() {document.body.removeChild(elements.div);// 虽然从 DOM 移除了但 elements.div 仍引用着这个节点}二、内存优化技巧1) 合理使用变量作用域:// 不好的做法functionprocess(data) {let result [];// 大数组处理...for(let i 0; i data.length; i) {result.push(data[i] *2);}// 后续只使用 result 的前10项return result.slice(0,10);// 但整个 result 数组会保留在内存中}// 更好的做法functionprocessBetter(data) {let result [];for(let i 0; i 10; i) {// 只处理需要的部分if(i data.length) {result.push(data[i] *2);}}return result;// 内存占用更小}2) 及时清理引用:// 定时器let timer setInterval(() {...},1000);// 不需要时clearInterval(timer);// 事件监听functioncleanUp() {btn.removeEventListener(click, onClick);}// WeakMap/WeakSet 允许对象被垃圾回收let weakMap newWeakMap();let obj {};weakMap.set(obj,some value);// 如果 obj 被回收weakMap 中的条目自动消失3) 分块处理大数据:// 处理大数组时不要一次性处理functionprocessLargeArray(array, chunkSize, callback) {let index 0;functionnext() {let chunk array.slice(index, index chunkSize);index chunkSize;if(chunk.length) {callback(chunk, next);}}next();}// 使用processLargeArray(hugeArray,1000,(chunk, next) {// 处理当前块processChunk(chunk);// 使用 setTimeout 或 requestIdleCallback 给浏览器喘息机会setTimeout(next,0);});4) 使用对象池: 频繁创建销毁对象? 试试对象池:classObjectPool {constructor(createFn) {this.createFn createFn;this.pool [];}get() {returnthis.pool.length ?this.pool.pop() :this.createFn();}release(obj) {// 重置对象状态(如果需要)this.pool.push(obj);}}// 使用let particlePool new ObjectPool(() ({x:0, y:0, vx:0, vy:0}));// 需要时let particle particlePool.get();// 使用完后particlePool.release(particle);