您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

关于前端内存泄漏

时间:2020-05-01 16:55:18  来源:  作者:

前端的学习已经进入了一个艰难的上升期,越来越发现自己学习的东西还多得多,需要掌握的知识面宽广了很多,知识点需要理解的深度也加深了很多。今天看到前端内存泄漏相关,自己总结总结,也便于自己以后学习记忆。由于经验所致,必然会有不足之处,欢迎指正!

什么是内存

内存是计算机中重要的部件之一,它是与CPU进行沟通的桥梁。计算机中所有程序的运行都是在内存中进行的,因此内存的性能对计算机的影响非常大。

什么是内存泄漏

内存泄漏(Memory Leak)是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 说白了就是 不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。

看完上面的解释,脑海中就会有一点概念,计算机正常运转会用到内存,内存像是一个中转站,他把你暂存的数据,马上就会用到的数据存储在这,以让你更快捷方便的使用, 那你肯定会想到一个问题,暂存的数据到底哪些该存储在这里,存储的东西不会一直在这,又是怎么消失的呢?

在我的理解,前端开发中,全局的、被引用的对象就会被保存在内存中。比如我们常见的闭包:

function leak(arg) {
    this.arg = arg;
}
function test() {
    var l1= new leak('It is a leak');
    document.body.addEventListener('click', function() {
        l1.arg = 'Here you are!'
    })
}
test()

很明显,l1被闭包环境引用,无法被回收

那么浏览器是怎么判断一个对象是不是该被垃圾回收了呢

对前端开发来说只需要理解'引用计数法'就可以了 语言引擎有一张"引用表",保存了内存里面所有的资源(通常是各种值)的引用次数。如果一个值的引用次数是0,就表示这个值不再用到了,因此可以将这块内存释放。

代码层面内存泄露的原因

  1. 循环引用
  2. 闭包
  3. 全局变量
  4. 没有清理的DOM元素引用
  5. 被遗忘的定时器以及其中的引用

可能造成了内存泄漏要怎么排查

  1. 我们可以使用chrome浏览器调试工具中的内存快照,点击左上角灰色原点就可以保存一份快照,记录此时内存使用情况 可以看到代码中明显的l1对象被引用导致无法释放,在快照中我们也看到了一个leak实例在内存中。通过见=简单分析就可以知道是哪块代码出了问题
关于前端内存泄漏

 


关于前端内存泄漏

 

2. 如果是在Node环境下,可以用Node提供的process.memoryUsage()方法来检查内存泄露:具体方法可以参考阮一峰的例子:https://github.com/ruanyf/es6tutorial/issues/362#issuecomment-292451925

 

  • rss (resident set size) : 所有内存占用,包括指令区和堆栈。
  • heapTotal : "堆"占用的内存,包括用到的和未用到的。
  • heapUsed : 用到的堆。
  • external : V8引擎内部C++对象占用的内存。

判断内存泄露以heapUsed为准。

如何处理

  1. 避免循环引用等发生源
  2. 变量导致的内存泄露,将变量清除 a = null
  3. 事件监听导致的内存泄露,监听后移除


作者:天微蔚蓝
链接:https://juejin.im/post/5c6663a85188252a160efa3c
来源:掘金



Tags:内存泄漏   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
一、内存泄漏(memory leak)内存泄漏(memory leak)是指由于疏忽或错误造成了程序未能释放掉不再使用的内存的情况。内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存...【详细内容】
2021-09-03  Tags: 内存泄漏  点击:(105)  评论:(0)  加入收藏
导读本文介绍Java诸多优化实例:第一,排查堆上、堆外内存泄露;第二,使用arthas、jaeger、tcpdump、jstack做性能优化;第三,排查进程异常退出的原因,如被杀、System.exit、Java调用的...【详细内容】
2020-11-25  Tags: 内存泄漏  点击:(78)  评论:(0)  加入收藏
前言记录一次线上JVM堆外内存泄漏问题的排查过程与思路,其中夹带一些「JVM内存分配机制」以及「常用的JVM问题排查指令和工具分享」,希望对大家有所帮助。在整个排查过程中,我...【详细内容】
2020-08-27  Tags: 内存泄漏  点击:(44)  评论:(0)  加入收藏
Node.js 使用的是 V8 引擎,会自动进行垃圾回收(Garbage Collection,GC),因而写代码的时候不需要像 C/C++ 一样手动分配、释放内存空间,方便不少,不过仍然需要注意内存的使用,避免造成内存泄漏(Memory Leak)。...【详细内容】
2020-08-24  Tags: 内存泄漏  点击:(67)  评论:(0)  加入收藏
导读本文介绍Java诸多优化实例:第一,排查堆上、堆外内存泄露;第二,使用arthas、jaeger、tcpdump、jstack做性能优化;第三,排查进程异常退出的原因,如被杀、System.exit、Java调用的...【详细内容】
2020-08-11  Tags: 内存泄漏  点击:(50)  评论:(0)  加入收藏
一般情况下,忽视内存管理不会对传统的网页产生显著的后果。这是因为,用户刷新页面后,内存数据都被清理了。...【详细内容】
2020-06-08  Tags: 内存泄漏  点击:(60)  评论:(0)  加入收藏
前端的学习已经进入了一个艰难的上升期,越来越发现自己学习的东西还多得多,需要掌握的知识面宽广了很多,知识点需要理解的深度也加深了很多。今天看到前端内存泄漏相关,自己总结...【详细内容】
2020-05-01  Tags: 内存泄漏  点击:(53)  评论:(0)  加入收藏
1.内存管理是否正确(因为这个程序本身开辟很多内存空间进行缓存管理,同时这个程序程序本身就是基于C/C++开发的,内存管理机制一直是程序员头痛的东西) 2.程序的健硕性如何(服...【详细内容】
2020-03-06  Tags: 内存泄漏  点击:(48)  评论:(0)  加入收藏
内存泄漏定义(memory leak):一个不再被程序使用的对象或变量还在内存中占有存储空间。一次内存泄漏似乎不会有大的影响,但内存泄漏堆积后的后果就是内存溢出。 内存溢出 out o...【详细内容】
2020-02-24  Tags: 内存泄漏  点击:(71)  评论:(0)  加入收藏
长文预警。该文主要介绍因线上OOM而引发的问题定位、分析问题的原因、以及如何解决问题。在分析问题原因时候为了能更详细的呈现出引发问题的原因,去翻了hdfs 提供的Java Api主要的类FileSystem的部分代码。由于这部分...【详细内容】
2019-12-06  Tags: 内存泄漏  点击:(111)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条