内存泄漏

在 JavaScript 中，当不再需要的对象没有从内存中释放时，就会发生内存泄漏。随着时间的推移，这种累积的内存使用量可能会减慢应用程序的速度甚至崩溃。

垃圾收集器的角色

在编程领域，尤其是在处理像 JavaScript 这样的语言时，内存管理至关重要。幸运的是，JavaScript 有一个内置的机制可以帮助解决这个问题，称为"垃圾收集器"(GC)。

垃圾收集器定期检查不再需要或不再可访问的对象，并释放它们占用的内存。在理想情况下，它可以无缝运行，确保无需任何手动干预即可回收未使用的内存。然而，垃圾收集器可能会错过由于引用而无意中保持活动状态的对象，从而导致内存泄漏。这就是为什么了解内存管理的细微差别并注意潜在的陷阱对于任何开发人员都至关重要。

现在让我们看看什么会导致应用程序内存泄漏：

1. 全局变量

在 JavaScript 中，最高级别的作用域是全局作用域。在此范围内声明的变量可以从代码中的任何位置访问，这很方便，但也有风险。这些变量的管理不当可能会导致意外的内存保留。

当一个变量被错误地赋值而没有使用let、const、 或声明var时，它就变成了全局变量。此类变量驻留在全局范围内，除非显式删除，否则它们在应用程序的生命周期内持续存在。

示例：

假设正在创建一个计算矩形面积的函数：

function calculateArea(width, height) {  
area = width * height; // Mistakenly creating a global variable 'area'  
return area;  
}  
  
calculateArea(10, 5);

在这里，该area变量无意中成为全局变量，因为它不是用let、const或声明的var。这意味着函数执行后，area仍然可以访问并占用内存：

console.log(area); // Outputs: 50

最佳实践是始终使用let、const或 声明变量，var以确保它们具有正确的范围并且不会无意中成为全局变量。此外，如果确实有意使用全局变量，请确保它们对于全局访问至关重要，并有意识地管理其生命周期。

修改后：

function calculateArea(width, height) {  
let area = width * height; // Correctly scoped within the function  
return area;  
}  
  
calculateArea(10, 5);

现在，在函数执行后，area变量在其外部不可访问，并且在函数执行后它将被正确地垃圾收集。

2. 定时器和回调

JavaScript 提供了内置函数，可以在特定持续时间 ( setTimeout) 后或定期 ( setInterval) 异步执行代码。虽然它们很强大，但如果管理不当，它们可能会无意中导致内存泄漏。

如果间隔或超时引用一个对象，只要计时器处于活动状态，它就可以将该对象保留在内存中，即使应用程序的其余部分不再需要该对象。

示例：

假设有一个代表用户数据的对象，并且设置了每 5 秒更新此数据的时间间隔：

let userData = {  
name: "John",  
age: 25  
};  
  
let intervalId = setInterval(() => {  
// Update userData every 5 seconds  
userData.age += 1;  
}, 5000);

现在，如果在某个时刻，不再需要更新userData但忘记清除间隔，它会继续运行，从而防止userData被垃圾收集。

关键是在不需要计时器时始终停止计时器。如果完成了间隔或超时，请分别使用clearInterval()或clearTimeout()。

如果决定不再需要更新userData，可以像这样清除间隔：

clearInterval(intervalId);

3. 闭包

在 JavaScript 中，函数具有"缓存"创建它们的环境的特殊能力。

闭包维护对其外部环境变量的引用，这意味着如果闭包仍然存在（例如，作为回调或在事件侦听器中），它引用的变量将不会被垃圾收集，即使外部函数早已完成其工作执行。

假设有一个创建倒计时的函数：

function createCountdown(start) {  
let count = start;  
  
return function() {  
return count--;  
};  
}  
  
let countdownFrom10 = createCountdown(10);

这里，countdownFrom10是一个闭包。每次调用时，count变量都会减一。由于内部函数维护对 的引用count，因此即使程序中其他地方count没有对该函数的其他引用，该变量也不会被垃圾收集。

修改上面的例子来取消引用：

function createCountdown(start) {  
let count = start;  
  
return function() {  
return count--;  
};  
}  
  
let countdownFrom10 = createCountdown(10);  
  
countdownFrom10 = null;

4. 事件监听器

JavaScript 中的事件侦听器允许"侦听"特定事件（例如单击或按键），然后在这些事件发生时采取行动，从而实现交互性。但与其他 JavaScript 功能一样，如果不仔细管理，它们可能会成为内存泄漏的根源。

当将事件侦听器附加到 DOM 元素时，它会在函数（通常是闭包）和该元素之间创建绑定。如果元素被删除或者不再需要该事件侦听器，但没有显式删除侦听器，则关联的函数将保留在内存中，可能会保留它引用的其他变量和元素。

假设有一个按钮，并向其附加一个点击侦听器：

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

现在，稍后在的应用程序中，决定从 DOM 中删除该按钮：

button.remove();

即使按钮已从 DOM 中删除，事件侦听器的函数仍保留对该按钮的引用。这意味着该按钮不会被垃圾收集，从而导致内存泄漏。

const button = document.getElementById('myButton');  
  
function handleClick() {  
console.log('Button was clicked!');  
}  
  
button.addEventListener('click', handleClick);  
  
// Later in the code, when we're done with the button:  
button.removeEventListener('click', handleClick);  
button.remove();

5. DOM 元素

文档对象模型 (DOM) 是网页上所有元素的分层表示。当修改 DOM 时，例如通过删除一个元素，但仍然在 JavaScript 中保留对该元素的引用，就创建了所谓的"分离的 DOM 元素"。这些元素不再可见，但它们无法被垃圾收集，因为它们仍然被代码引用。

假设有一个项目列表，并且决定删除其中一个：

let listItem = document.getElementById('itemToRemove');  
listItem.remove();

现在，即使已从listItemDOM 中删除了 ， 仍然在变量中拥有对它的引用listItem。这意味着实际元素仍在内存中，与 DOM 分离但占用空间。

修改上面的例子以防止内存泄漏：

let listItem = document.getElementById('itemToRemove');  
listItem.remove();  
listItem = null; // Breaking the reference to the detached DOM element

通过listItem从 DOM 中删除引用后使其无效，我们确保垃圾收集器可以回收被删除元素占用的内存。

6. Websocket 和外部连接

Websockets 通过单个长期连接提供全双工通信通道。这使其非常适合聊天应用程序、在线游戏和实时体育更新等实时应用程序。然而，如果处理不当，可能会出现内存泄漏

假设有一个打开 websocket 连接以接收实时更新的应用程序：

let socket = new WebSocket('ws://example.com/updates');  
  
socket.onmessage = function(event) {  
console.log(`Received update: ${event.data}`);  
};

现在，如果在某个时刻，离开应用程序的这一部分或关闭使用此连接的特定 UI 组件，但忘记关闭 Websocket，它仍然保持打开状态。任何与其事件监听器相关的对象或闭包都不能被垃圾收集。

正确的管理应该是这样的：

let socket = new WebSocket('ws://example.com/updates');  
  
socket.onmessage = function(event) {  
console.log(`Received update: ${event.data}`);  
};  
  
// Later in the code, when the connection is no longer needed:  
socket.close();  
socket.onmessage = null;  
socket = null;

应对内存泄漏的工具

防止内存泄漏的最佳方法之一是早发现早处理。浏览器开发工具，尤其是 Chrome DevTools，允许监视内存使用情况、拍摄快照并跟踪一段时间内的变化。