元素
元素
工具
博客
问答

Chrome DevTools 内存快照里 Detached DOM 树怎么排查？

A. 俊俊 阅读 9
优化

我在用 Chrome DevTools 做内存分析时，发现快照里有大量 Detached DOM 节点，但不知道是哪段代码造成的。明明已经移除了 DOM 元素，为什么还占着内存？

我试过在移除元素前手动解绑事件，但好像没用。下面是我简化后的代码：

function createWidget() {
  const div = document.createElement('div');
  div.innerHTML = '<button>Click me</button>';
  const btn = div.querySelector('button');
  
  btn.addEventListener('click', () => {
    console.log('clicked');
  });

  document.body.appendChild(div);
  
  // 模拟稍后移除
  setTimeout(() => {
    document.body.removeChild(div);
    // 这里没手动 removeEventListener，是不是问题？
  }, 1000);
}

createWidget();

这种写法会导致 Detached DOM 泄漏吗？该怎么用 DevTools 定位具体引用源？

内存优化
我来解答 赞 4 收藏
二维码
手机扫码查看
反馈
1 条解答
可欣酱~
可欣酱~ Lv1
问题在于你没有移除事件监听器。修改代码如下：
function createWidget() {

  const div = document.createElement('div');

  div.innerHTML = '';

  const btn = div.querySelector('button');

  

  const handleClick = () => {

    console.log('clicked');

  };



  btn.addEventListener('click', handleClick);



  document.body.appendChild(div);

  

  setTimeout(() => {

    btn.removeEventListener('click', handleClick);

    document.body.removeChild(div);

  }, 1000);

}



createWidget();
点赞
2026-03-24 00:08
相关推荐
元素
元素
工具
博客
问答
登录/注册