前端内存泄漏及前端如何利用调试工具查看内存泄露

原创 已于 2022-10-29 20:22:38 修改 · 1.9k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2022-10-29 20:20:21 首次发布
本文介绍了JavaScript的内存泄漏问题，即Detached DOM node。阐述了常见的垃圾回收方法，如引用计数算法（IE使用，存在循环引用问题易致内存泄漏）和标记清除算法（V8引擎采用，可销毁无人引用空间并整理碎片）。还列举了常见内存泄漏情况，如挂变量到window对象、滥用闭包等。

内存泄漏又叫做Detached DOM node(脱离文档的节点)

javascript垃圾回收机制常见的两种方法:

  • 引用计数算法
  • 标记清除算法

引用计数法

IE使用的是引用计数算法, 这种方法无法解决循环引用的垃圾回收问题, 容易造成内存泄漏

那么什么是引用计数算法呢? 什么又是循环引用问题呢?

所谓引用计数即, 我们有一个变量每次被引用GC机制就会给这个变量计数加一, 当引用减少就计数减一, 如果计数为零, 在下一次垃圾回收时, 就会被释放掉.

 当存在循环引用的情况

 这就是循环引用, 所以垃圾回收机制并不会对obj, obj2进行内存释放, 变量常驻内存, 导致内存泄漏.

 标记清除法

堆内存中的对象没有人引用他们, 但是他们还占用内存, 这时候垃圾回收就会销毁他们了, V8引擎的垃圾回收机制不仅销毁掉堆内存中无人引用的空间, 还会对堆内存进行碎片整理

 常见的内存泄漏情况

//一 

window对象, 是浏览器中javascript的顶级对象, 它的存在贯穿这个javascript的生命周期, 如果我们不小心把庞大又用不上的变量挂到了window对象上, 将会造成内存泄漏

 //二

滥用闭包

//三

没及时清理定时器

//四

给某个dom节点绑定了很多事件, 使用过程中dom节点被移除但是被释放内存

 移除了box元素后, box仍然占用内存, 这也是内存泄漏, 因为box用不到了但是没有释放内存

怎么使用调试工具查看

