讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript中的内存泄漏有哪些常见模式及如何检测?

夏强酱_3918

夏强酱_3918

发布时间:2025-09-26 10:06:01

|

633人浏览过

|

来源于php中文网

原创

JavaScript内存泄漏常见于全局变量、定时器、事件监听、闭包和DOM引用未清理,可通过Chrome DevTools的Memory和Performance面板检测,并用WeakMap/WeakSet优化引用管理。

javascript中的内存泄漏有哪些常见模式及如何检测?

JavaScript中的内存泄漏虽然不像C/C++那样常见,但在长时间运行的单页应用中依然可能造成性能下降甚至崩溃。了解常见的泄漏模式并掌握检测方法,对维护应用稳定性至关重要。

常见内存泄漏模式

1. 意外的全局变量引用

未声明的变量会自动成为全局对象(如window)的属性,长期驻留内存。

示例:
function leakyFunction() {
    leak = "我是一个意外的全局变量"; // 忘记用var/let/const
}
leakyFunction(); // 'leak' 成为 window.leak

在严格模式下(use strict),这类错误会被抛出,避免隐式全局创建。

立即学习“Java免费学习笔记(深入)”;

2. 被遗忘的定时器或回调

setInterval或setTimeout中引用了外部作用域变量,且未清除,会导致回调函数及其依赖无法被回收。

示例:
setInterval(() => {
    const hugeData = fetchData();
    document.getElementById('status').textContent = hugeData.status;
}, 1000);

即使页面已切换,定时器仍在运行,持续持有hugeData引用。

3. 事件监听未解绑

DOM元素被移除后,若仍绑定事件监听,且监听器引用了外部变量,则该元素和相关数据无法释放。

示例:
const button = document.getElementById('btn');
function handleClick() {
    console.log('按钮被点击');
}
button.addEventListener('click', handleClick);
// 后续 removeChild 移除了 button,但未 removeEventListener

某些浏览器可能因此保留整个DOM节点及闭包作用域。

OC SSH Tunnel Node Recovery
OC SSH Tunnel Node Recovery

诊断并恢复通过 SSH 隧道连接的 OpenClaw 节点。用于解决配对必需错误、隧道冲突、远程端点错误以及 SSH 目标配置错误等问题。

下载

4. 闭包滥用导致的引用滞留

闭包会保持对外部变量的引用,若内部函数长期存活,外部的大对象也无法释放。

示例:
function createLeak() {
    const largeObject = new Array(10000).fill('data');
    return function() {
        return largeObject; // 内部函数引用 largeObject
    };
}
const keep = createLeak(); // largeObject 始终无法被回收

5. DOM 引用滞留(脱离文档树但仍被JS引用)

将DOM节点保存在全局变量或缓存中,即使该节点已被从页面移除,依然占用内存。

示例:
let cachedNodes = [];
function appendAndCache() {
    const div = document.createElement('div');
    document.body.appendChild(div);
    cachedNodes.push(div); // 即使 later removeChild(div),这里仍引用
}

如何检测内存泄漏

1. 使用 Chrome DevTools 的 Memory 面板

  • 打开 DevTools → Memory 标签
  • 使用 Heap Snapshot(堆快照):在操作前后各拍一张快照,对比对象数量变化
  • 重点关注 detached DOM nodes(分离的DOM节点)和增长的对象类型

2. 使用 Performance 面板记录时间线

  • 录制一段时间内的内存使用曲线(包括JS堆、DOM节点数、事件监听数)
  • 观察内存是否随操作逐步上升且不回落
  • 适合发现定时器或频繁DOM操作引起的缓慢泄漏

3. 启用 Chrome 的 Allocation instrumentation on timeline

该工具可显示每一毫秒新分配的对象,帮助定位频繁创建大对象的代码段。

4. 代码审查与规范约束

  • 确保所有事件监听都有对应的 removeEventListener
  • clearInterval/clearTimeout 在组件销毁时调用
  • 避免将DOM节点长期存储在全局缓存中
  • 使用 WeakMap/WeakSet 存储关联数据,允许对象被自动回收

5. 利用 WeakMap 和 WeakSet 减少强引用

它们只持弱引用,不会阻止垃圾回收。适合做元数据缓存。

示例:
const cache = new WeakMap();
const domNode = document.getElementById('myDiv');
cache.set(domNode, { tooltip: '提示信息' });
// 当 domNode 被移除且无其他引用时,cache 中对应项可被回收
基本上就这些。内存泄漏不复杂,但容易忽略,关键在于形成良好的资源管理习惯,并定期使用工具检查。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2486

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4379

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3127

2026.03.24

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

3705

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

1530

2025.09.18

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

199

2026.03.17

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

4627

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2108

2023.08.10

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

20

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn