博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript中的内存泄漏
阅读量:5347 次
发布时间:2019-06-15

本文共 3172 字,大约阅读时间需要 10 分钟。

最新博客站点:

一、内存泄漏

       由于某些原因不再需要的内存没有被操作系统或则空闲内存池回收。编程语言中有多种管理内存的方式。这些方式从不同程度上会减少内存泄漏的几率,高级语言嵌入了一个名为垃圾收集器的软件,其工作是跟踪内存分配和使用,以便找到不再需要分配内存的时间,在这种情况下,它将自动释放它。然而,该过程是近似的,因为知道是否需要某些存储器的一般问题是不可判定的(不能通过算法来解决)。

1. 循环引用导致的内存泄漏

       当两个对象相互引用时,会形成一个循环引用,使每个对象的引用计数为1,在纯粹的垃圾收集系统中,循环引用不是问题:如果任何其他对象都不引用所涉及的对象,则两者都是会被视为垃圾而回收。但是,在引用计数系统中,两个对象都不能被销毁,因为引用计数永远不会减到零。在使用垃圾回收和引用计数的混合系统中,由于系统无法识别循环引用而导致泄漏。在这种情况下,DOM对象和Javascript对象都不会被破坏。

                    
Div Element

       如上面代码所示,Javascript对象obj引用了DivElement表示的DOM对象。DOM对象反过来又通过expandoProperty对Javascript对象有一个引用。Javascript对象和DOM对象之间存在循环引用。因为DOM对象通过引用计数进行管理,所以两个对象都不会被销毁。

2. 外部函数引起的循环引用

       下面代码中,通过调用外部函数myFunction来创建循环引用。Javascript对象和DOM对象之间的循环引用将最终导致内存泄漏。

        

       正如上面这两类代码示例所显示的,循环很容易创建。他们还倾向于在Javascript中最方便的编程结构:闭包。

3. 闭包引起的内存泄漏

       Javascript的优点之一是它允许函数嵌套在其他函数之中,嵌套内部函数可以继承外部函数的参数和变量,并且对该函数是私有的。Javascript开发人员使用内部函数将小效用函数集成到其他函数中,使得内部函数(childFunction)可以访问外部parentFunction的变量。当一个内部函数获取并使用对其外部函数变量的访问时,它称为闭包

       一个简单的闭包例子

    

       在上面的代码中,closureDemoInnerFunction是父函数closureDemoParentFunction中定义的内部函数。当用外部x的参数对closureDemoParentFunction进行调用时,外部函数变量a被赋值外部x。函数返回一个指向内部函数closureDemoInnerFunction的指针,它包含在变量x中。必须注意的是,外部函数closureDemoParentFunction的局部变量a即使在外部函数返回后也会存在。这与C++等编程语言不同,在函数返回后,局部变量不再存在。在Javascript中,调用closureDemoParentFunction的时刻,创建一个具有属性a的作用域对象。此属性包含paramA的值,也称为"outer x"。同样,当closureDemoParentFunction 返回时,它将返回内部函数closureDemoInnerFunction,它包含在变量x中。

       由于内部函数持有对外部函数的变量的引用,因此具有属性a的作用域对象不会被垃圾回收。当在x上用一个参数值(即x("inner x")进行调用时,将弹出一个显示"outer x inner x"的警报。闭包功能强大,因为它们允许内部函数在外部函数返回后保留对外部函数变量的访问权限。遗憾的是,闭包在Javascript对象和DOM对象之间隐藏循环引用非常出色。

       由于IE9之前的版本对Javascript对象和COM对象使用不同的垃圾回收例程,因此闭包在这些版本中会导致一些特殊的问题。具体来说,如果闭包的作用域中保存着一个HTML元素,那么就意味着该元素将无法被销毁。

function assignHandler() {    var element = document.getElementById("my_btn");    element.onclick = function() {         alert(element.id);     };}

       以上代码创建了一个作为element元素事件处理程序的闭包,而这个闭包又创建了一个循环引用。由于匿名函数保存了一个对assignHandler()的活动对象的引用,因此就会导致无法减少element的引用数。只要匿名函数存在,element的引用数至少也是1,因此它占用的内存永远也会被回收。不过,这个问题是可以被解决的:

function assignHandler() {    var element = document.getElementById("my_btn");    var id = element.id;    element.onclick = function() {         alert(id);     };    element = null;}

       上面代码,是把element.id的一个副本保存在一个变量中,并且在闭包中引用该变量消除循环引用,但是,这种程度还不能解决内存泄露的问题。必须要记住:闭包会引用包含函数的整个活动对象,而这其中包含着element。即使闭包不直接引用element,包含函数的活动对象中也仍然会保存着一个引用。因此,必须要把element变量设置为null。这样就能解除对DOM对象的引用,顺利减少引用次数,确保回收其占用的内存。

4. 事件处理程序引起的内存泄漏

      在下面的代码中,你将会发现,一个JavaScript对象(obj)包含对DOM对象(由id"元素"引用)的引用的闭包。DOM元素反过来又具有对Javascript obj的引用。在Javascript对象和DOM对象之间产生的循环引用会导致内存泄漏。

        

5. 避免内存泄漏的方法

       在Javascript中,内存泄露的另一方面是你可以避免它们。当您确定了可以导致循环引用的模式时,正如前面所列举的那样,您可以开始围绕它们进行工作。我们将使用上面三种的事件处理中内存泄漏的方式解决已知内存泄露的方法。一个简单的解决方案是使Javascript对象obj设为null,从而显式中断循环引用。

         

       另一种方法是通过添加一个闭包,可以避免Javascript对象和DOM对象之间的循环引用。

         

       第三种方法可以通过添加一个函数来避免闭包,从而防止泄漏。

           

6. 在Chrome中查找内存泄漏

       Chrome提供了一系列优秀的工具来分析JavaScript代码的内存使用。涉及与内存相关的两幅图:timeline视图和profile视图。

参考:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#Release_when_the_memory_is_not_needed_anymore

更多内容请参考:

http://www.ruanyifeng.com/blog/2017/04/memory-leak.html

转载于:https://www.cnblogs.com/princess-knight/p/9280500.html

你可能感兴趣的文章
How to Find Research Problems
查看>>
Linux用户管理
查看>>
数据库第1,2,3范式学习
查看>>
《Linux内核设计与实现》第四章学习笔记
查看>>
使用iperf测试网络性能
查看>>
图片的显示隐藏(两张图片,默认的时候显示第一张,点击的时候显示另一张)...
查看>>
Docker 安装MySQL5.7(三)
查看>>
python 模块 来了 (调包侠 修炼手册一)
查看>>
关于CSS的使用方式
查看>>
本地MongoDB服务开启与连接本地以及远程服务器MongoDB服务
查看>>
跨域解决方案之CORS
查看>>
分析语句执行步骤并对排出耗时比较多的语句
查看>>
原生JS轮播-各种效果的极简实现
查看>>
软件工程总结作业---提问回顾与个人总结
查看>>
计数器方法使用?
查看>>
带你全面了解高级 Java 面试中需要掌握的 JVM 知识点
查看>>
sonar结合jenkins
查看>>
解决VS+QT无法生成moc文件的问题
查看>>
AngularJs练习Demo14自定义服务
查看>>
关于空想X
查看>>