JavaScript垃圾回收(三)——内存泄露

简介: 在讨论内存泄露之前,先介绍几款JavaScript内存监测工具。IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox的Leak Monitor,chrome的Porfiles等。

一、JavaScript内存监测工具


在讨论内存泄露之前,先介绍几款JavaScript内存监测工具。

IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox的Leak Monitor,chrome的Porfiles等。

 

1、Leak Monitor好不容易找到下载链接,但是我的firefox的版本安装不了。


image.png

 


2、chrome的Porfiles,点击F12就能看到,如下图所示:


image.png

 


3、IE的JSLeaksDetector,我用的是win7系统,后面发现64位的浏览器不支持,只有打开32位的IE8才有这个插件。这插件不会用。


image.png

 


4、IE的sIEve,接下来的演示都是使用这个工具。


image.png


 右下脚表格每列的头代表如下:

  1. usage 内存使用
  2. delta 内存增减。绿色是内存减少,红色是内存增加
  3. #inUse 在使用的 HTML 节点,比如 div
  4. #leaks 泄露的 HTML 节点,比如 div

 

二、循环引用


   <p id="leak1"></p>
    <input type="button" id="btnCycle" value="循环引用" onclick="cycle_leak()"/>


     var host = {mycycle:''};
        function cycle_leak() {
            var cycle = document.getElementById('leak1');
            host.mycycle = cycle;
            cycle.setAttribute('cycle', host);
        }


1、设置了一个变量host,它的一个属性mycycle赋值为一个id为leak1的p对象

2、设置id为leak1的p对象的一个自定义属性为host变量

通过工具来查看:


  1.点击按钮循环引用


    image.png

 

  2.点击左上角的按钮scan now


    image.png


  3.点击左上角的按钮show in use


    image.png


  4.可以看到id=leak1的p标签,存在循环引用


  image.png

 


三、闭包引起的内存泄漏



   <input type="button" id="btnClosure" value="闭包" onclick="closure_leak()"/>
    <p id="pMemory"></p>


//闭包
        function closure_leak(){
            var el = document.getElementById('pMemory');
            el.onclick=function(){
                alert(this.id);
            }
            //移除节点
            if (el.removeNode) {   
                el.removeNode(true);   
            }else if (el.parentNode) {   
                el.parentNode.removeChild(el);   
            }
            //页面刷新
            location.reload();
        }


这里有一点要注意一下,我原先电脑中的是IE9,IE9已经不会出现这个问题了,后面倒退到IE8才看到泄漏。

el是一个Dom元素,el引用了它的click事件的监听函数,同样该函数通过其作用域链也引用回了el元素。具体如下:

1、closure_leak()执行时创建的作用域对象叫做ScopeA

2、ScopeA引用DOM对象el

3、DOM对象el引用函数function(){alert(this.id);}

4、函数function(){alert(this.id)}引用ScopeA

5、移除节点和页面刷新是为了在sIEve查看到泄漏节点


通过工具来查看:

  1.点击按钮闭包


  image.png


  2.右边的Memory Usage中可以看到leaks为1


  image.png

  

3.点击按钮Show Leaks


  image.png


  4.显示泄漏节点的信息,不知道为什么ID没有显示出来,我明明有ID的

  image.png

 

用这个工具可以看到泄漏的情况,但是还不是很会用,网上很多的泄漏情况我还不能用这个工具提现出来。这个工具我也只是简单的展示用用,具体操作还需要进一步的研究。

相关文章
|
11天前
|
JavaScript 前端开发 算法
JS垃圾回收机制
JS垃圾回收机制
|
16天前
|
存储 算法 Java
Java的内存模型与垃圾回收机制
Java的内存模型与垃圾回收机制
|
28天前
|
存储 Java 程序员
【Python 的内存管理机制专栏】深入解析 Python 的内存管理机制:从变量到垃圾回收
【5月更文挑战第18天】Python内存管理关乎程序性能与稳定性,包括变量存储和垃圾回收。变量存储时,如`x = 10`,`x`指向内存中值的引用。垃圾回收通过引用计数自动回收无引用对象,防止内存泄漏。了解此机制可优化内存使用,避免循环引用等问题,提升程序效率和稳定性。深入学习内存管理对成为优秀Python程序员至关重要。
【Python 的内存管理机制专栏】深入解析 Python 的内存管理机制:从变量到垃圾回收
|
30天前
|
JavaScript 前端开发 算法
垃圾回收:JavaScript内存管理的利器
垃圾回收:JavaScript内存管理的利器
|
30天前
|
Web App开发 监控 前端开发
深入理解JavaScript内存泄漏:原因与解决方法
深入理解JavaScript内存泄漏:原因与解决方法
|
30天前
|
存储 算法 Java
Java一分钟之-Java内存模型与垃圾回收机制概览
【5月更文挑战第16天】本文简述Java内存模型(JMM)和垃圾回收(GC)机制。JMM包括栈、堆、方法区、程序计数器和本地方法栈。GC负责回收不再使用的对象内存,常用算法有新生代、老年代和全堆GC。文章讨论了内存溢出、死锁和GC性能等问题,提出了解决方案,如调整JVM参数和优化GC策略。此外,还强调了避免内存泄漏、大对象管理及正确释放资源的重要性。理解这些概念有助于提升Java应用的性能和稳定性。
28 1
|
1月前
|
缓存 自然语言处理 JavaScript
JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当
【5月更文挑战第14天】JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当。闭包能记住并访问词法作用域,若函数返回后,其引用的对象未被释放,就会引发泄漏。例如,`createLeakyFunction`创建的闭包保留了对大型对象`someLargeObject`的引用,即使函数执行完毕,对象也无法被垃圾回收。避免泄漏的方法包括及时解除引用、清除事件监听器、使用WeakMap和WeakSet以及定期清理缓存。使用性能分析工具可检测和修复内存泄漏问题。
26 3
|
1月前
|
监控 算法 Java
Python内存管理与垃圾回收机制
【5月更文挑战第12天】了解Python内存管理与垃圾回收对编写高效稳定程序至关重要。Python自动管理内存,使用`malloc()`和`free()`分配和释放。引用计数跟踪对象引用,当引用计数为零时对象销毁。垃圾回收处理循环引用,采用分代回收算法。优化技巧包括避免循环引用、显式释放对象、使用生成器和迭代器。理解这些机制有助于避免内存泄漏,提高性能。通过示例代码,学习如何在实践中应用内存管理最佳实践和高级优化技巧,以及如何调试和诊断内存问题。在并发和异步编程中,需注意线程安全和异步内存管理。掌握这些知识能提升Python编程的效率和质量。
24 3
|
1月前
|
JavaScript 前端开发 算法
JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
【5月更文挑战第11天】JavaScript的垃圾回收机制通过标记-清除算法自动管理内存,免除开发者处理内存泄漏问题。它从根对象开始遍历,标记活动对象,未标记的对象被视为垃圾并释放内存。优化技术包括分代收集和增量收集,以提升性能。然而,开发者仍需谨慎处理全局变量、闭包、定时器和DOM引用,防止内存泄漏,保证程序稳定性和性能。
26 0
|
1月前
|
JavaScript 前端开发 算法
JavaScript 的垃圾回收机制有一些潜在的缺点
【5月更文挑战第11天】JavaScript 的垃圾回收机制虽自动化管理内存,降低泄漏风险,但也存在性能开销、无法精确控制内存释放、全局变量和闭包可能导致内存泄漏、弱引用及循环引用问题。开发者需注意优化代码,避免这些问题,以充分利用垃圾回收机制并提升应用性能。
16 0