JavaScript 内存泄漏原因分析及解决方案

JavaScript 内存泄漏指不再需要的内存未被释放，致使浏览器或 Node.js 进程内存持续膨胀，最终引发程序崩溃或系统卡顿。

JS 内存泄漏多由长期存在的变量、对象、闭包及事件监听器引起，这些持久引用阻碍垃圾回收器释放内存。

内存泄漏常见于以下场景：

1.循环引用

多个对象间存在相互引用且无其他外部引用时，即形成循环引用，进而引发内存泄漏。可通过断开对象间引用来规避。

function createObject() {
  var obj1 = {};
  var obj2 = {};
  obj1.ref = obj2;
  obj2.ref = obj1;
  return obj1;
}
var myObj = createObject();
// 这里无法回收 myObj 和 myObj.ref 所占用的内存空间，导致内存泄漏

2.定时器未清除

使用 setInterval() 或 setTimeout() 时，务必在不再需要时及时清除相关定时器。

var count = 0;
function incrementCount() {
  count++;
  console.log(count);
  setTimeout(incrementCount, 1000);
}
incrementCount();
// 这里没有清除计时器，导致计时器持续运行，占用内存空间，导致内存泄漏

3.DOM元素未正确删除

操作 DOM 元素时，需确保在不再需要时将其正确移除。

var element = document.getElementById("myElement");
element.addEventListener("click", function() {
  // do something
});
// 这里没有正确删除DOM元素，导致元素无法被垃圾回收器清理，从而导致内存泄漏

4.全局变量未清除

JS 中定义的全局变量会驻留内存直至页面关闭。若无需使用，请确保在使用后将其删除或赋值为 null。

var globalVariable = "some data";
// 这里定义了全局变量，如果不再需要使用它，请将其删除或赋值为 null

5.闭包未正确使用

闭包允许函数访问定义时的作用域，但若使用不当亦会导致内存泄漏。使用时应仅保留必要引用，并在不需要时移除。

function createFunction() {
  var data = "some data";
  return function() {
    console.log(data);
  };
}
var myFunc = createFunction();
// 这里保留了函数的引用，导致闭包内的 data 变量无法被垃圾回收器清理，从而导致内存泄漏

6.事件未正确解绑

若注册了事件监听器却未正确解绑，将导致内存泄漏。例如 DOM 元素被删除后仍保留对监听器的引用，未解绑则无法被垃圾回收。

var element = document.getElementById("myElement");
element.addEventListener("click", handleClick);
function handleClick() {
  // do something
}
// 这里没有正确解绑事件监听器，导致元素无法被垃圾回收器清理，从而导致内存泄漏

7.大量数据未及时清理

处理大量数据时，若不及时清理无用数据，便会引发内存泄漏。

var data = [];
for (var i = 0; i < 10000; i++) {
  data.push(i);
}

8.使用了第三方库或框架

使用第三方库或框架时，需确保其无内存泄漏问题。若所用库存在泄漏，将导致整个应用出现内存泄漏。

// 使用第三方库或框架时，需要确保它们没有内存泄漏问题
// 例如，在 React 应用中，如果没有正确使用 componentWillUnmount()，就可能导致组件无法被垃圾回收器清理，从而导致内存泄漏
class MyComponent extends React.Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      // do something
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
    return <div>My Component</div>;
  }
}

综上，JavaScript 内存泄漏成因多样，需仔细审查代码并实施正确的内存管理以杜绝泄漏。

本文介绍了 JavaScript 中几种常见的内存泄漏情况。如需了解更多 JS 内存相关内容，请搜索本站往期文章或继续浏览后续文章，感谢支持！

JavaScript 内存泄漏常见场景与排查指南