前端常见内存泄漏及解决方案

前端常见内存泄漏问题有：

1.闭包

function closure() {
  let counter = 0;
  return function increment() {
    counter++;
    console.log(counter);
  }
}

const incrementFn = closure(); //返回一个函数
incrementFn(); //1
incrementFn(); //2

这个例子中，每次调用closure函数都会创建一个新的increment函数，并且这个increment函数会保留了对closure函数中的counter变量的引用，导致counter变量不会被垃圾回收，从而可能导致内存泄漏。可以使用delete关键字或将其值改为null来解除引用。

2.定时器

function startTimer() {
  let counter = 0;
  setInterval(function() {
    counter++;
    console.log(counter);
  }, 1000);
}

startTimer();

这个例子中，每次调用setInterval函数都会创建一个新的定时器，如果定时器未被清除，将导致函数引用的对象不会被垃圾回收，从而可能导致内存泄漏。可以使用clearInterval函数清除定时器。

3.DOM事件绑定

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

如果这个例子中，元素被从DOM中移除后，事件处理程序仍然保留了对元素的引用，这可能导致内存泄漏。可以使用removeEventListener函数来移除事件监听器。

4.循环引用

let obj1 = {};
let obj2 = {};
obj1.ref = obj2;
obj2.ref = obj1;

这个例子中，obj1和obj2互相引用，如果不手动解除引用，这将导致对象不会被垃圾回收。可以手动将其中一个对象的引用设置为null来解除引用。

解决方案：

1. 使用let和const定义变量，避免使用全局变量，同时也可以使用strict模式避免变量泄漏。

2. 显式清除定时器和事件监听器。

3. 避免创建不必要的对象，使用对象池等技术来优化性能。

4. 避免循环引用，手动解除引用。

function closure() {
  let counter = 0;
  return function increment() {
    counter++;
    console.log(counter);
  }
}

const incrementFn = closure();
incrementFn(); //1
incrementFn(); //2

//手动解除闭包引用
incrementFn = null;

let intervalId = setInterval(function() {
  console.log('Interval tick');
}, 1000);

//显式清除定时器
clearInterval(intervalId);
intervalId = null;

let button = document.getElementById('myButton');
button.addEventListener('click', function clickHandler() {
  console.log('Button clicked!');
});

//显式移除事件监听器
button.removeEventListener('click', clickHandler);
button = null;

let obj1 = {};
let obj2 = {};
obj1.ref = obj2;
obj2.ref = obj1;

//手动解除循环引用
obj1.ref = null;
obj2.ref = null;
obj1 = null;
obj2 = null;