js内存泄露的几种情况详细探讨


Posted in Javascript onMay 31, 2013

内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。在C++中,因为是手动管理内存,内存泄露是经常出现的事情。而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露。

1、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。

<div id="myDiv"> 
<input type="button" value="Click me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
var btn = document.getElementById("myBtn"); 
btn.onclick = function(){ 
document.getElementById("myDiv").innerHTML = "Processing..."; 
} 
</script>

应改成下面
<div id="myDiv"> 
<input type="button" value="Click me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
var btn = document.getElementById("myBtn"); 
btn.onclick = function(){ 
btn.onclick = null; 
document.getElementById("myDiv").innerHTML = "Processing..."; 
} 
</script>

或者采用事件委托
<div id="myDiv"> 
<input type="button" value="Click me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
document.onclick = function(event){ 
event = event || window.event; 
if(event.target.id == "myBtn"){ 
document.getElementById("myDiv").innerHTML = "Processing..."; 
} 
} 
</script>

2、
var a=document.getElementById("#xx"); 
var b=document.getElementById("#xxx"); 
a.r=b; 
b.r=a;

var a=document.getElementById("#xx"); 
a.r=a;

对于纯粹的 ECMAScript 对象而言,只要没有其他对象引用对象 a、b,也就是说它们只是相互之间的引用,那么仍然会被垃圾收集系统识别并处理。但是,在 Internet Explorer 中,如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象,垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。最终它们将被保留在内存中,直到浏览器关闭。
3、
var elem = document.getElementById('test'); 
elem.addEventListener('click', function() { 
alert('You clicked ' + elem.tagName); 
});

这段代码把一个匿名函数注册为一个DOM结点的click事件处理函数,函数内引用了一个DOM对象elem,就形成了闭包。这就会产生一个循环引用,即:DOM->闭包->DOM->闭包...DOM对象在闭包释放之前不会被释放;而闭包作为DOM对象的事件处理函数存在,所以在DOM对象释放前闭包不会释放,即使DOM对象在DOM tree中删除,由于这个循环引用的存在,DOM对象和闭包都不会被释放。可以用下面的方法可以避免这种内存泄露
var elem = document.getElementById('test'); 
elem.addEventListener('click', function() { 
alert('You clicked ' + this.tagName); // 不再直接引用elem变量 
});

4、
function bindEvent() 
{ 
var obj=document.createElement("XXX"); 
obj.onclick=function(){ 
//Even if it's a empty function 
} 
}

闭包非常容易构成循环引用。如果一个构成闭包的函数对象被指定给,比如一个 DOM 节点的事件处理器,而对该节点的引用又被指定给函数对象作用域中的一个活动(或可变)对象,那么就存在一个循环引用。
DOM_Node.onevent -<function_object.[[scope]] -<scope_chain -<Activation_object.nodeRef -<DOM_Node。

形成这样一个循环引用是轻而易举的,而且稍微浏览一下包含类似循环引用代码的网站(通常会出现在网站的每个页面中),就会消耗大量(甚至全部)系统内存。
解决之道,将事件处理函数定义在外部,解除闭包

function bindEvent() 
{ 
var obj=document.createElement("XXX"); 
obj.onclick=onclickHandler; 
} 
function onclickHandler(){ 
//do something 
}

或者在定义事件处理函数的外部函数中,删除对dom的引用(题外,《JavaScript权威指南》中介绍过,闭包中,作用域中没用的属性可以删除,以减少内存消耗。)
function bindEvent() 
{ 
var obj=document.createElement("XXX"); 
obj.onclick=function(){ 
//Even if it's a empty function 
} 
obj=null; 
}

5、
a = {p: {x: 1}}; 
b = a.p; 
delete a.p;

执行这段代码之后b.x的值依然是1.由于已经删除的属性引用依然存在,因此在JavaScript的某些实现中,可能因为这种不严谨的代码而造成内存泄露。所以在销毁对象的时候,要遍历属性中属性,依次删除。
6. 自动类型装箱转换
别不相信,下面的代码在ie系列中会导致内存泄露
var s=”lalala”; 
alert(s.length);

s本身是一个string而非object,它没有length属性,所以当访问length时,JS引擎会自动创建一个临时String对象封装s,而这个对象一定会泄露。这个bug匪夷所思,所幸解决起来相当容易,记得所有值类型做.运算之前先显式转换一下:
var s="lalala"; 
alert(new String(s).length);

7、某些DOM操作
IE系列的特有问题 简单的来说就是在向不在DOM树上的DOM元素appendChild;IE7中,貌似为了改善内存泄露,IE7采用了极端的解决方案:离开页面时回收所有DOM树上的元素,其它一概不管。
Javascript 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 #Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 #Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 #Javascript
js怎么终止程序return不行换jfslk
May 30 #Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 #Javascript
You might like
学习php笔记 字符串处理
2010/10/19 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python绘制随机网络图形示例
2019/11/21 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
python drf各类组件的用法和作用
2021/01/12 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
我爱我家教学反思
2014/05/01 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2014年协会工作总结
2014/11/22 职场文书
自荐信怎么写
2015/03/04 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
早上好问候语大全
2015/11/10 职场文书
MySQL基础(一)
2021/04/05 MySQL
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Python编程super应用场景及示例解析
2021/10/05 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