湖边看客
关注
HOW - 内存泄漏和溢出问题和定位技巧
weixin_58540586的博客
05-01 684
内存泄漏（Memory Leak）和内存溢出（Memory Overflow）是两种不同的内存管理问题，它们的表现和原因不同。今天我们主要介绍JavaScript中会遇到的内存泄漏和溢出场景，包括定位技巧。
前端性能调试实战：一次内存泄漏的排查与解决
ChengFengTech的博客
12-11 1013
组件的清理工作不能忽视,特别是涉及第三方库时开发自定义 Hook 能有效封装复杂的资源管理逻辑性能问题要及时排查,不能等到用户反馈才重视开发时要时刻注意内存管理,保持"收纳"好习惯就像整理房间一样,用完的东西要及时收好,垃圾要及时倒掉,这样才能保持整洁。在代码世界也是一样,资源用完要及时释放,订阅要及时取消,这样才能保持系统的健康运行。性能调试是前端开发中很重要的一环,它不仅需要扎实的技术功底,还需要细心和耐心。就像侦探破案一样,通过收集线索、分析证据,最终找到问题的真相。
内存泄露怎么排查？
最新发布
wyzqhhhh的博客
09-21 954
​​内存泄漏是指：程序运行过程中，分配了内存（比如对象、闭包、事件监听、定时器等）却没有在不再需要时释放，导致这部分内存无法被垃圾回收（GC），从而造成内存持续增长，最终可能引发性能问题或程序崩溃。​​步骤操作 / 思路​​1. 怀疑有内存泄漏​​页面越来越卡，内存占用越来越高，React 组件不卸载等​​2. 排查工具​​使用 Chrome DevTools → Memory（堆快照、分配时间线）React DevTools 查组件是否卸载Node.js 可用​​3. 常见泄漏点​​。
内存泄漏及解决方案
When you can't win by being better, you can win by being different.
03-19 5181
首先，需要了解浏览器自身的内存回收机制。每个浏览器会有自己的一套回收机制，当分配出去的内存不使用的时候便会回收；内存泄露的根本原因就是你的代码中分配了一些‘顽固的’内存，浏览器无法进行回收，如果这些’顽固的’内存还在一直不停地分配就会导致后面所用内存不足，造成泄露。
js晋级篇——前端内存泄漏探讨
weixin_34198881的博客
02-17 205
1.IE7/8 DOM对象或者ActiveX对象循环引用导致内存泄漏 　　循环引用分为两种： 　　第一种：多个对象循环引用 var a=new Object; var b=new Object; a.r=b; b.r=a; 　　第二种：循环引用自己 var a=new Object; a.r=a; 　　对于ECMAScript 对象而言，只要没有其他对象引用...
前端如何排查内存泄漏
旧梦
12-31 2938
使用浏览器开发者工具（如 Chrome DevTools）进行内存分析。确保移除不再需要的事件监听器和定时器。避免在闭包中持有不再使用的对象引用。使用工具和日志来帮助识别和跟踪内存使用。通过持续关注这些方面，可以有效避免内存泄漏，保证应用的性能。
【前端】内存泄露及解决方案
前端小菜鸟也有人起的博客
08-02 1915
【前端】内存泄露及解决方案
前端内存泄漏的几种情况及方案
爱分享的程序员
03-02 608
前端内存泄漏是常见但容易被忽视的问题，可能导致页面卡顿、崩溃或性能下降。以下是几种典型场景及解决方案：
如何处理前端开发中的内存泄漏问题？
破损的天堂鸟博客
10-14 1443
如何处理前端开发中的内存泄漏问题？通过以上方法，开发者可以有效地识别和解决前端开发中的内存泄漏问题，从而提高网页的性能和用户体验。
【高频考点精讲】前端工程师必会的10种内存泄漏检测方法
全栈老李的博客
05-07 1043
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。内存泄漏就像是你家水龙头没关紧，水一直在流但没人用，最后水费账单吓死人。在前端开发中，内存泄漏同样会导致页面越来越卡，最终崩溃。今天全栈老李就带大家深入理解前端内存泄漏的检测方法。
前端OOM内存泄漏如何排查？
量子前端的博客
03-23 1762
现代前端开发中，随着应用的复杂性和交互性的增加，OOM（Out Of Memory，内存不足）问题和内存泄漏逐渐成为影响用户体验和应用性能的关键挑战。排查和解决这些问题需要开发人员具备良好的调试技巧和优化策略。
前端内存泄漏
ZhanShenvsDiHuang的博客
04-07 1999
前端中内存的泄漏
前端内存泄漏详解
luyangguo的博客
02-16 320
JavaScript 通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单：确定哪个变量不会再使用，然后释放它占有的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间（或者说在代码执行过程中某个预订的收集时间）就会自动运行。垃圾回收是一个近似且不完美的方案，因为某块内存是否还有用，属于“不可判定的”问题，意味着靠算法是解决不了的。——《JavaScript 高级程序设计（第4版）》4.3 垃圾回收内存泄漏。
前端开发中可能会发生内存泄漏
前端小白
03-01 1864
内存泄漏，开发中需要注意的内存泄漏，前端开发中对于内存泄漏的处理
如何定位内存泄露（垃圾回收 DevTools NodeJs）
HZFEStudio的博客
10-30 891
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview 完整高频题库阅读地址：https://febook.hzfe.org/ 相关问题 垃圾回收机制 回答关键点 垃圾回收 DevTools 内存泄漏是指不再使用的内存，没有被垃圾回收机制回收。当内存泄漏很大或足够频繁时，用户会有所感知：轻则影响应用性能，表现为迟缓卡顿；重则导致应用奔溃，表现为无法正常使用。为了避免内存泄漏带来的不良影响，需要对垃圾回收机制进行了解，掌握内存泄漏分析方法，完善线上相关监控
前端内存分析、优化、检测泄露
luemeon的博客
10-02 2101
Tom 的 shallow 占了 32M，retained 占用了 56M，这是因为 retained 包括了引用的指针对应的内存大小，即。特别是现在 SPA 项目的盛行，用户在切换页面时，老页面的组件会被框架自动清理，所以我们可以放心大胆的使用闭包，无需多虑。3）选中构造函数，底部会显示对应源码文件，点击源码文件，可以跳转到具体的代码，这样我们就知道是哪里的代码造成内存过大。它们对值的引用都是不计入垃圾回收机制的，如果其他对象都不再引用该对象，那么gc 会自动回收该对象所占用的内存。
前端内存泄漏详解（一）
编码世界
11-18 1940
JavaScript 通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单：确定哪个变量不会再使用，然后释放它占有的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间（或者说在代码执行过程中某个预订的收集时间）就会自动运行。垃圾回收是一个近似且不完美的方案，因为某块内存是否还有用，属于“不可判定的”问题，意味着靠算法是解决不了的。——《JavaScript 高级程序设计（第4版）》4.3 垃圾回收我们知道了JS对内存管理是自动的，并没特殊的机制去实现。那么为什么有时候会出现内存泄漏的情况呢？
内存泄漏：前端开发者的噩梦——内存泄露的原因及排查
一只爱吃糖的小羊
08-21 2255
内存泄漏是前端开发中常见的问题，但它并不是无法解决的。通过谨慎管理事件监听器，避免循环引用，使用浏览器开发工具和了解垃圾回收的工作原理，可以帮助排查和预防内存泄漏，确保应用程序保持高性能和稳定性。
【前端内存泄漏】一文详解内存泄漏的原理、原因、解决方案
weixin_62106250的博客
07-13 1810
程序在不需要使用某些对象或数据时，没有及时释放它们的内存，导致内存使用量不断增加，最终可能导致性能下降甚至浏览器崩溃。
Gnogrind：Valgrind内存调试器的GNOME前端工具
“Gnogrind”是一款专为Valgrind内存调试工具设计的GNOME图形化前端，旨在提升开发者在Linux环境下进行内存分析与调试的效率和用户体验。作为一款开源项目，Gnogrind通过集成Valgrind强大的底层功能，并结合GNOME...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值