单页应用中资源清理的关键是在组件卸载前主动解绑，而非依赖浏览器卸载事件；需结合路由离开守卫、全局监听器集中管理、beforeunload兜底及特殊资源显式释放。
在单页应用（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，改用集中式管理，便于批量清理：
- 维护一个全局监听器 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、不保证执行完）。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- ✅ 推荐：用
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()；
不复杂但容易忽略：资源释放的关键在于谁创建、谁负责销毁，并确保销毁逻辑在生命周期终点被确定执行。把清理逻辑写在组件/模块内部，比依赖全局卸载事件更可控、更可测试。
