JavaScript 导致内存泄漏的场景和规避方法

        在日常开发中，我们经常会无意识一些操作导致内存溢出。为此我总结一下内存溢出的几种场景供大家参考。希望能在优化自己代码的道路上有所帮助。

1、意外的全局变量

由于使用未声明的变量，而意外的创建了一个全局变量，使这个变量一直留在内存中无法被回收。

【在函数内未使用var, let, 或 const声明的变量会被自动创建为全局变量】

function add() { quanju= "这个是全局变量"; }

规避方法：首先写代码时注意尽量避免使用全局变量，如果实在避免不了，在使用完后将其删除（delete quanju）或赋值为 null

2、被遗忘的计时器或回调函数

如果设置了定时器（setInterval 或 setTimeout）或者异步回调函数（如XMLHttpRequest的回调），但是没有正确清除（clearInterval 或 clearTimeout），那么这些回调会保留着对它们所在的执行环境的引用，导致泄漏。

规避方法：及时清理不需要的定时器和异步回调。

3、脱离 DOM 的引用

给DOM对象添加的属性是一个对象的引用

var a = {};
document.getElementById('id').diyProp = a;

 规避方法：在window.onload时间中加上 document.getElementById(‘id’).diyProp = null

获取一个 DOM 元素的引用， 而后面这个元素被删除， 由于一直保留了对这个元素的引用， 所以它也无法被回收。

var tag = document.getElementById('id');
document.body.removeChild(tag);

 规避方法：tag=null【将tag变量赋值成null】

4、闭包造成内存泄漏

不合理的使用闭包， 从而导致某些变量一直被留在内存当中。

// 错误的示例：使用闭包保留外部作用域的引用
function createClosure() {
  const data = '敏感数据';
 
  return function() {
    console.log(data);
  };
}
const closure = createClosure();
 
// closure保留了对data的引用，即使不再需要data

运行后结果： 外部信息、 内部信息

规避方法：在不再需要闭包时，确保解除对外部作用域的引用。

function createClosure() {
  const data = '敏感数据';
 
  return function() {
    console.log(data);
  };
}
let closure = createClosure();
 
// 在不再需要闭包时，解除引用
closure = null;

5、console.log 没有注释掉造成泄漏 

规避方法：在代码编写完成测试无误后，清除console.log

6、循环引用

循环引用是另一个可能导致内存泄漏的情况。当两个或多个对象相互引用时，即使你不再使用它们，它们也无法被垃圾回收。

// 错误的示例：循环引用
function createObjects() {
  const obj1 = {};
  const obj2 = {};
 
  obj1.ref = obj2;
  obj2.ref = obj1;
 
  return 'Objects created';
}
createObjects();

 规避方法：尽量避免循环引用，如果有需要确保在不再需要对象时，将其引用设置为null，打破循环引用。

function createObjects() {
  const obj1 = {};
  const obj2 = {};
 
  obj1.ref = obj2;
  obj2.ref = obj1;
 
  // 手动打破循环引用
  obj1.ref = null;
  obj2.ref = null;
 
  return 'Objects created';
}

此文章借鉴了下面博主的优秀文章

文章链接