内存泄露怎么排查？
内存泄漏的排查主要依靠 Chrome DevTools 的 Memory 工具，通过堆快照、分配时间线等手段找到未被释放的对象；而预防和解决内存泄漏的关键在于：在资源分配的地方（如定时器、事件、请求、订阅等），一定要在合适的时机（通常是组件卸载时）手动释放它们，避免因引用未清除而导致内存无法被垃圾回收。
内存泄漏（Memory Leak）大概的排查手段和思路是什么？如何解决或避免内存泄漏？
内存泄漏会导致：
-
页面卡顿，性能下降
-
内存占用持续增长，甚至崩溃
-
用户体验差，甚至影响业务稳定性
✅ 一、什么是内存泄漏（Memory Leak）？
内存泄漏是指：程序运行过程中，分配了内存（比如对象、闭包、事件监听、定时器等）却没有在不再需要时释放，导致这部分内存无法被垃圾回收（GC），从而造成内存持续增长，最终可能引发性能问题或程序崩溃。
✅ 二、常见的内存泄漏场景（前端为主）
1. 意外的全局变量
function leak() {leakedVar = 'I am global'; // 没有声明（遗漏 var/let/const），挂载到 window 上
}→ 该变量永远不会被回收
2. 未清除的定时器（setTimeout / setInterval）
useEffect(() => {const timer = setInterval(() => {console.log('Running...');}, 1000);// ❌ 忘记清除// return () => clearInterval(timer);
}, []);→ 定时器持续运行，闭包引用导致相关对象无法释放
3. 未清除的事件监听（Event Listeners）
useEffect(() => {window.addEventListener('resize', onResize);// ❌ 忘记移除// return () => window.removeEventListener('resize', onResize);
}, []);→ 组件卸载后，事件依然绑定，相关函数和对象无法回收
4. 未取消的异步操作（如 fetch / axios 请求）
useEffect(() => {const fetchData = async () => {const res = await axios.get('/api/data');setData(res.data);};fetchData();// 如果组件卸载了，但请求还在返回，可能会试图 setState
}, []);→ 如果组件卸载后异步回调仍然执行（比如 setState），可能导致内存泄漏或报错
✅ 解决方案：使用标志位或 AbortController
5. 闭包引用导致对象无法释放
function createClosure() {const bigData = new Array(1000000).fill('data');return () => {console.log(bigData.length); // 闭包引用了 bigData};
}const closure = createClosure();
// 即使不再需要 bigData，但由于闭包引用，它依然不会被 GC6. React 组件中未正确清理副作用（最常见！）
比如：
-
未清除定时器 / 动画帧
-
未移除事件监听
-
未取消网络请求
-
在
useEffect中订阅了外部数据源（如 WebSocket、Redux store、RxJS 等），但未取消订阅
✅ 三、内存泄漏的排查手段与思路
🔍 1. Chrome DevTools —— Memory 工具（最常用！）
步骤：
-
打开 Chrome 开发者工具（F12）
-
切换到 Memory（内存） 标签
-
常用功能：
| 工具 | 用途 |
|---|---|
| Heap Snapshot（堆快照） | 拍摄某一时刻的内存状态，查看哪些对象占用了内存，是否有预期之外的对象未被释放 |
| Allocation instrumentation on timeline（分配时间线） | 查看一段时间内哪些对象被分配且未被释放，追踪内存增长来源 |
| Record heap allocations（记录堆分配） | 实时观察哪些对象正在被创建且未被垃圾回收 |
排查思路：
-
对比 多个 Heap Snapshot，查看哪些对象数量持续增长且未释放
-
搜索你怀疑泄漏的组件、变量、闭包名，比如
MyComponent、fetchData、timer -
查看 Retainers（持有者），找到谁还在引用这些本该被释放的对象
🔍 2. Performance（性能监视器）
-
实时查看 JS Heap（堆内存）大小
-
观察内存是否随着页面操作持续上升，不回落 → 可能泄漏
🔍 3. React DevTools + Profiler（针对 React 组件）
-
查看哪些组件长期挂载、未卸载
-
检查是否意外渲染了大量组件、未清理副作用等
🔍 4. Node.js 应用：使用 process.memoryUsage()或 heapdump模块
如果是服务端 Node.js 应用，可以：
-
定时打印内存使用情况：
process.memoryUsage() -
使用 heapdump导出内存快照，然后用 Chrome DevTools 分析
✅ 四、如何解决和避免内存泄漏？
✅ 通用原则：
在资源分配（如定时器、事件、请求、订阅）的地方，一定要记得释放他们，比如说组件卸载时（React）、对象销毁时、程序退出时释放它们。
✅ 1. React 常见场景与解决办法
❌ 问题：忘记清除定时器
useEffect(() => {const timer = setInterval(() => {}, 1000);// ✅ 解决：清除定时器return () => clearInterval(timer);
}, []);❌ 问题：忘记移除事件监听
useEffect(() => {const handleResize = () => {};window.addEventListener('resize', handleResize);// ✅ 解决：移除事件return () => window.removeEventListener('resize', handleResize);
}, []);❌ 问题：异步请求未取消，组件卸载后可能调用 setState
useEffect(() => {let isMounted = true;axios.get('/api/data').then((res) => {if (isMounted) setData(res.data); // 避免组件卸载后 setState});return () => {isMounted = false; // 标记组件已卸载};
}, []);或者更专业的：
useEffect(() => {const controller = new AbortController();axios.get('/api/data', { signal: controller.signal }).then(/* ... */).catch((err) => {if (axios.isCancel(err)) {console.log('请求被取消');}});return () => {controller.abort(); // 取消请求};
}, []);✅ 2. 避免意外的全局变量
-
始终使用
let/const声明变量 -
避免遗漏声明：
func = () => {}（默认挂到 window 上）
✅ 3. 避免闭包陷阱
-
注意回调函数中引用了外部大对象、组件状态等
-
如果不再需要，确保没有长期持有引用
✅ 4. 及时清理订阅 / 第三方库资源
比如：
-
WebSocket
useEffect(() => {const socket = new WebSocket('ws://xxx');socket.onmessage = () => {};return () => {socket.close(); // 关闭连接}; }, []); -
Redux store / RxJS Observable / 第三方 SDK
-
订阅后一定要在组件卸载时取消订阅
-
✅ 5. 避免内存“持有”不释放
-
大对象、缓存、Map/Set 如果不再使用，及时清除
-
比如全局缓存对象，要有清理机制或 TTL（过期时间）
✅ 五、总结：内存泄漏排查与解决思路
| 步骤 | 操作 / 思路 |
|---|---|
| 1. 怀疑有内存泄漏 | 页面越来越卡，内存占用越来越高，React 组件不卸载等 |
| 2. 排查工具 | 使用 Chrome DevTools → Memory（堆快照、分配时间线） |
| 3. 常见泄漏点 | 定时器、事件监听、未取消的异步请求、全局变量、闭包、未清理的订阅 |
| 4. 解决方案 | 确保在组件卸载时（或其他资源销毁时）清除定时器、事件、请求、订阅等 |
| 5. 避免策略 | 养成良好编码习惯：分配了资源，一定要有对应的释放逻辑 |