你以为DOM没了就没事了？内存泄漏排查教程

从场景还原来看。静默的杀手

使用者并没有抱怨卡顿，而是直接反馈“浏览器闪退了”。打开Chrome任务管理器，发现该标签页内存使用从启动时的120MB。在持续对话1小时后飙升到了870MB随后触发OOM被程序杀掉。

为什么会这样？ 虚拟滚动只回收了DOM节点，但JS堆中的消息对象、DOM引用、回调函数从未释放。

至于元凶一，闭包引用与大对象常驻

很多开发者喜欢在消息对象里存imageBase64或超长文本。即使这条消息早就不在可视区了只要它在messages数组里垃圾回收器永远不会回收它。

排查工具实操

1. 打开Chrome DevTools → Memory面板。
2. 选择“Heap snapshot”，拍第一张快照。
3. 聊天工具运行10分钟，再拍第二张快照。
4. 视图切换为“Comparison”，过滤“Array”和“Object”。
5. 查找Delta始终为正的构造函数,如Message、Array

. 元凶二：事件监听幽灵

每条消息如果都有“复制按钮”、“语音播放按钮”。并各自绑定了addEventListener：

// ❌ 错误写法
useEffect => {
const btn = ref.current.querySelector;不过，const handler = => navigator.clipboard.writeText;
btn.addEventListener;
// 没有 cleanup！
},)，怎么说呢，

当消息被移出虚拟滚动时,如果没有removeEventListener,DOM节点虽然从视觉上消失,但由于事件回调函数引用了该DOM节点,GC无法回收这个DOM对象。造成分离DOM节点泄漏.

排查:

• Elements面板搜索detached关键字
• Memory快照中的Detached HTMLElement数量

  . 元凶三:失控的定时器与SSE连接

  
  // ❌ 致命错误
  useEffect => {
  const timer = setInterval => {
  setTypingText;},)，// 没有 return clearInterval
  },);

  即使当前页面跳转,setInterval依然运行,持有组件实例引用,导致整个组件树无法被回收.

  .破局三板斧

  ① 强制限制队列长度:无论虚拟滚动如何变化。内存数组必须截断.设置最大长度500条:

  
  const MAX_MESSAGES =;function addMessage {
  messages.push;if {
  const removed = messages.shift;// 清理大对象引用
  if removed.imageBase64 = '';if removed.content =
  removed.content.slice + '...'
  }}
  

  ②统一清理钩子:使用事件委托机制:

  
  // ✅正确写法
  
  {const target=e.target as HTMLElement;const msgId=target.dataset.msgId;const action=target.dataset.action;怎么说呢，ifhandleCopy}}>
  //子组件只渲染UI不绑任何监听器
  /div
  
  

  ③大图使用Blob URL并手动revoke:对于AI生成的图片使用临时链接:

  
  URL.createObjectURL
  组件卸载时调用URL.revokeObjectURL