页面刷新时未调用dispose的RxJS Subject是否内存泄漏及检测方法

问题1：页面刷新未调用dispose()是否会造成内存泄漏？ #

不会。当页面触发刷新或关闭操作时，浏览器会直接销毁当前页面的整个执行上下文，包括所有内存中的对象、变量以及RxJS Subject实例。浏览器的垃圾回收机制会一次性清理所有关联资源，不会留下内存泄漏问题。

但要注意单页应用（SPA）的路由切换场景：这类场景不属于整页刷新，页面上下文不会被销毁，如果未调用dispose()关闭Subject，其关联的订阅和对象会一直驻留内存，进而引发内存泄漏。

问题2：如何在JavaScript库中检测页面刷新事件？ #

可以通过监听浏览器的beforeunload或unload事件，在页面刷新/关闭时自动执行清理逻辑。以下是具体实现示例：

优化后的类A代码 #

import { Subject } from 'rxjs';

export class A {
   private aSubject;
   private unloadHandler;

   constructor() {
       this.aSubject = new Subject();
       // 绑定处理函数，确保this指向当前实例
       this.unloadHandler = () => this.dispose();
       window.addEventListener('beforeunload', this.unloadHandler);
   }

   public dispose() {
       this.aSubject.complete();
       // 移除事件监听，避免残留引用
       window.removeEventListener('beforeunload', this.unloadHandler);
   }
}

事件说明 #

• beforeunload：在页面即将卸载（刷新、关闭）时触发，此时可以安全执行同步清理操作（比如完成Subject），是更推荐的监听事件。
• unload：在页面已经开始卸载时触发，执行时机晚于beforeunload，部分浏览器会限制该事件内的异步操作，不建议依赖它做核心清理。

另外要注意：如果用户手动调用了dispose()，必须同步移除事件监听，避免内存中残留事件处理函数的引用。

内容的提问来源于stack exchange，提问作者rodent_la