SPA 应用中的路由切换内存泄漏：未注销的 Scroll 监听与全局变量

大家好，我是你们的技术讲师。今天我们来深入探讨一个在现代前端开发中非常常见却又容易被忽视的问题——单页应用（SPA）中的内存泄漏问题，特别是由 未注销的 Scroll 监听器 和 不当使用的全局变量 引起的。

这类问题不会立刻导致页面崩溃或报错，但会在用户频繁切换路由后逐渐消耗大量内存，最终导致性能下降、浏览器卡顿甚至崩溃。如果你正在维护一个 React、Vue 或 Angular 的 SPA 项目，并且发现“切换页面几次后页面越来越慢”，那很可能就是这个问题在作祟。

一、什么是内存泄漏？为什么它在 SPA 中更危险？

内存泄漏是指程序分配了内存空间，但在使用完成后没有释放，导致系统可用内存不断减少。在传统多页面应用（MPA）中，每次跳转都会刷新整个页面，旧的 DOM 和 JS 对象会被彻底清除，所以内存泄漏几乎不会发生。

但在 SPA 中，页面不会重新加载，组件和事件监听器可能一直驻留在内存中。如果开发者忘记清理某些资源（比如 window.addEventListener、定时器、全局变量引用），这些对象就会持续占用内存，形成“隐性”泄露。

典型场景：

路由切换时未移除 scroll 监听
全局变量持有对组件实例的引用（如 window.myGlobal = someComponentInstance）
使用 setInterval 或 setTimeout 但未调用 clearInterval / clearTimeout

二、Scroll 监听器如何引发内存泄漏？

假设你在某个页面上添加了一个滚动监听器来实现“吸顶导航栏”或“懒加载图片”的功能：

// 示例：监听 window 滚动事件
function setupScrollListener() {
  window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset;
    if (scrollTop > 100) {
      document.querySelector('.navbar').classList.add('sticky');
    } else {
      document.querySelector('.navbar').classList.remove('sticky');
    }
  });
}

这个函数通常会在组件挂载时执行，比如在 React 的 useEffect 中：

import { useEffect } from 'react';

function MyPage() {
  useEffect(() => {
    setupScrollListener();

    // ❗️这里缺少 cleanup 函数！
    return () => {};
  }, []);

  return <div>...</div>;
}

⚠️ 问题来了：当用户从当前页面跳转到另一个路由时，React 会卸载该组件，但 setupScrollListener() 中注册的 scroll 事件监听器仍然存在！因为它是绑定在 window 上的全局对象，而不是组件内部的局部作用域。

这意味着：

即使组件已被销毁，监听器仍继续运行；
每次进入该页面都会重复注册新的监听器；
多次路由切换后，可能有几十个甚至上百个相同的监听器堆积在内存中！

✅ 正确做法：提供 cleanup 回调

function setupScrollListener() {
  const handler = () => {
    const scrollTop = window.pageYOffset;
    if (scrollTop > 100) {
      document.querySelector('.navbar').classList.add('sticky');
    } else {
      document.querySelector('.navbar').classList.remove('sticky');
    }
  };

  window.addEventListener('scroll', handler);

  // 返回一个函数用于移除监听器
  return () => {
    window.removeEventListener('scroll', handler);
  };
}

// 在 React 组件中
useEffect(() => {
  const cleanup = setupScrollListener();

  return () => {
    cleanup(); // ✅ 清理监听器
  };
}, []);

这样就能确保每次组件卸载时都正确移除对应的监听器，避免内存泄漏。

三、全局变量引发的内存泄漏：一个隐藏的陷阱

除了事件监听器，另一个常见的内存泄漏来源是全局变量持有对组件实例的引用。例如：

// 错误示例：将组件实例保存为全局变量
class MyComponent extends React.Component {
  componentDidMount() {
    window.globalInstance = this; // ❌ 危险！
  }

  componentWillUnmount() {
    // ❗️这里根本没清空 globalInstance！
  }

  render() {
    return <div>Hello</div>;
  }
}

一旦你把组件实例赋值给 window.globalInstance，即使组件被卸载，这个引用依然存在。JavaScript 引擎无法回收该对象，因为它还被全局变量引用着。

这会导致：

组件实例及其子组件、状态、方法等都无法被垃圾回收；
内存占用持续增长；
页面越用越慢，尤其在高频路由切换场景下。

更隐蔽的例子：闭包中的引用

let globalTimer;

function startTimer() {
  globalTimer = setInterval(() => {
    console.log('tick');
  }, 1000);
}

function stopTimer() {
  clearInterval(globalTimer);
  globalTimer = null; // ✅ 必须显式置空
}

如果 startTimer() 被多次调用而 stopTimer() 没有执行，多个定时器会同时运行，而且它们都持有一个对 globalTimer 的引用，造成资源浪费。

四、真实案例分析：一个典型的 SPA 内存泄漏流程

