内存泄漏：四大场景剖析与解决方案

深入理解内存泄漏：原理、场景与解决方案

在软件开发中，内存泄漏就像隐匿在暗处的顽疾，悄然侵蚀着程序的运行效率与稳定性。接下来，让我们全面且深入地探究内存泄漏的各个方面，从基础概念、常见发生场景，到行之有效的解决方案。

什么是内存泄漏？

在计算机程序运行时，内存泄漏指应用程序不用某些内存空间后，没正确释放回系统。长此以往，系统可用内存会不断减少。轻微泄漏可能仅致程序运行稍慢，严重时则会引发系统崩溃，导致程序无法正常运转。在前端开发的浏览器环境里，内存泄漏问题常易被开发者忽略。

四大常见内存泄漏场景

全局变量未释放

原理分析

在 JavaScript 的变量作用域规则里，存在这样一种特殊情况：若变量声明时未用 var、let 或 const 关键字，则它会自动挂载到浏览器环境的 window 对象或 Node.js 环境的 global 对象上，成为全局变量。只要页面没有关闭或者进程没有终止，它就会一直占据内存空间，不会被自动回收。

典型示例

js 复制代码

function processData() {
  tempraryData = new Array(1000000); 
}

这里错误地将变量名写错为tempraryData，且未使用声明关键字。
本意可能是想声明一个局部变量来处理数据，但由于拼写错误，导致创建了一个全局变量，并且这个全局变量会一直存在，即使processData函数执行完毕后也不会被释放。

风险特征

追踪困难：意外创建的全局变量隐匿于众多全局作用域变量中，很难被发现。尤其在项目规模大、代码量多的情况下，排查难度极大。
影响单页面应用性能：长时间运行的单页面应用（SPA）中，若多次调用含错误声明全局变量的函数，每次调用都会新增全局变量并持续累积。由于 SPA 不会重新加载页面，内存占用量将不断攀升，损害程序性能。

闭包滥用

内部函数若引用了外部作用域变量，在被返回或作为回调传递时就形成闭包。闭包能够访问和操作其外部作用域的变量。当包含闭包的函数被赋予一个全局变量，从而被长期持有，即便外部作用域的执行上下文已经结束，闭包所引用的外部变量仍会因被关联而无法被垃圾回收机制回收，导致这些变量持续占据内存空间。

危险闭包示例

js 复制代码

function createClosure() {
  const bigData = new Array(1000000);
  return function() {
    console.log(bigData.length);
  };
}
const closureHolder = createClosure();

createClosure函数内部创建了一个包含一百万个元素的数组bigData，这会占用较多的内存。
createClosure函数返回一个内部函数，该内部函数引用了外部的bigData变量，从而形成了闭包。
通过将返回的闭包函数赋值给全局变量closureHolder，使得闭包被长期持有。即便createClosure函数执行完毕，其执行上下文结束，但由于闭包的存在，bigData变量依旧会被引用，无法被垃圾回收机制回收，持续占用内存。

优化策略

当闭包不再需要时，应该尽快将引用闭包的变量设置为null或者重新赋值，这样可以切断闭包与外部引用的联系，使得垃圾回收机制能够回收闭包以及其引用的外部变量所占用的内存。

未解绑事件监听

DOM 引用机制

在网页开发里，给 DOM 元素添加事件监听器是常见操作。为 DOM 元素添加事件监听器时，会在 DOM 元素和对应的回调函数间建立双向引用关系。也就是说，DOM 元素知晓有事件监听器监听特定事件，事件监听器也持有对该 DOM 元素的引用。

若从页面移除这个 DOM 元素时，未手动移除对应的事件监听器，该事件监听器仍会留在内存中。由于其持有对 DOM 元素的引用，即便页面上看不到该 DOM 元素，它和相关事件监听器仍会占用内存空间，从而造成内存泄漏。

典型问题代码

js 复制代码

function init() {
  const button = document.createElement('button');
  button.addEventListener('click', handleClick);
  document.body.appendChild(button);
}

// 后续移除按钮，但未移除事件监听器
document.body.removeChild(button); 

// 此时按钮虽从页面移除，但事件监听器仍在内存中，
// 且持有对按钮 DOM 元素的引用，导致按钮无法被垃圾回收，造成内存泄漏

正确做法

js 复制代码

// 移除元素前解除监听
function removeButton() {
  const button = document.getElementById('myButton');
  button.removeEventListener('click', handleClick);
  document.body.removeChild(button);
}

定时器未清除

执行上下文保持

在 JavaScript 里，setInterval 和 setTimeout 用于创建定时器。创建定时器时，其回调函数会保留对定义时上下文的引用。只要定时器未清除，相关回调函数及变量就会持续占用内存。例如，若回调函数引用了某个对象，即便其他地方不再需要该对象，只要定时器运行，该对象就无法被垃圾回收。

js 复制代码

function startTimer() {
  setInterval(() => {
    console.log(this.data);
  }, 1000);
}

上述代码中，箭头函数作为定时器回调，保持对当前作用域的引用。若 this.data 引用了大对象，且定时器未清除，该对象会一直被占用，造成内存泄漏。

解决方案

js 复制代码

const timerId = setInterval(callback, delay);
window.onunload = () => clearInterval(timerId);

上述代码用 setInterval 创建定时器并保存其 ID。在页面卸载时，通过保存的 ID 调用 clearInterval 清除定时器，使定时器及其关联的回调函数和变量能被垃圾回收，避免内存泄漏。