js内存泄漏|极客笔记

js内存泄漏

JavaScript 是一种非常流行的脚本语言，用于在网页上实现动态交互和数据处理。然而，在使用JavaScript开发应用程序时，经常会遇到内存泄漏的问题。内存泄漏是指程序中的某些对象或变量占用了内存，但不再使用时没有被正确释放，导致内存不断增加，最终导致程序崩溃或性能下降。

本文将详细解释 JavaScript 内存泄漏的原因、常见的内存泄漏案例和如何避免内存泄漏。

内存泄漏的原因

JavaScript 内存泄漏的原因主要有以下几种：

循环引用: 当两个对象相互引用，并且在某个时刻不再需要时，由于彼此之间有引用关系，导致垃圾回收器无法正确释放内存。
全局变量未被正确释放: 声明的全局变量会一直保存在内存中，如果忘记在不再使用时将其释放，就会造成内存泄漏。
定时器未清理: 使用 setTimeout 或 setInterval 设置定时器时，需要手动清除定时器，否则会一直存在于内存中。
闭包未正确管理: 闭包中的变量会一直保存在内存中，如果没有及时释放，就会引发内存泄漏。

常见的内存泄漏案例

1. 循环引用

let obj1 = {};
let obj2 = {};

obj1.child = obj2;
obj2.parent = obj1;

// 此时 obj1 和 obj2 彼此之间有循环引用
// 在不再需要 obj1 和 obj2 时，由于它们相互引用，导致垃圾回收器无法正确释放内存

2. 全局变量未被正确释放

let globalVar = 'I am a global variable';

function foo() {
  // 全局变量未被释放
  console.log(globalVar);
}

3. 定时器未清理

let timer = setInterval(() => {
  console.log('Hello, World!');
}, 1000);

// 忘记清除定时器
// clearInterval(timer);

4. 闭包未正确管理

function outerFunction() {
  let bigArray = new Array(1000).fill('big data');

  // 闭包未正确释放
  return function innerFunction() {
    console.log(bigArray);
  }
}

let innerFunc = outerFunction();
// 此时 innerFunc 保持了对 bigArray 的引用
// 未调用 innerFunc 时，bigArray 无法释放