0

0

什么是内存泄漏_如何在javascript中避免它们【教程】

紅蓮之龍

紅蓮之龍

发布时间:2026-01-21 19:57:25

|

720人浏览过

|

来源于php中文网

原创

javascript内存泄漏源于意外强引用链导致对象不可被gc回收,常见于全局变量持有、未移除事件监听器、未清理定时器、闭包捕获大对象及dom节点与监听器组合未解绑。

什么是内存泄漏_如何在javascript中避免它们【教程】

JavaScript 中的内存泄漏不是“变量没被 delete”或“对象没被手动回收”这么简单——V8 引擎会自动垃圾回收,但只要存在**意外的强引用链**,对象就无法被回收,内存就会持续增长。

哪些引用会导致对象无法被 GC 回收

垃圾回收器(GC)只清除那些“不可达”的对象。所谓“不可达”,是指从根对象(如 globalThis、当前执行上下文的变量环境等)出发,没有任何一条引用路径能访问到它。以下情况会让对象意外保持可达:

  • 全局变量意外持有 DOM 节点或大型数据结构(例如 window.cache = largeArray
  • 事件监听器未移除,且回调中闭包捕获了外部大对象(element.addEventListener('click', () => console.log(bigData)),之后未调用 removeEventListener
  • 定时器(setInterval / setTimeout)的回调长期存活,并引用着本该销毁的组件实例
  • 闭包中保留对父作用域中大数组、大 Map 或 DOM 节点的引用,而该闭包又被全局或长生命周期对象持有

DOM 节点 + 事件监听器是最常见的泄漏组合

尤其在单页应用中,组件卸载(unmount)后如果忘了清理,极易泄漏。比如 React 中未用 useEffect 清理,或原生 JS 中动态创建元素后未解绑:

// ❌ 危险:节点被移除,但监听器仍活着,且闭包里有 data
const data = new Array(10000).fill('payload');
const btn = document.createElement('button');
btn.addEventListener('click', () => console.log(data));
document.body.appendChild(btn);
// ... 后续 btn 被 remove(),但 data 仍被监听器闭包引用

✅ 正确做法是显式清理:

Dora
Dora

创建令人惊叹的3D动画网站,无需编写一行代码。

下载

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

const handler = () => console.log(data);
btn.addEventListener('click', handler);
// 卸载时:
btn.removeEventListener('click', handler);
// 或使用 AbortController(现代推荐):
const ac = new AbortController();
btn.addEventListener('click', () => console.log(data), { signal: ac.signal });
// 卸载时:
ac.abort(); // 自动移除所有绑定 signal 的监听器

用 Chrome DevTools 快速定位泄漏点

不要靠猜。打开 Memory 面板,用“堆快照(Heap Snapshot)”对比操作前后的差异:

  • 先拍一张快照(Take heap snapshot),做一次操作(如打开/关闭模态框)
  • 再拍一张,切换到 Comparison 视图,筛选 Retained Size 大幅增加的对象
  • 重点关注 ClosureHTMLDivElementArray 等类型,点开看 “Retainers” 列——谁在引用它?是不是某个没清理的 eventListener 或全局 Map
  • 特别注意 (system) 类型下的 Detached DOM tree:说明 DOM 节点已被移除,但 JS 仍有引用,典型泄漏信号

真正难排查的从来不是“有没有泄漏”,而是“谁在悄悄留着引用”。哪怕只多持有一个 1MB 的 ArrayBuffer,挂载 20 次组件就吃掉 20MB——用户不重启浏览器,这部分内存就不会还给系统。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

1057

2023.08.11

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

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

837

2023.11.06

chrome什么意思
chrome什么意思

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

1057

2023.08.11

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

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

837

2023.11.06

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

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

93

2025.09.18

python 全局变量
python 全局变量

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

106

2025.09.18

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

548

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

30

2025.12.22

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1.1万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号