深度解读JS内存机制：8种泄漏案例与优化方案

局外人LZ

于 2025-06-06 09:39:45 发布

阅读量1k

点赞数 21

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/randy521520/article/details/148458832

前端专栏收录该内容

71 篇文章

订阅专栏

深度解读JS内存机制：8种泄漏案例与优化方案

一、前言
二、意外的全局变量
三、未清理的定时器（setInterval / setTimeout）
四、闭包引用未释放
五、DOM 引用未清除
六、事件监听未移除
七、缓存未清理（Map ）
八、未释放的第三方库引用
九、闭环引用
十、Chrome DevTools Memory内存分析工具：DOM节点内存泄漏
十一、Chrome DevTools Memory内存分析工具：闭包内存泄漏

一、前言

在 JavaScript 开发中，内存管理是影响应用性能的关键因素之一。由于 JS 的自动垃圾回收机制（GC），许多开发者容易忽视内存泄漏问题，直到应用出现卡顿、崩溃时才后知后觉。实际上，不合理的内存使用会导致应用性能下降，甚至引发严重的稳定性问题。
本文将从 JS 内存管理机制入手，深入解析垃圾回收（GC）的工作原理，并重点剖析 7 种常见的内存泄漏场景，包括闭包滥用、未清理的定时器、DOM 引用残留等高频问题。同时，结合 Chrome DevTools 内存分析工具，提供实用的排查与优化方案，助你从根源上规避内存泄漏风险，打造更健壮的前端应用。

二、意外的全局变量

1.问题代码

function createGlobalVar() {
  leakVar = '这是一个全局变量'; // 未使用 var/let/const，隐式全局变量
  this.globalVar = 'this 指向 window（非严格模式）'; 
}
createGlobalVar();

2.优化方案

使用严格模式（‘use strict’）避免意外全局变量。

'use strict'; // 启用严格模式

function checkStrictMode() {
  leakVar = '这会报错！'; // ❌ ReferenceError: leakVar is not defined
}
checkStrictMode();

显式声明变量（let / const）。

function safeDeclaration() {
  const localVar = '安全局部变量'; // ✅ 正确：使用 const/let 声明
  console.log(localVar);
}
safeDeclaration();
console.log(typeof localVar); // ✅ 输出 "undefined"（变量未泄漏到全局）

三、未清理的定时器（setInterval / setTimeout）

1.问题代码

let intervalId = setInterval(() => {
  console.log('定时器仍在运行...');
}, 1000);

// 忘记 clearInterval(intervalId)，即使组件卸载，定时器仍持续运行

2.优化方案：在组件卸载或不再需要时清理定时器

clearInterval(intervalId);
clearTimeout(timeoutId);

四、闭包引用未释放

1.问题代码

function outer() {
  const bigData = new Array(1000000).fill('*'); // 大对象
  return function inner() {
    console.log('闭包引用了 bigData');
  };
}
const closureFn = outer(); // bigData 无法释放，因为闭包持有引用

2.优化方案：在不需要时手动解除引用

closureFn = null; // 释放闭包引用

五、DOM 引用未清除

1.问题代码

const elements = {
  button: document.getElementById('myButton'),
};document.getElementById('myButton'));

2.优化方案：移除 DOM 后清除引用

elements.button = null;

六、事件监听未移除

1.问题代码

const cache = new Map();
function setCache(key, value) {
  cache.set(key, value);
}
// 长期存储大量数据，未清理导致内存增长

2.优化方案：移除 DOM 后清除引用

button.removeEventListener('click', handleClick);

七、缓存未清理（Map ）

1.问题代码

const cache = new Map();
function setCache(key, value) {
  cache.set(key, value);
}
// 长期存储大量数据，未清理导致内存增长

2.优化方案：

使用 WeakMap，键必须是对象，不影响垃圾回收机制回收对象

const weakCache = new WeakMap();
weakCache.set({ key: 'obj' }, 'value'); // 当对象被回收，条目自动清除

手动清理缓存

cache.delete(key);

八、未释放的第三方库引用

1.问题代码

import { initHeavyLibrary } from 'heavy-library';
let libInstance = initHeavyLibrary();

// 应用卸载后，libInstance 仍占用内存

2.优化方案：在组件卸载时手动销毁实例

libInstance.destroy(); // 调用库提供的清理方法
libInstance = null;

九、闭环引用

1.在现代浏览器中一般闭环引用，已经通过标记-清除算法（Mark-and-Sweep）可以完美处理循环引用。但是某些情况下还是会造成内存泄露（循环引用 + 全局/长期存活对象），问题代码：

window.globalObj = { data: "长期存在" };
const objA = { ref: window.globalObj };
window.globalObj.ref = objA; // 循环引用且 globalObj 全局存活

2.优化方案：手动解除引用

window.globalObj.ref = null; // 断开对 objA 的引用
objA.ref = null;             // 断开对 globalObj 的引用
window.globalObj = null;     // 清除全局变量

十、Chrome DevTools Memory内存分析工具：DOM节点内存泄漏

1.测试代码：把下面代复制到html，使用谷歌浏览器打开，F12切换到Memory

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>DOM 节点泄漏示例</title>
</head>
<body>
<button id="create-dom">创建泄漏节点</button>
<script>
    const detachedElements = [];

    document.getElementById('create-dom').addEventListener('click', () => {
        // 创建 DOM 节点
        const div = document.createElement('div');
        div.textContent = '泄漏的节点 ' + Date.now();

        detachedElements.push(div); // 这将导致泄漏

        document.body.appendChild(detachedElements[0]);
        // 从 DOM 移除但保留 JavaScript 引用
        document.body.removeChild(detachedElements[0]);
    });
</script>
</body>
</html>

2.点击take heap snapshot，记录dom未创建之前的快照
在这里插入图片描述
3.多次点击“创建泄漏节点” ，再点击take heap snapshot生成快照，然后在第二次快照中选中对比模式（Comparison），搜索Detached可以看到未被释放的Dom节点

4.还可使用Detached elements查看未被释放的Dom节点，在Memory下选中Detached elements，多次点击“创建泄漏节点，再点击obtain setached elements，即可看到未被释放的dom节点
在这里插入图片描述

十一、Chrome DevTools Memory内存分析工具：闭包内存泄漏

1.测试代码：把下面代复制到html，使用谷歌浏览器打开，F12切换到Memory

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>闭包泄漏示例</title>
</head>
<body>
<button id="create-closure">创建泄漏闭包</button>
<script>
    const closures = [];

    function createLeakyClosure() {
        let largeArray = new Array(1000000).map((_, i) => ({
            id: i,
            timestamp: Date.now()
        }));

        return function() {
            // 使用数组做一些操作...
            const len = largeArray.length;
            // largeArray  = []; // 在函数结束时手动解除引用
            return len;
        };
    }

    document.getElementById('create-closure').addEventListener('click', () => {
        closures.push(createLeakyClosure()); // 这将导致泄漏
        closures[closures.length - 1]()
    });
</script>
</body>
</html>

2.点击take heap snapshot，记录dom未创建之前的快照
在这里插入图片描述
3.多次点击“创建泄漏闭包” ，再点击take heap snapshot生成快照，，然后在第二次快照中选中对比模式（Comparison），可以看到第二次快照内存比第一次大，找到内存比较大的数组，查看数组中的第一个元素会发现是“largeArray”，说明是“largeArray”数组造成的内存泄漏
在这里插入图片描述