【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清理不再需要的定时任务。