JavaScript执行点击事件时出现内存泄漏、内存不释放的原因是什么？

核心问题解答 #

你对作用域变量回收的基础理解是正确的：函数执行结束后，没有外部引用指向的内部变量都会被标记为可回收，出现你观察到的现象是以下几个原因导致的：

• JS垃圾回收本身是非即时的：浏览器JS引擎普遍采用标记清除的垃圾回收策略，只会在内存占用达到特定阈值、进程进入空闲状态等时机才会执行回收操作，不会在函数作用域销毁的瞬间就清理无用内存。你看到的1~2分钟后内存回落，就是GC触发后的正常表现，不属于内存泄漏。
• 浏览器图片缓存会占用固定内存：每次插入图片节点时，浏览器会完成资源请求、解码、渲染的完整流程，哪怕你后续删除了DOM中的img节点，浏览器为了优化后续加载速度，依然会保留图片的缓存副本，这部分内存不受JS GC管控，所以内存永远不会回落至完全的初始值，只要不会出现无限制的持续增长，就属于正常情况。
• 你的代码存在低级笔误：bth.addEventListener应为btn.addEventListener，否则事件绑定失败，功能无法正常运行。

优化方案 #

如果要降低内存波动，可以修改逻辑避免反复创建删除DOM节点：

const btn = document.getElementById('btn');
let img = null;

btn.addEventListener('click', () => {
    if (!img) {
        img = document.createElement('img');
        img.id = 'img';
        img.src = './img.jpg';
        img.alt = 'Image';
        btn.after(img);
    } else {
        // 直接切换显示状态，无需删除节点，内存更稳定
        img.hidden = !img.hidden;
    }
});

如果业务要求必须完全删除节点，可在移除前主动清空src引用，加快资源释放速度：

else {
    img.src = '';
    img.remove();
    img = null;
}

内容的提问来源于stack exchange，提问作者Grizzly