问题产生的核心原理
全局监听器通常是跟随应用生命周期存在的，比如页面级的滚动监听、窗口 resize 监听、全局事件总线订阅等，这些监听器的回调函数如果被长期持有，那么回调函数内部引用的所有变量都不会被垃圾回收机制释放。如果局部变量被传入这类全局监听器的回调中，就会导致局部变量的生命周期被强制延长，当这类场景反复出现时，无用变量不断堆积，最终就会引发内存假死。
典型问题代码示例
下面是一个错误实现的示例，局部变量被错误包裹进全局监听器：
// 全局事件总线，应用生命周期内一直存在
const globalEventBus = {
listeners: [],
on(event, callback) {
this.listeners.push({ event, callback });
},
emit(event, data) {
this.listeners.forEach(item => {
if (item.event === event) {
item.callback(data);
}
});
}
};
function handleUserAction() {
// 局部变量，正常应该在函数执行完后被回收
const localData = {
id: Date.now(),
content: '临时操作数据'
};
// 错误操作：把引用了局部变量的回调注册到全局监听器中
globalEventBus.on('user_action_done', () => {
console.log('处理局部数据:', localData.id);
});
}
// 多次调用函数，每次都会新增一个无法被回收的回调引用
for (let i = 0; i < 1000; i++) {
handleUserAction();
}
排查的具体步骤
1. 复现问题并观察内存趋势
首先需要在出现内存假死的操作路径下反复操作，同时打开浏览器的开发者工具切换到 Memory 面板，记录内存占用情况。如果每次操作后内存占用持续上升，且手动触发垃圾回收后内存没有明显下降，就可以初步判定存在内存泄漏问题。
2. 抓取内存快照对比
在操作前和操作多次后分别抓取两份内存快照，在 Memory 面板中对比两份快照的差异，找到新增的、无法被回收的对象。如果新增的对象类型和全局监听器的回调关联，或者对象中包含了本该是局部作用域的变量，就可以进一步缩小排查范围。
3. 定位引用链路
点击无法被回收的异常对象，查看其引用链路，找到持有该对象的根节点。如果根节点是全局对象，且中间链路经过全局监听器的回调列表，就可以确认是局部变量被错误包裹进了全局监听器。
正确的实现方案
解决这类问题的核心是避免在全局监听器的回调中直接引用局部变量，或者在局部作用域销毁时主动移除全局监听。下面是优化后的代码示例：
const globalEventBus = {
listeners: [],
on(event, callback) {
const listenerItem = { event, callback };
this.listeners.push(listenerItem);
// 返回移除监听的方法，方便局部作用域销毁时调用
return () => {
const index = this.listeners.indexOf(listenerItem);
if (index !== -1) {
this.listeners.splice(index, 1);
}
};
},
emit(event, data) {
this.listeners.forEach(item => {
if (item.event === event) {
item.callback(data);
}
});
}
};
function handleUserAction() {
const localData = {
id: Date.now(),
content: '临时操作数据'
};
// 保存移除监听的方法
const removeListener = globalEventBus.on('user_action_done', () => {
console.log('处理局部数据:', localData.id);
});
// 局部操作完成后主动移除监听，避免局部变量被长期持有
// 实际场景中可以根据业务逻辑确定移除时机，比如组件销毁时
setTimeout(() => {
removeListener();
}, 1000);
}
预防这类问题的注意事项
- 注册全局监听器时，明确监听的生命周期，尽量和对应的局部作用域绑定，作用域销毁时同步移除监听。
- 避免在全局监听器的回调中直接引用外部局部变量，如果必须引用，要确保引用关系可以被正常释放。
- 定期在开发过程中进行内存检测，尤其是在新增全局监听相关逻辑的时候，及时发现潜在的内存泄漏问题。