JavaScript 中怎么在单页应用卸载时释放所有绑定的全局资源-js教程-PHP中文网

单页应用中资源清理的关键是在组件卸载前主动解绑，而非依赖浏览器卸载事件；需结合路由离开守卫、全局监听器集中管理、beforeunload兜底及特殊资源显式释放。

javascript 中怎么在单页应用卸载时释放所有绑定的全局资源

在单页应用（SPA）中，页面不会真正“刷新”或“跳转”，而是通过路由切换动态更新 DOM。但当用户关闭标签页、刷新页面、或导航到站外链接时，浏览器会触发卸载流程。此时若未清理全局资源，容易导致内存泄漏、重复监听、定时器失控等问题。关键不是“等卸载再清理”，而是在组件/模块卸载前主动解绑，并配合浏览器原生卸载事件做兜底。

1. 路由离开前手动清理（最常用、最可靠）

现代前端框架（React/Vue/Svelte）和路由库（React Router、Vue Router）都提供明确的“离开守卫”或“清理函数”机制。这是释放资源的第一道防线。

React（useEffect cleanup）：在组件内使用 useEffect，返回的清理函数会在组件卸载或依赖变化前执行：

useEffect(() => {
  const handler = () => console.log('window resize');
  window.addEventListener('resize', handler);
  
  // ✅ 清理：移除事件监听
  return () => window.removeEventListener('resize', handler);
}, []);

Vue 3（onBeforeUnmount）：

import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  clearInterval(timerId);
  document.removeEventListener('visibilitychange', handleVis);
});

React Router v6.4+（useNavigate + beforeUnload 辅助）：对整个路由级资源，可在布局组件或自定义 hook 中监听路由变更，并在 useNavigation() 或 useBlocker() 的回调中清理；但更推荐按组件粒度管理。

2. 全局事件监听器统一注册与注销

避免零散 addEventListener，改用集中式管理，便于批量清理：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

维护一个全局监听器 Map 或数组（如 window.__spaListeners = []），每次绑定时 push 进去；
封装一个 onGlobal 和 offAllGlobal 工具函数；
在根组件卸载或路由重置时调用 offAllGlobal()；

// utils/listeners.js
const listeners = [];

export function onGlobal(target, type, handler, options) {
  target.addEventListener(type, handler, options);
  listeners.push({ target, type, handler, options });
}

export function offAllGlobal() {
  listeners.forEach(({ target, type, handler }) => {
    target.removeEventListener(type, handler);
  });
  listeners.length = 0;
}

3. 使用 beforeunload / unload 做最后兜底（谨慎使用）

这两个事件仅在页面即将关闭/刷新/导航离开时触发，适合释放无法按组件粒度追踪的全局副作用（如 Web Worker、SharedWorker、IndexedDB 连接、第三方 SDK 挂载的监听器）。注意：beforeunload 只允许同步操作，且不能异步等待；unload 已被多数浏览器限制（不触发 fetch、不保证执行完）。

✅ 推荐：用 beforeunload 发送轻量级埋点或保存关键状态（如草稿）；
⚠️ 避免：在其中启动异步请求、清理大量 DOM、或调用可能阻塞的 API；
❌ 不要依赖它清理核心业务逻辑——它可能不触发（如进程被 kill）或被浏览器跳过；

window.addEventListener('beforeunload', (e) => {
  // 仅同步操作：比如设置返回提示（现代浏览器已禁用自定义消息）
  // e.preventDefault(); // ❌ 现代浏览器忽略，且可能报 warning
  localStorage.setItem('lastActiveTime', Date.now());
});

4. 特殊资源需单独处理

以下资源不随 DOM 自动销毁，必须显式释放：

定时器（setTimeout/setInterval）：保存 ID，卸载时 clearTimeout/clearInterval；
Web Workers：调用 worker.terminate()；
EventSource / WebSocket：调用 close()；
第三方 SDK（如 Sentry、Plausible、地图 SDK）：查阅其文档，调用 Sentry.close()、map.destroy() 等；
Canvas/WebGL 上下文、音频上下文（AudioContext）：调用 context.close()；