【JS】垃圾回收机制与内存泄漏

垃圾回收机制与内存泄漏

内存泄漏是指在程序运行过程中，某些不再需要使用的内存没有被正确释放，导致这些内存资源无法再被系统重新使用。随着程序的持续运行，内存泄漏会不断消耗可用内存，最终可能导致内存不足、系统变慢，甚至程序崩溃。

JS 是一种具有自动内存管理机制的语言，开发者不需要手动分配和释放内存。JS 引擎（例如 V8）通过垃圾回收机制来自动管理内存。这种机制的核心任务是识别和回收不再使用的对象，从而避免内存泄漏。

内存泄漏通常是由于对象引用未被正确清理，导致垃圾回机制无法回收这些对象。

常见引起内存泄漏的几种方式

1. 全局变量未清理

声明全局变量时会一直存在于内存中，直到程序结束。如果不小心使用全局变量而没有清理，可能导致不必要的内存占用。

let leakData = [];
function addData(data) {
  leakData.push(data); 
}

2. 闭包（Closure）使用不当

闭包可以捕获函数中的变量，但如果这些变量不再需要时没有正确释放，可能会导致内存泄漏。

function createLeak() {
  let largeData = new Array(1000000); // 占用大量内存
  return function() {
    console.log(largeData.length); // 引用了 largeData，导致它无法被回收
  }
}
let leak = createLeak();

3. 未移除的事件监听器

注册事件监听器时，如果没有手动移除则会一直引用相关的 DOM 元素，导致这些元素无法被回收。

const button = document.getElementById('myButton');
function handleClick() {
  console.log('点击了');
}
button.addEventListener('click', handleClick);
// 当按钮被移除后，如果没有移除事件监听器，事件引用仍然存在

4. DOM 元素引用未清理

当 DOM 元素从页面中移除后，如果程序仍然保留了对该元素的引用，它的内存不会被释放。

let element = document.getElementById('myElement');
document.body.removeChild(element); 
// 但是 element 变量仍然存在，导致该 DOM 节点的内存无法被释放

5. 计时器或回调函数未清理

使用 setInterval 或 setTimeout 时，如果没有手动清理也会导致内存泄漏。

let intervalId = setInterval(() => {
  console.log('Running...');
}, 1000);
// 如果没有调用 clearInterval(intervalId)，这个计时器会一直存在

如何避免内存泄漏

• 避免不必要的全局变量，将变量限制在合适的作用域内。
• 合理使用闭包，确保在不再需要时清理对变量的引用。
• 及时移除事件监听器，当 DOM 元素或事件不再需要时，使用 removeEventListener 来移除事件监听器。
• 使用 clearInterval 和 clearTimeout 清理不再需要的定时任务。