检测 xhr 内存泄漏的核心做法是：在 chrome devtools 的 memory 面板中，通过 heap snapshot（堆快照）对比或 allocation instrumentation（分配监控），定位那些被 dom 事件监听器、闭包或全局变量意外引用的 xmlhttprequest 实例及其关联数据。具体操作时，先录制一段包含发起请求和清理逻辑的代码执行过程，然后检查是否存在未释放的 xhr 对象或持有其数据的 closure（闭包）。若发现 xhr 对象在请求完成后仍存在于堆中，且其 `onload`/`onerror` 回调函数引用了外部作用域的大对象（如大型 json 响应体或组件实例），即可判定为泄漏。
如何通过 Heap Snapshot 识别残留的 XHR 对象
使用 Heap Snapshot 可以直观地看到请求结束后是否仍有 XHR 实例驻留在内存中。操作步骤是：在 Performance 或 Memory 标签页选择 "Heap snapshot"，点击 "Take snapshot" 获取基准快照，触发业务代码中的 XHR 请求，等待请求完成并执行预期的清理逻辑后，再次 "Take snapshot"。在两个快照之间选择 "Comparison" 视图，搜索类名 "XMLHttpRequest" 或 "XHR"。如果第二个快照中新增了此类实例，或者它们的 Size（保留大小）显著增加，说明这些对象未被垃圾回收。重点查看这些对象的 Retainers（保留路径），通常泄漏点在于某个全局数组、定时器回调或 DOM 元素的属性仍然指向该 XHR 或其回调函数。
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/large-data');
xhr.onload = function() {
// 模拟一个大型数据结构
const bigData = new Array(1000000).fill('data');
// 错误示范：将大对象绑定到全局或外部作用域，导致 XHR 无法被回收
window.cachedResponse = { xhr: this, data: bigData };
};
xhr.send();
如何排查由闭包引起的 XHR 数据泄漏
当 XHR 的回调函数（如 `onload`）形成了闭包，且该闭包引用了较大的局部变量或组件实例时，即使 XHR 请求结束，这些大对象也会因为闭包的存活而无法被 GC 回收。排查方法是：在 Memory 面板中使用 "Allocation instrumentation on JS heap" 模式，勾选 "Capture stack traces"。执行触发 XHR 的操作后，停止录制并分析生成的列表。筛选出与 XHR 相关的分配记录，查看其 Stack Trace。如果发现栈帧中包含了组件构造函数或大的数据容器，说明闭包捕获了过多上下文。解决方式是在 `onload` 处理完毕后，显式地将不再需要的引用置为 `null`，或使用 `AbortController` 确保请求中断时能彻底清理资源。
立即学习“Java免费学习笔记（深入）”；
// 正确清理示例
function fetchData() {
const controller = new AbortController();
const signal = controller.signal;
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Success:', xhr.responseText);
}
// 关键：请求结束后，断开回调与外部可能的强引用
// 虽然现代浏览器会自动处理部分情况，但显式 null 更安全
xhr.onload = null;
xhr.onerror = null;
};
xhr.send();
// 如果需要取消请求，调用 abort 会触发 onabort，同样需要清理
return { abort: () => controller.abort() };
}
为什么 AbortController 能辅助防止 XHR 泄漏
在某些单页面应用（SPA）中，用户快速导航可能导致前一个页面的 XHR 请求在后台继续运行，并在完成后尝试更新已卸载的 DOM 或状态，从而引发泄漏或报错。`AbortController` 允许开发者主动取消未完成的请求。当调用 `controller.abort()` 时，XHR 对象会触发 `onabort` 事件，此时可以在 `onabort` 回调中执行清理逻辑，例如移除事件监听器、清空缓存数据等。这确保了在请求生命周期非正常结束时，相关资源能被及时释放，避免了因请求挂起或延迟完成而导致的内存累积。结合之前的 Heap Snapshot 检查，使用 AbortController 后，应观察到在页面切换或组件卸载时，不再有新增的 XHR 保留对象。