让我们模拟一个完整的路由切换过程，看看内存是如何一步步泄漏的：

时间点	动作	内存变化
T0	用户访问 `/home` 页面	注册 scroll 监听器（1 个）
T1	用户跳转到 `/about`	`/home` 组件卸载，但监听器未清除 → 累积 1 个
T2	用户返回 `/home`	再次注册 scroll 监听器 → 累积 2 个
T3	用户再次跳转到 `/about`	`/home` 再次卸载，监听器仍未清除 → 累积 2 个
T4	用户反复切换 5 次	最终累积多达 5~10 个无效监听器

每一步看似正常，但实际上都在悄悄积累内存压力。Chrome DevTools 的 Memory 面板可以清晰看到堆栈增长趋势。

📌 建议工具：

Chrome DevTools → Memory Tab → Take Heap Snapshot
查看是否有大量 EventListener 或未释放的对象

五、最佳实践总结（附代码模板）

✅ 1. 所有全局事件监听必须可撤销

// 工具函数：安全地注册/注销监听器
export function addGlobalListener(target, event, handler, options = {}) {
  target.addEventListener(event, handler, options);

  return () => {
    target.removeEventListener(event, handler, options);
  };
}

// 使用方式
useEffect(() => {
  const cleanup = addGlobalListener(window, 'scroll', handleScroll);

  return cleanup;
}, []);

✅ 2. 全局变量要谨慎使用，必要时主动释放

// 安全存储全局对象的方法
const GlobalStore = {
  instances: new Map(),

  set(key, value) {
    this.instances.set(key, value);
  },

  get(key) {
    return this.instances.get(key);
  },

  remove(key) {
    this.instances.delete(key);
  }
};

// 在组件卸载时清理
useEffect(() => {
  GlobalStore.set('currentComponent', myInstance);

  return () => {
    GlobalStore.remove('currentComponent'); // ✅ 显式清理
  };
}, []);

✅ 3. 使用 WeakMap 替代普通对象存储引用（高级技巧）

const componentWeakMap = new WeakMap();

function trackComponent(instance) {
  componentWeakMap.set(instance, true);
}

function untrackComponent(instance) {
  componentWeakMap.delete(instance); // 自动释放，无需手动管理
}

🔍 注意：WeakMap 只能存储对象作为 key，且不会阻止垃圾回收，适合做轻量级跟踪。

六、不同框架下的处理差异（简要对比）

框架	推荐做法	是否自动清理
React	使用 `useEffect` 返回 cleanup 函数	✅ 是（需手动写）
Vue 3	使用 `onUnmounted` 生命周期钩子	✅ 是（需手动写）
Angular	使用 `ngOnDestroy` 生命周期钩子	✅ 是（需手动写）
原生 JS + Router	手动管理监听器注册与注销	❌ 否（必须自己控制）

无论哪种框架，核心原则一致：注册就要注销，否则就等于埋雷。

七、如何检测和预防内存泄漏？

🧪 1. 开发阶段：使用 DevTools 分析

打开 Chrome DevTools → Memory → Record heap snapshots
切换路由多次后截图对比
查找异常增长的对象类型（如 EventListener、ComponentInstance）

🧪 2. 生产环境监控（可选）

你可以通过以下方式增强监控能力：

// 监控全局监听器数量（仅限调试）
const activeListeners = new Set();

window.addEventListener = (type, fn) => {
  const wrappedFn = (...args) => {
    fn(...args);
  };
  activeListeners.add({ type, fn: wrappedFn });
  return originalAddEventListener.call(window, type, wrappedFn);
};

window.removeEventListener = (type, fn) => {
  activeListeners.delete({ type, fn });
  return originalRemoveEventListener.call(window, type, fn);
};

⚠️ 这种方式会影响性能，请仅用于调试！

🧪 3. 自动化测试建议

编写单元测试验证组件是否正确清理资源：

test('should clean up scroll listener on unmount', () => {
  render(<MyPage />);

  expect(window.eventListeners).toHaveLength(1); // 假设你封装了计数逻辑

  cleanup();

  expect(window.eventListeners).toHaveLength(0);
});

八、结语：记住三个关键点

SPA 不等于“永远不释放”：每个组件都应该像“临时访客”一样，离开时带走自己的东西。
事件监听器必须可撤销：尤其是绑定在 window、document 上的，不要以为组件卸载就能自动清理。
全局变量要慎用：除非明确知道用途，否则尽量避免将组件实例或复杂对象挂在 window 上。

✅ 最终提醒：
内存泄漏不是“bug”，而是“隐患”。它不像语法错误那样一眼可见，却能在不知不觉中让产品变得缓慢、不可靠。作为开发者，我们要养成良好的资源管理习惯，从每一次路由切换开始，关注每一个细节。

希望今天的分享对你有帮助。下次遇到“页面越来越卡”的问题时，不妨先检查一下你的监听器有没有被正确注销 😊

谢谢大家！